fetch 资源请求

简介：fetch() 方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。

为了更好的体验，可点击这里阅读

XMLHttpRequest的痛

我们使用ajax久矣，最熟悉的莫过于经过jQuery封装的ajax对象，因为简单好用。
经过封装打扮的ajax固然漂亮，可是我们都明白底层是怎么回事。对于主流浏览器是 XMLHttpRequest，对于低版本IE是 ActiveXObject
所以，对于传统ajax使用，我们首先得统一 请求对象：

function ajaxFunction()
 {
 var xmlHttp;
 
 try
    {
   // Firefox, Opera 8.0+, Safari
    return xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {

  // Internet Explorer
   try
      {
      return xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {

      try
         {
         return xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的浏览器不支持AJAX！");
         return false;
         }
      }
    }
 }

然后使用依然隐隐作痛：

var xhr = ajaxFunction();
var url = "http://xxxx.xxx/api/xxxx"
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

诚如是，XMLHttpRequest 的设计确实有点粗糙难用，配置和调用方式非常混乱，而且异步回调，没有Promise对象的模式。

fetch简介

官方解释：

• fetch() 方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。

• Window 和 WorkerGlobalScope 都实现了 GlobalFetch — 这意味着基本在任何场景下只要你想获取资源，都可以使用 fetch() 方法。

• 当遇到网络错误时，fetch() 返回的 promise 会被 reject，并传回 TypeError，虽然这也可能因为权限或其它问题导致。成功的 fetch() 检查不仅要包括 promise 被 resolve，还要包括 Response.ok 属性为 true。HTTP 404 状态并不被认为是网络错误。

语法：

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

参数

• input
  定义要获取的资源。这可能是：
  • 一个 USVString 字符串，包含要获取资源的 URL。
  • 一个 Request 对象。
• init 可选
  一个配置项对象，包括所有对请求的设置。可选的参数有：
  • method: 请求使用的方法，如 GET、POST。
  • headers: 请求的头信息，形式为 Headers 对象或 ByteString。
  • body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams * 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
  • mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
  • credentials: 请求的 credentials，如 omit、same-origin 或者 include。
  • cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.
• 返回值
  一个 Promise，resolve 时回传 Response 对象。

兼容性：

 

fetch基本使用

var url = "xxxxxx";
fetch(url).then(function(response) {
    console.log(response)
    if (response.status !== 200) {
        console.log("request " + url + "error! status: " + response.status);
        return;
    }
    return response.json();
}).then(function(data) {
    console.log(data);
}).catch(function(e) {
    console.log("error");
});

如果你有做测试的话，可以看到 console.log(response) 打印出的信息，包含请求状态，请求头，请求体等等。
另外调用 response.json()方法返回依然是一个 Promise对象，所以，可以如下使用:

response.json().then(function (data){
      // do something
})

另外还有 第一个参数是 Request对象的使用方法，这里不做阐述。

参考资料

fetch mdn