简介
fetch 是一个专门用于浏览器端的 HTTP 请求 API。它基于 Promise 设计，并提供了一些高级特性，例如请求取消、请求超时和跨域支持等。fetch API 旨在取代 XMLHttpRequest （XHR）。
安装
fetch API 已经内置到现代浏览器中，如果需要支持老版本浏览器，则需要使用 fetch 的 polyfill 库。常见的 polyfill 库有 whatwg-fetch 和 fetch-ie8。在 Node.js 中使用 fetch 则需要安装 node-fetch 模块：
--- ------- ----------
基本用法
使用 fetch 发送 GET 请求的代码如下：
---------- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
这里的 url 是需要请求的地址。fetch 函数返回一个 Promise 对象，可以通过 .then() 方法处理响应数据，或者通过 .catch() 方法捕获异常。
如果需要发送 POST 请求，则需要传递第二个参数：
---------- -
------- -------
-------- -
--------------- ------------------
--
----- --------------------
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------这里的 data 是需要发送的数据对象，需要先使用 JSON.stringify() 方法将其转换为 JSON 字符串。在请求头中需要设置 Content-Type 为 'application/json'。
高级特性
请求取消
使用 AbortController 可以取消一个正在进行的请求：
----- ---------- - --- ------------------ ---------- - ------- ----------------- -- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ---------------------- -- ---- -------------------
这里的 signal 参数是一个 AbortSignal 对象，用于与 AbortController 相关联。调用 abort() 方法即可取消请求。
请求超时
使用 AbortController 和 setTimeout 可以实现请求超时：
----- ---------- - --- ------------------ ----- --------- - ------------- -- - ------------------- -- ------ ---------- - ------- ----------------- -- -------------- -- ---------------- ---------- -- ------------------ ------------ -- --------------------- ----------- -- -------------------------
这里的 setTimeout 函数用于设置超时时间，超过指定时间后会自动取消请求。需要注意的是，finally() 方法会在 Promise 完成后调用，无论成功还是失败。
跨域支持
在浏览器端使用 fetch 发送跨域请求时，默认情况下会受到同源策略的限制。可以通过以下方式解决跨域问题：
- 在服务端设置 CORS（跨域资源共享）头信息。
- 使用 JSONP（JSON with Padding）技术。
- 使用代理服务器。
总结
fetch API 是一个非常强大的 HTTP 请求工具，不仅支持基本的 GET 和 POST 请求，还提供了许多高级特性，例如请求取消、请求超时和跨域支持等。使用 fetch 可以让前端开发更加便捷、高效。
示例代码：fetch-demo
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32281