你不需要jQuery(三) 新AJAX方法fetch()

XMLHttpRequest来完成ajax有些老而过时了。

fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能。它们之间的主要区别是，Fetch API 使用了 Promises，它让接口更简单、简洁，避免了回调的复杂性，省去了使用复杂的 XMLHttpRequest API。

如果你之前未使用过Promises，你应该先看看《JavaScript Promises 用法》这篇文章。

一、基本Fetch用法

让我们先用一个例子来比较一下使用 XMLHttpRequest 和使用 fetch 之间的不同。我们要请求一个URL，获取JSON格式的返回结果。

XMLHttpRequest
一个 XMLHttpRequest 请求需要两个监听器来捕捉 success 和 error 两种情形，而且需要调用 open() 和 send() 方法。

function reqListener() {  var data = JSON.parse(this.responseText);  console.log(data); }function reqError(err) {  console.log('Fetch Error :-S', err); }var oReq = new XMLHttpRequest(); oReq.onload = reqListener; oReq.onerror = reqError; oReq.open('get', './api/some.json', true); oReq.send();

Fetch
我们的 fetch 请求的代码基本上是这样的：

fetch('./api/some.json')  .then(  function(response) {   if (response.status !== 200) {   console.log('Looks like there was a problem. Status Code: ' +    response.status);   return;   }  // Examine the text in the response   response.json().then(function(data) {   console.log(data);   });  }  )  .catch(function(err) {  console.log('Fetch Error :-S', err);  });

我们首先检查请求响应的状态是否是 200，然后才按照 JSON 对象分析响应数据。

fetch()请求获取的内容是一个 Stream 对象。也就是说，当我们调用 json() 方法时，返回的仍是一个 Promise 对象，这是因为对 stream 的读取也是异步的。

返回数据对象的元数据(Metadata)

在上面的例子中，我看到了服务器响应对象Response的基本状态，以及如何转换成JSON。返回的相应对象Response里还有很多的元数据信息，下面是一些：

fetch('users.json').then(function(response) {  console.log(response.headers.get('Content-Type'));  console.log(response.headers.get('Date')); console.log(response.status);  console.log(response.statusText);  console.log(response.type);  console.log(response.url); });

响应的对象Response类型

当我们执行一个fetch请求时，响应的数据的类型response.type可以是“basic”, “cors” 或 “opaque”。这些类型用来说明应该如何对待这些数据和数据的来源。

当请求发起自同一个域时，响应的类型将会是“basic”，这时，对响应内容的使用将没有任何限制。

如果请求来自另外某个域，而且响应的具有CORs头信息，那么，响应的类型将是“cors”。 “cors” 和 “basic” 类型的响应基本是一样的，区别在于，“cors”类型的响应限制你只能看到的头信息包括`Cache-Control`, `Content-Language`, `Content-Type`, `Expires`, `Last-Modified`, 和 `Pragma`。