fetch() 简介

Matt Gaunt

借助 fetch(),您可以发出类似于 XMLHttpRequest (XHR) 的网络请求。主要区别在于,Fetch API 使用 Promise,其 API 更简单,可帮助您避免 XMLHttpRequest API 中复杂的回调。

浏览器支持

  • Chrome:42.
  • Edge:14。
  • Firefox:39.
  • Safari:10.1。

来源

如果您以前从未使用过Promise,请参阅 JavaScript Promise 简介

基本提取请求

下面是一个使用 XMLHttpRequest 实现的示例 然后使用 fetch。我们希望请求某个网址、获取响应,并将其解析为 JSON。

XMLHttpRequest

XMLHttpRequest 需要两个监听器来处理成功和错误情况,以及对 open()send() 的调用。MDN 文档中的示例

function reqListener () {
  const data = JSON.parse(this.responseText);
  console.log(data);
}

function reqError (err) {
  console.log('Fetch Error :-S', err);
}

const oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

提取

我们的提取请求如下所示:

fetch('./api/some.json')
  .then(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(err => {
    console.log('Fetch Error :-S', err);
  });

fetch() 请求只需进行一次调用即可执行与 XHR 相同的工作 示例。为了处理回复,我们首先检查回复状态是否为 200,然后将响应解析为 JSON。对 fetch() 请求的响应是一个 Stream 对象,这意味着在调用 json() 方法后,系统会返回一个 Promise。流是异步发生的。

响应元数据

前面的示例展示了 Response 对象的状态,以及如何将响应解析为 JSON。下面介绍了如何处理您可能需要的其他元数据 例如标头:

fetch('users.json').then(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.type,值为“basic”“cors”或“opaque”。这些 types 显示资源的来源,您可以使用它们来确定如何处理响应对象。

当浏览器请求同一源的资源时,响应会采用 basic 类型,并且会限制您可以从响应中查看的内容。

如果针对另一来源上的资源发出请求,且该来源返回 CORs 标头,则类型为 corscors 响应与 basic 响应类似,但会将您可以查看的标头限制为 Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma

opaque 响应来自不返回 CORS 标头的其他来源。如果响应不透明,我们将无法读取返回的数据或查看请求的状态,这意味着您无法检查请求是否成功。

您可以为提取请求定义模式,以便 解决。您可以设置的模式如下:

  • 只有针对同一来源的资产的请求,same-origin 才会成功; 并拒绝所有其他请求
  • cors 允许在同一来源以及其他来源请求资源, 返回相应的 COR 标头。
  • cors-with-forced-preflight 会执行预检 查看 然后再提出任何请求
  • no-cors 旨在向不含 CORS 标头的其他来源发出请求,并生成 opaque 响应,但正如前所述,目前无法在窗口全局范围内执行此操作。

如需定义模式,请在 fetch 请求中将 options 对象添加为第二个参数,并在该对象中定义模式:

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
  .then(response => response.text())
  .then(text => {
    console.log('Request successful', text);
  })
  .catch(error => {
    log('Request failed', error)
  });

Promise 链

promise 的一大特色是能够将它们链接在一起。对于 fetch(),这样可让您在多个提取请求之间共享逻辑。

如果您使用的是 JSON API,则需要检查状态并解析每个响应的 JSON。您可以通过定义状态和 在返回 promise 的单独函数中进行 JSON 解析,并使用提取 只处理最终数据和错误情况的请求。

function status (response) {
  if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
  } else {
    return Promise.reject(new Error(response.statusText))
  }
}

function json (response) {
  return response.json()
}

fetch('users.json')
  .then(status)
  .then(json)
  .then(data => {
    console.log('Request succeeded with JSON response', data);
  }).catch(error => {
    console.log('Request failed', error);
  });

此示例定义了一个 status 函数,用于检查 response.status 和 它会将已解析的 Promise 作为 Promise.resolve(), 或被拒的 Promise,如下所示: Promise.reject()。 这是 fetch() 链中第一个被调用的方法。

如果 promise 解析完毕,脚本会调用 json() 方法,该方法会从 response.json() 调用返回第二个 promise,并创建一个包含解析的 JSON 的对象。如果解析失败,Promise 将被拒绝,并且 catch 语句会执行。

借助这种结构,您可以在所有提取请求中共享逻辑,从而更轻松地维护、阅读和测试代码。

POST 请求

有时,Web 应用需要使用 POST 方法调用 API,并在请求中包含一些 参数。为此,请在 fetch() 选项中设置 methodbody 参数:

fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
  })
  .then(json)
  .then(data => {
    console.log('Request succeeded with JSON response', data);
  })
  .catch(error => {
    console.log('Request failed', error);
  });

通过提取请求发送凭据

要使用 Cookie 等凭据发出提取请求,请将请求的 将 credentials 值更改为 "include"

fetch(url, {
  credentials: 'include'
})