Fetch

Promise<Response> fetch(input, init);

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。决定了是否可以跨域访问 cookie
• cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.

使 fetch 完美支持 IE8+ 只需引入下面这些 polyfill：

• 1 由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham
• 2 引入 Promise 的 polyfill: es6-promise
• 3 引入 fetch 探测库：fetch-detector
• 4 引入 fetch 的 polyfill: fetch-ie8
• 可选：如果你还使用了 jsonp，引入 fetch-jsonp
• 5 可选：开启 Babel 的 runtime 模式，现在就使用 async/await

3 个接口—— Headers，Request 和 Response

Request

Response

Response 实例通常在 fetch()的回调中获得。

• status（一个整数默认值是 200）
• statusText（默认值是”OK”）

文末举例

fetch("http://www.example.php", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: "firstName=lyq"
}).then(function(res) {
  if (res.ok) {
    alert("Perfect! Your settings are saved.");
  } else if (res.status == 401) {
    alert("Oops! You are not authorized.");
  }
}, function(e) {
  alert("Error submitting form!");
});

参考教程

• 1、MDN Fetch 教程
• 2、WHATWG Fetch 规范