fetch 认识 Fetch API

英文:Flavio翻译:大众翻译/亚交

https://zcfy.cc/article/understanding-the-fetch-api

介绍 Fetch API

自从IE5在1998年发布以来，浏览器中的异步网络请求一直是通过(XHR)进行的。

在随后的几年里，Gmail等应用广泛使用了这种方法，使得这种方法逐渐流行起来，并给它起了个名字:AJAX。

直接使用总是很痛苦的，很多库都封装了这个方法。尤其是，jQuery封装了以下方法:

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

这些方法在内部做了大量的兼容性处理，所以这些方法在旧的浏览器中仍然可以正常工作。

Fetch API已经被用作现代浏览器中异步网络请求的标准方法，它使用Promise作为基本的构造元素。

主流浏览器除了IE都很支持Fetch。

GitHub出版了poly ill https://github.com/github/fetch,，这样fetch可以用于任何浏览。

使用提取

在获取请求中使用获取非常简单，如下所示:

提取('/file.json ')

上面的代码表明fetch创建了一个HTTP请求来请求这个域下的file.json资源。

如您所见，fetch函数可以在全局窗口范围内使用。

现在，让我们做一些更有用的事情，看看请求文件的内容:

fetch('。/file.json ')

。然后(响应= >;response.json())

。然后(数据= >;console.log(数据))

Fetch()返回一个承诺。然后我们使用Then()方法编写一个处理函数来处理promise中的异步返回结果。

处理程序接收获取承诺的返回值，这是一个响应对象。

我们将在下一节看到这个对象的细节。

捕捉错误

由于fetch()返回一个承诺，我们可以使用catch of promise来拦截执行这个请求时的任何错误，并在之后调用回调函数。

fetch('。/file.json ')

。然后(响应= >;{

// ...

})

。catch(err = & gt；console.error(err))

响应对象

通过调用fetch()返回的响应对象包含有关此网络请求的所有请求和响应信息。

元数据标题

可以通过访问响应对象的headers属性来访问HTTP请求的标头信息，如下所示:

fetch('。/file.json ')。然后(响应= >;{

控制台.日志(响应.标题.获取('内容类型'))

console . log(response . headers . get(' Date '))

})

地位

该属性是一个整数，表示HTTP响应状态。

101, 204, 205, 或 304 代表没有响应体的状态200 到 299 代表请求成功的状态301, 302, 303, 307, 或 308 代表重定向的状态

fetch('。/file.json ')。然后(响应= >;console.log(response.status))

statusText

statusText属性指示响应状态信息。如果请求成功，则其值为“确定”。

fetch('。/file.json ')。然后(响应= >;console . log(response . statustext))

url

Url表示我们请求的资源的完整路径URL。

fetch('。/file.json ')。然后(响应= >;console.log(response.url))

响应体

响应将有一个响应体，它可以通过text()或json()方法获得，后者将返回一个promise对象。

fetch('。/file.json ')

。然后(响应= >;response.text())

。然后(body = >;console.log(body))

fetch('。/file.json ')

。然后(响应= >;response.json())

。然后(body = >;console.log(body))

ES2017异步功能可用于相同的功能:

；(async()= >;{

constresponse = awaitfetch('。/file.json ')

constdata =awaitresponse.json()

console.log(数据)

})()

请求对象

请求对象表示对资源的请求，通常通过新的请求()应用编程接口创建。

例如:

常量请求=新请求('/api/todos ')

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

method: 请求方法 (GET, POST, 等)url: 请求的URLheaders: 请求的头部信息对象referrer: 请求的网站来路cache: 请求的缓存模式(例如：default, reload, no-cache).

并提供了一些方法，比如json()，text()和formData()来处理请求体。

所有宣传短片均可观看https://developer.mozilla.org/docs/Web/API/Request

请求标题

设置请求头是一个基本功能，提取允许我们通过头对象来操作请求头:

constheaders =newHeaders()

标头。追加('内容类型'，'应用程序/json ')

或者更简单地说，可以是这样的:

constheaders =newHeaders({

内容类型:“”应用程序/json

})

要向请求添加头，我们使用请求对象，并将其添加到fetch()函数的参数中，而不是传递网址参数。

而不是下面的代码:

fetch('。/file.json ')

我们这样做

constrequest = newRequest('。/file.json '，{

标题:新标题({

内容类型:“”应用程序/json

})

})

提取(请求)

Headers对象没有限制设置值，我们也可以查询它:

标题。有('内容类型')

标题.获取('内容类型')

我们可以删除之前设置的标题:

标题。删除(' X-我的-自定义-标题')

POST请求

Fetch还可以使用其他HTTP方法，如POST、PUT、DELETE或OPTIONS。

在方法属性中指定请求的方法，并且可以在请求头和请求正文中添加附加参数:

这是一个开机自检请求的示例:

constoptions ={

方法:“post”，

标题:{

content-type ':' application/x-www-form-URL encoded；字符集=UTF-8 '

},

body:' foo = bar & amp；测试=1 '

}

提取(url，选项)。catch(err = & gt；{

控制台错误('请求失败'，错误)

})

Fetch 弊端

虽然fetch相对于XHR有很大的改进，特别是它在服务工作器中的集成，但是Fetch没有办法中止请求。并且上传进度不能用Fetch来监控。

如果您的应用程序中需要这些功能，Axios库可以是一个很好的选择。

如何取消提取请求

在获取的最初几年，没有办法取消已经发送的请求。

现在我们可以做到这一点。由于异常中止控制器和异常中止信号，这是一个通知异常中止事件的通用应用编程接口。

您可以通过添加一个信号参数来集成这些应用编程接口:

const controller = NewBortcontroller()

constsignal =控制器. signal

fetch('。/file.json '，{signal })

您可以在发出请求五秒钟后设置超时来取消请求:

setTimeout(() = >;controller.abort()，5 * 1000)

方便的是，如果fetch已经返回，调用abort()函数不会导致错误。

当取消信号发生时，fetch将抛出一个DOMException，该异常的名称属性值为“AbortError”，可以在catch of promise中捕获:

fetch('。/file.json '，{signal })

。然后(响应= >;response.text())

。然后(text = >;console.log(文本))

。catch(err = & gt；{

if(err . name = = ' Abroterror '){

控制台.错误(“提取中止”)

}else{

控制台。错误('另一个错误，错误)

}

})