嗯，还在用Ajax嘛？Fetch了解一下呀

Posted 2023-03-16

参考技术A

「此刻你在沙漠里，因此你要潜心于沙漠之中。沙漠和世上其他东西一样，可以用来理解世界。你甚至不必理解沙漠，只要观察普通的沙粒就行，从中你可以看到天地万物的神奇之处。--------《牧羊少年的人生之旅》」

Fetch API 提供了一个获取资源的接口（包括跨域请求）。任何使用过 XMLHttpRequest 的人都能轻松上手，而且新的 API 提供了更强大和灵活的功能集。

Fetch 提供了对 Request 和 Response , Headers （以及其他与网络请求有关的）对象的通用定义

fetch() 必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 Promise 对象， resolve 对应请求的 Response 。你也可以传一个可选的第二个参数 init 。

一旦 Response 被返回，就可以使用一些方法来定义内容的形式，以及应当如何处理内容,你也可以通过 Request() 和 Response() 的构造函数直接创建请求和响应，但是我们不建议这么做。

Fetch API 提供了一个 javascript 接口，用于访问和操纵 HTTP 管道 的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

fetch 规范与 jQuery.ajax() 主要有以下的不同：

在用法上， fetch() 接受一个 URL 字符串作为参数，默认向该网址发出 GET 请求，返回一个 Promise 对象。

这里我们用 Node 环境来学习，当然在浏览器更有可比性，需要安装基于 Node 的依赖包 node-fetch ，这里一定要注意版本问题

同时我们需要一个 Web 服务用作测试，这里用 python 搭一个简单的 Web 服务

data.json文件

准备工作做好以后，我们开始愉快的学习吧

一个基本的 fetch 请求设置起来很简单。看看下面的代码：

这是一个回调风格的请求，从服务器获取 JSON 数据。在 Node 环境的一个 Demo

fetch() 接收到的 response 是一个 Stream 对象， response.json() 是一个异步操作，取出所有内容，并将其转为 JSON 对象 。

整理上看和 axios 类似，相同点都是基于 ES 6 的 Promise 对象，在 Node 环境，都是基于 HTTP模块 实现，不同点， axios 在浏览器中，是基于 XMLHttpRequests 来实现异步通信的,而 fetch 是一个新的 API ,是 XMLHttpRequest 的最新替代技术 ，下面是一个 axios 的例子.

Promise 可以使用 await 语法改写，使得语义更清晰。

await 语句必须放在 try...catch 里面，这样才能 捕捉异步 操作中可能发生的 错误 .

fetch() 请求成功以后，得到的是一个 Response 对象。它对应服务器的 HTTP 回应 。

Response 包含de同步属性，对应 HTTP 回应的标头信息 （Headers） ，可以 立即读取

response.ok :属性返回一个布尔值，表示请求是否成功，true对应 HTTP 请求的状态码 200 到 299，false对应其他的状态码。

response.status :属性返回一个数字，表示 HTTP 回应的状态码（例如200，表示成功请求）。

response.statusText :属性返回一个字符串，表示 HTTP 回应的状态信息（例如请求成功以后，服务器返回"OK"）。

response.url :属性返回请求的 URL。如果 URL 存在跳转，该属性返回的是最终 URL。

response.type :属性返回请求的类型。可能的值如下：

我们把python的web服务接口里抛出一个异常，直接到了catch里面

执行报错：内部服务器错误，即 500

修改接口返回状态码为 400

报错误请求

也可以直接通过 response.ok 来判断

修改接口返回状态码为 404

Response 对象还有一个 Response.headers 属性，指向一个 Headers 对象，对应 HTTP 回应的所有标头。

Headers 对象可以使用 for...of 循环进行遍历。

Headers 对象提供了以下方法，用来操作标头。HTTP 回应来说，修改标头意义不大

Response 对象根据服务器返回的不同类型的数据，提供了不同的读取方法。 读取方法都是异步的 ，返回的都是 Promise 对象。必须等到 异步 操作结束，才能得到服务器返回的 完整数据`。

「response.text()可以用于获取文本数据，比如HTML文件。」

「response.json() 主要用于获取服务器返回的 JSON 数据」

「response.formData()主要用在 Service Worker 里面，拦截用户提交的表单，修改某些数据以后，再提交给服务器。」

「response.blob()用于获取二进制文件。」

response.arrayBuffer()主要用于获取流媒体文件。

Stream 对象 只能读取一次，读取完就没了。这意味着，前一节的五个读取方法，只能使用一个，否则会报错。

Response 对象提供 Response.clone() 方法，创建 Response对象的副本 ，实现多次读取。

Response 对象还有一个 Response.redirect() 方法，用于将 Response 结果重定向到指定的 URL。该方法一般只用在 Service Worker 里面

Response.body 属性是 Response 对象暴露出的底层接口，返回一个 ReadableStream 对象，供用户操作。

它可以用来分块读取内容，应用之一就是显示下载的进度。

fetch() 的第一个参数是 URL ，还可以接受 第二个参数 ，作为 配置对象 ，定制发出的 HTTP 请求 。

HTTP 请求的方法、标头、数据体都在这个对象里面设置

fetch() 请求发送以后，如果中途想要取消，需要使用 AbortController 对象。

请求进去 睡眠10s ,在 5s 的时候 终止请求 ,新建 AbortController 实例，然后发送 fetch() 请求，配置对象的 signal 属性必须指定接收 AbortController 实例发送的信号 controller.signal 。

controller.abort() 方法用于发出取消信号。这时会触发 abort事件 ，这个事件可以监听，也可以通过 controller.signal.aborted 属性判断取消信号是否已经发出

「Node 环境」

「python 环境」