回顾XMLHttpRequest

传统的Ajax指的是XMLHttpRequest(XHR)：

var xhr = new XMLHttpRequest()

1.第一个要调用的方法是open()，open不会真的发送请求

xhr.open("get",url,false) //三个参数：请求方法，请求路径(相对于当前页面)，是否异步请求

2.第二个要调用的方法是send()，send中发送请求

xhr.send(null) //参数：请求发送的主体数据

收到响应后，返回的数据会自动填充xhr对象

• responseText：作为响应主体被返回的文本

• responseXML：XML DOM文档

• status：响应的HTTP状态

• statusText：HTTP状态说明

发送异步请求的时候，我们通常检测XHR对象的readyStatus取值：

0：未初始化，未调用open()方法

1：启动：调用open，未调用send

2：发送：调用send，但是未收到响应

3：接受：接受到部分数据

4：完成：已经接收到所以数据了

load事件

onload事件处理程序会接受到一个event对象，而起target属性就指向XHR对象实例，因而可以访问到XHR对象的所以方法和属性。

XMLHttpRequest没有关注分离(Separation of Concerns)的原则，配置调用非常混乱。

通常的写法如下：

var xhr = new XMLHttpRequest(); xhr.open('GET', url);  xhr.onload = function() {   console.log(xhr.response); };  xhr.onerror = function() {   console.log("Oops, error"); };  xhr.send();

fetch登场

目前fetch的版本支持详情如下 https://caniuse.com/#search=fetch

fetch 语法

fetch的API是基于promise设计的

fetch(url, init).then(function(response) { ... });

init可选的配置对象，包括所有对请求的设置：

• method：请求的方法，GET POST等

• headers：请求的头信息，形式为 Headers 对象或 ByteString。 body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。

• mode：请求的模式，见下文

• credential：默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。

  omit: 从不发送cookies.

  same-origin: 只有当URL与响应脚本同源才发送 cookies、 HTTP Basic authentication 等验证信息.

  include: 不论是不是跨域的请求,总是发送请求资源域在本地的 cookies、 HTTP Basic authentication 等验证信息.

• cache：请求的cache模式：default，no-store，no-cache，force-cache，only-if-cache

Response Metadata

上例子中，可以看到response被转换为json，如果我们需要过去response的其他元信息，我们可以通过以下的方式：

fetch('./test.json').then(function(response) {   console.log(response.headers.get('Content-Type'));//application/json   console.log(response.headers.get('Date'));//Wed, 5 Sep 2018 09:33:44 GMT    console.log(response.status);//200   console.log(response.statusText);//ok   console.log(response.type);//basic   console.log(response.url)//http://localhost:63342/Apple/test/test.json })

response.headers的方法：

• has(name) (boolean)-判断是否存在该头部信息

• get(name) (string)-获取头部信息

• getAll(name) (Array)-获取所有的头部信息

• set(name, value)- 设置信息头的参数

• append(name, value)- 添加header内容

• delete(name)- 删除header的信息

• forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息

Response Type

上例子中，可以看到 console.log(response.type);//basic 为basic。

当我们发送一个fetch请求的时候，response可能的返回值类型有"basic", "cors" or "opaque". 这些types是为了

指示资源的来源，并可用于告诉你应如何处理响应对象。

• 如果请求和资源是同源的，那么请求是basic类型，那么我们毫无限制的查看响应中的任何内容

• 如果请求和资源是不同源的，并且返回一个CORs header的头部，那么请求是cors类型。basic和cors响应基本相同。但是cors会限制你查看header中“Cache-Control”，“Content-Language”，“Content-Type”，“Expires”，“Last-Modified”和`Pragma`的属性。

• 如果请求和资源是不同源的，并且不返回一个CORs header头部，那么请求是opaque类型。opaque类型的响应，我们不能过读取任何的返回值或者查看请求状态，这意味着我们无法只知道请求是成功还是失败。

你可以定fetch请求的模式，以便于解析一些模式，如下：

same-origin–同源请求才能成功，其他请求都会被拒绝

cors允许请求同源和其带有合适的CORs头部的其他源

cors-with-forced-preflight–发送真实的请求之前，需要一个预检验

no-cors–旨在向没有CORS header的其他源发出请求并产生不透明opaque的响应，但如上所述，目前在窗口全局范围内这是不可能的。

要定义模式，请在fetch请求中添加选项对象作为第二个参数，并在该对象中定义模式：

fetch('./test.json',{mode:'cors'})   .then(function(response) {     console.log(response);     return response.json();   })   .then(function(data) {     console.log(data);   }).catch(function(e) {     console.log("Oops, error"); });

fetch基于Promise的调用链

Promise的一个重要特征是链式调用。 对于fetch，这允许你通过fetch请求共享逻辑

fetch('./test.json')   .then((response)=>{     if(response.status>=200||response.status<300){       return Promise.resolve(response);     }     else {       return Promise.reject(new Error(response.statusText))     }   })   .then((response)=>response.json())   .then((data)=>{     console.log("Response successful json data",data);   })   .catch((e)=>{     console.log("Oops, error",e); });

首先定义关于status的方法去检验请求是否成功，并且返回Promise.resolve(response)和Promise.reject(response)来处理下一步的逻辑。

这样做的好处在于能够使得代码更好的维护，可读和测试

Post 请求

对于一个web应用，需要通过POST请求和在请求体中添加一些参数去请求API并不罕见

fetch(url, {     method: 'post',     headers: {       "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"     },     body: 'foo=bar'   })   .then(json)   .then(function (data) {     console.log('Response successful json data', data);   })   .catch(function (error) {     console.log('"Oops, error', error);   });

关于取消fetch()请求-abort/timeOut

目前没有方法去取消fetch请求，但是可以设置一个timeout选项https://github.com/whatwg/fetch/issues/20

首先实现一个abort功能，fetch返回的是一个promise对象，那么需要在abort后达到出入reject Promise的目的

var abort_fn = null; var abort_promise = new Promise((resolve,reject)=>{   abort_fn=()=>{     reject("abort promise")   } })

可以通过调用abort_fn来触发abort_promise的reject

fetch返回的promise，称为fetch_promise，那么现在有两个promise：abort_promise和 fetch_promise

由于每个promise都有reject和resolve回调绑定到哪个promise上呢？

可以采样Promise.race方法

Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.race([p1, p2, p3]); //上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

基于Promise.race的特点，实现方案如下

const p = Promise.race([ fetch_promise， abort_promise ]); p .then(console.log) .catch(console.error);

实现代码

_fetch=(fetch_promise,timeout)=>{    var abort_fn = null;   var abort_promise = new Promise((resolve,reject)=>{     abort_fn=()=>{       reject("abort promise")     }   })    //在这里使用Promise.race   var p = Promise.race([     abort_promise,     fetch_promise   ])      setTimeout(()=>{     abort_fn();   },timeout)      return p; } _fetch(fetch('./test.json'),5000)   .then((res)=>{     console.log(res)   },(err)=>{     console.log(err)   })

fetch PK Ajax

fetch规范和Ajax主要有两个方式的不同：

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。

• 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。fetch(url, {credentials: 'include'})

omit: 从不发送cookies.

same-origin: 只有当URL与响应脚本同源才发送 cookies、 HTTP Basic authentication 等验证信息.

include: 不论是不是跨域的请求,总是发送请求资源域在本地的 cookies、 HTTP Basic authentication 等验证信息.

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问AJAX视频教程！

相关推荐：

php公益培训视频教程

AJAX在线手册