提取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引入后,打开后便无法中止请求。

现在,由于引入了AbortControllerAbortSignal,用于通知的通用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初学者手册


更多浏览器教程: