fetch()方法

WindowOrWorkerGlobalScope mixin 的 fetch() 方法启动从网络获取资源的过程。这将返回一个 promise，它解析为表示对请求的响应的 Response 对象。

WorkerOrGlobalScope 由 Window 和 WorkerGlobalScope 实现的，这意味着该 fetch() 方法是在几乎可以在其中获取资源的任何上下文中都可用。

当遇到网络错误时。一个 fetch() 承诺拒绝使用 TypeError，虽然这通常意味着权限问题或类似的情况。准确检查成功的 fetch() 将包括检查 promise 是否解决，然后检查该 Response.ok 属性的值为 true。HTTP 状态为404并不构成网络错误。

该fetch()方法由内容安全策略的 connect-src 指令控制略，而不是它的检索资源的指令。

注意：该 fetch() 方法的参数与 Request() 构造函数的参数相同。

fetch()方法语法

Promise <Response> fetch（input [，init]）;

fetch()方法参数

input

这定义了您想要获取的资源。这可以是：

• 一个USVString，它包含要获取资源的直接 URL，一些浏览器接受blob:和data:作为方案。
• 一个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：请求凭据要使用的要求：omit，same-origin或include。要为当前域自动发送Cookie，必须提供此选项。从Chrome 50开始，此属性还需要一个FederatedCredential实例或一个PasswordCredential实例。
• cache：您要使用该请求的缓存模式default，no-store，reload，no-cache，force-cache或only-if-cached。
• redirect：要使用的重定向模式:follow（自动跟随重定向），error（如果发生重定向时发生错误则中止）或manual（手动重定向处理）。在Chrome中默认是follow （在Chrome 47之前默认manual）。
• referrer：USVString指定no-referrer，  client或URL。默认是client。
• referrerPolicy：指定引用者HTTP头的值。可以是一个no-referrer，no-referrer-when-downgrade，origin，origin-when-cross-origin，unsafe-url。
• integrity：包含请求的子资源完整性值（例如，sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。
• keepalive：该keepalive选项可用于允许请求超出页面。使用该keepalive标志提取是Navigator.sendBeacon()API 的替代品。 
• signal：一个AbortSignal对象实例；允许您与获取请求进行通信，并在需要时通过AbortController。

fetch()方法返回值

fetch()方法返回一个 Promise，它解析为一个 Response 对象。

fetch()方法异常

fetch()方法示例

在我们的 Fetch Request 示例中，我们使用相关的构造函数创建一个新 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;
});

在我们用 init 和 Request 获取请求示例之后，我们做了同样的事情，只不过我们在调用 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);

也可以在 init 中使用对象文本作为 headers：

var myInit = { method: 'GET',
               headers: {
                   'Content-Type': 'image/jpeg'
               },
               mode: 'cors',
               cache: 'default' };

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

规范

浏览器兼容性

我们正在将兼容性数据转换为机器可读的JSON格式。

• 电脑端

• 移动端

注释：

[1] API 是在首选项后面实现的。

[2] fetch() 现在在 WindowOrWorkerGlobalScope mixin 上定义。