GlobalFetch.fetch()

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

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

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

fetch() 方法由 Content Security Policy 的 connect-src 指令控制，而不是它请求的资源。

注意:fetch() 方法的参数与 Request() 构造器是一样的。

语法

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 Request 示例 (参见 Fetch Request live) 中，我们使用对应的构造器创建了一个新的 Request 对象，然后调用 fetch() 方法获取资源。因为我们是在请求一个图片，为了解析正常，我们对响应执行 Body.blob 来设置相应的 MIME 类型。然后创建一个 Object URL，并在 <img> 元素中把它显示出来。

var myImage = document.querySelector('img');

var myRequest = new Request('flowers.jpg');

fetch(myRequest).then(function(response) {
  return response.blob();
}).then(function(response) {
  var objectURL = URL.createObjectURL(response);
  myImage.src = objectURL;
});

在 Fetch with init then Request 示例 (参见 Fetch Request init live) 中，我们做同样的操作，除了在调用 fetch() 时传入一个 init 对象：

var myImage = document.querySelector('img');

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg');

fetch(myRequest,myInit).then(function(response) {
  ... 
});

你也可以传入同样的 init 对象到 Request 构造器，来实现同样的效果，如：

var myRequest = new Request('flowers.jpg',myInit);

规范

浏览器兼容性

[1] This API is implemented behind a preference.

相关链接

• ServiceWorker API
• HTTP access control (CORS)
• HTTP