提取API

了解有关Fetch API的全部信息，Fetch API是使用Promises作为构建块的异步网络请求的现代方法

Fetch API简介

自IE5于1998年发布以来，我们可以选择使用以下命令在浏览器中进行异步网络调用XMLHttpRequest（XHR）。

此后数年，GMail和其他丰富的应用程序大量使用了它，并使该方法如此流行以至于必须要有一个名称：AJAX。

直接使用XMLHttpRequest一直很痛苦，几乎总是被某些库抽象化，特别是jQuery围绕它构建了自己的帮助器函数：

jQuery.ajax()
jQuery.get()
jQuery.post()

等等。

它们对使它更易于访问产生了巨大的影响，尤其是在确保所有功能都可以在较旧的浏览器上正常运行方面。

这提取API，已经标准化为异步网络请求和使用的现代方法承诺作为构建块。

除了IE之外，Fetch在所有主要浏览器上都有很好的支持。

The browser support for the Fetch API

保鲜膜https://github.com/github/fetch被释放的GitHub允许我们使用fetch在任何浏览器上。

使用提取

开始将Fetch用于GET请求非常简单：

fetch('/file.json')

并且您已经在使用它：fetch将发出HTTP请求以获取file.json同一域上的资源。

如您所见，fetch该功能在全球范围内可用window范围。

现在，让它变得更有用，让我们实际看看文件的内容是什么：

fetch('./file.json')
  .then(response => response.json())
  .then(data => console.log(data))

呼唤fetch()返回一个承诺。然后，我们可以通过向处理程序传递一个then()承诺的方法。

该处理程序接收到的返回值fetch答应回复目的。

在下一节中，我们将详细介绍该对象。

捕捉错误

自从fetch()返回承诺，我们可以使用catch许诺拦截请求执行过程中发生的任何错误的方法，以及在then回调：

fetch('./file.json')
.then(response => {
  //...
})
.catch(err => console.error(err))

捕获错误的另一种方法是在第一时间对其进行管理then：

fetch('./file.json')
.then(response => {
  if (!response.ok) { throw Error(response.statusText) }
  return response
})
.then(response => {
  //...
})

响应对象

由a返回的响应对象fetch()呼叫包含有关请求和网络请求响应的所有信息。

元数据

标头

访问headers财产response对象使您能够查看请求返回的HTTP标头：

fetch('./file.json').then(response => {
  console.log(response.headers.get('Content-Type'))
  console.log(response.headers.get('Date'))
})

Request headers for fetch

状态

此属性是代表HTTP响应状态的整数。

101、204、205或304为空身体状态
200到299（含）之间为OK状态（成功）

301、302、303、307或308是重定向

fetch('./file.json').then(response => console.log(response.status))

statusText

statusText是表示响应状态消息的属性。如果请求成功，则状态为OK。

fetch('./file.json').then(response => console.log(response.statusText))

网址

url代表我们提取的属性的完整URL。

fetch('./file.json').then(response => console.log(response.url))

身体内容

响应具有一个正文，可以使用以下几种方法进行访问：

text()以字符串形式返回主体
json()将身体返回为JSON格式解析的对象
blob()将身体返回为斑点目的
formData()将正文作为FormData对象返回
arrayBuffer()返回身体作为ArrayBuffer目的

所有这些方法都返回一个承诺。例子：

fetch('./file.json')
  .then(response => response.text())
  .then(body => console.log(body))

fetch('./file.json')
  .then(response => response.json())
  .then(body => console.log(body))

Get JSON

可以使用ES2017 异步功能：

;(async () => {
  const response = await fetch('./file.json')
  const data = await response.json()
  console.log(data)
})()

请求对象

Request对象代表一个资源请求，通常使用new Request()API。

例子：

const req = new Request('/api/todos')

Request对象提供了几个只读属性来检查资源请求的详细信息，包括

method：请求的方法（GET，POST等）
url：请求的网址。
headers：请求的关联Headers对象
referrer：请求的引荐来源
cache：请求的缓存模式（例如，默认，重新加载，无缓存）。

并公开了几种方法，包括json()，text()和formData()处理请求的主体。

完整的API可以在以下位置找到https://developer.mozilla.org/docs/Web/API/Request

请求标头

能够设置HTTP请求标头至关重要，并且fetch使我们能够使用Headers对象执行此操作：

const headers = new Headers()
headers.append('Content-Type', 'application/json')

或者：

const headers = new Headers({
  'Content-Type': 'application/json'
})

要将标头附加到请求，我们使用Request对象，并将其传递给fetch()而不是传递网址。

代替：

fetch('./file.json')

我们的确是

const request = new Request('./file.json', {
  headers: new Headers({
    'Content-Type': 'application/json'
  })
})
fetch(request)

Headers对象不仅限于设置值，我们还可以查询它：

headers.has('Content-Type')
headers.get('Content-Type')

我们可以删除先前设置的标头：

headers.delete('X-My-Custom-Header')

POST请求

提取还允许在您的请求中使用任何其他HTTP方法：POST，PUT，DELETE或OPTIONS。

在请求的method属性中指定方法，并在标头和请求正文中传递其他参数：

POST请求的示例：

const options = {
  method: 'post',
  headers: {
    'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
  },
  body: 'name=Flavio&test=1'
}
fetch(url, options).catch(err => {
console.error(‘Request failed’, err)
})

如何取消获取请求

几年后fetch引入后，打开后便无法中止请求。

现在，由于引入了AbortController和AbortSignal，用于通知的通用API中止大事记

您可以通过传递信号作为访存参数来集成此API：

const controller = new AbortController()
const signal = controller.signal
fetch(’./file.json’, { signal })

您可以设置一个超时，以在获取请求开始后5秒钟触发中止事件，以将其取消：

setTimeout(() => controller.abort(), 5 * 1000)

方便的是，如果提取操作已经返回，则调用abort()不会导致任何错误。

当发生中止信号时，提取将使用以下命令拒绝承诺DOMException命名AbortError：

fetch('./file.json', { signal })
  .then(response => response.text())
  .then(text => console.log(text))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.error('Fetch aborted')
    } else {
      console.error('Another error', err)
    }
  })

寻找更多？

使用网络很难，对吗？您可能会发现AxiosJavaScript库可能会基于Fetch构建一些附加功能，更适合您的需求。一探究竟！

免费下载我的JavaScript初学者手册