fetch技术
2024-08-26 15:30:13
Snandy
If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ends of strings that somebody else pulls.
Fetch：下一代 Ajax 技术
Ajax，2005年诞生的技术，至今已持续了 10 年。它是一种在客户端创建一个异步请求的技术，本质上它不算创新，是一组技术的组合。它的核心对象是 XMLHttpRequest。
简单回顾下历史
- 1996年，IE 中首先添加了 iframe 用来实现异步请求获取服务器内容
- 1998年，微软 Outlook 在客户端 script 中实现了 XMLHttp 对象
- 1999年，微软在 IE5 中添加了 XMLHTTP ActiveX 对象用来异步获取服务器内容，该对象直到 Edge 浏览器才废弃。其它浏览器陆续实现了类似的对象称为 XMLHttpRequest
- 2004年，Google Gmail 中大量使用 XMLHttpRequest
- 2005年，Google Map 中大量使用 XMLHttpRequest
- 2005年，Jesse James Garrett 发表了文章 "Ajax: A New Approach to Web Applications"，Ajax 诞生
- 2006年，XMLHttpRequest 被 W3C 采纳，最后更新时间是 2014年1月
使用步骤大概如下
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var xhr = new XMLHttpRequest();xhr.open('GET', url);xhr.onload = function() { // To do with xhr.response};xhr.onerror = function() { // Handling errors};xhr.send(); |
以上可以看出，XHR 使用 onXXX 处理，典型的 "事件模式"。
Fetch 目前还不是 W3C 规范，由 whatag负责出品。与 Ajax不同的是，它的 API 不是事件机制，而采用了目前流行的 Promise 方式处理。我们知道 Promise是已经正式发布的 ES6 的内容之一。
|
1
2
3
4
5
6
7
8
9
|
fetch('doAct.action').then(function(res) { if (res.ok) { res.text().then(function(obj) { // Get the plain text }) }}, function(ex) { console.log(ex)}) |
以上 fetch 函数是全局的，目前最新的Firefox，Chrome，Opera 都已支持，详见
以上是一个最简单的请求，只要传一个参数 url 过去，默认为 get 请求，获取纯文本，fetch 第二个参数可以进行很多配置，比如 POST 请求
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
fetch("doAct.action", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: "keyword=荣耀7i&enc=utf-8&pvid=0v3w1kii.bf1ela"}).then(function(res) { if (res.ok) { // To do with res } else if (res.status == 401) { // To do with res }}, function(e) { // Handling errors}); |
如果返回的是 JSON， 如下
|
1
2
3
4
5
6
7
8
9
|
fetch('doAct.action').then(function(res) { if (res.ok) { res.json().then(function(obj) { // Get the JSON }) }}, function(ex) { console.log(ex)}) |
res 实际上该规范定义的 Response 对象，它有如下方法
- arrayBuffer()
- blob()
- json()
- text()
- formData()
此外，Fetch 跨域请求时默认不会带 cookie，需要时得手动指定 credentials: 'include'
|
1
2
3
|
fetch('doAct.action', {credentials: 'include'}).then(function(res) { // ...}) |
这和 XHR 的 withCredentials 一样，只是 withCredentials 只要设为 true。
最新文章
- MySQL调优参数
- 在 C# 控制台中记录异常日志并输出
- 移植linux(1)
- 【风马一族_Android】适合你 --- 大概的描述
- 量化Hacker News 中50天的数据 Quantifying Hacker News with 50 days of data
- Spark SQL概念学习系列之Spark SQL的简介（一）
- android133 360 06 一键锁频，清楚数据
- (\S)? 匹配0个或者一个前导字符
- 懒省事的小明--nyoj55
- Checking Network Configuration requirements Failed
- sharepoint 2013 附件控件FileUpload怎样检验是否为图片的方法
- java--继承的一些笔记
- RH133读书笔记(2)-Lab 2 Working with packages
- mysql主键，外键，索引
- SpringBoot添加自定义拦截器
- h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器
- Asp.Net Core 轻松学-实现跨平台的自定义Json数据包
- 【转载】ASP.NET MVC设置允许跨域访问
- Redis 实现安全队列
- 几种简单的编码（为什么使用ASCII码）