在现代 Web 开发中，异步加载数据和资源是必不可少的。而在 JavaScript 中，我们通常使用 XMLHttpRequest 或者 jQuery 中的 ajax 方法来实现异步请求。但是，这些方法都不是 ES6 标准中的一部分，因此，它们可能不是最佳方法，有时甚至会出现一些问题。
ECMAScript 2021 引入了全新的 fetch 函数，它是一种更现代的方式来进行网络请求，不仅使用更加简洁，而且更加灵活。
fetch 函数
fetch 是一个 global 对象，可以通过全局作用域直接访问。它可以接收一个或者多个参数，其中第一个参数为请求的 URL，第二个参数为一个配置对象，用于指定请求的类型、响应类型和其他详细信息。fetch 函数返回一个 Promise 对象，这个对象将返回一个代表了响应的 Response 对象。
---------- -
------- ------ -- ----
-------- - -- ---
--------------- ------------------
--
----- ---------------------- -------- -- ---
--
-------------- -- ---------------- -- ----
---------- -- ------------------ -- ----
------------ -- --------------------- - - -------
我们可以看到，fetch 函数非常简单直接，并且支持 Promise，这为我们在 JavaScript 中处理异步数据提供了很多帮助。
fetch 配置
fetch 的第二个参数是一个配置对象，它有很多可选属性用于自定义请求的行为。
Method
method 用于指定请求的 HTTP 方法，例如 GET、POST、PUT 或者 DELETE。默认值为 GET。
Headers
headers 属性是一个对象，包含了请求头的键值对。例如，可以指定 Content-Type、Accept 或者 Authorization。
Body
body 属性表示请求的体。如果需要发送任何数据（如 JSON、FormData、Blob 或 string），可以将该数据存储在 body 中。这个数据将在请求中被发送，具体如何发送，取决于传入 body 的数据类型和 Header 中的 Content-Type 属性。如果你要发送 JSON 数据，在 header 中应配置Content-Type 为 'application/json'。
CORS 和认证
fetch API 支持跨域资源共享（CORS）。如果你从其它站点获取资源，必须设置 CORS 响应头 Access-Control-Allow-Origin。通过设置 credentials 属性为 include，即可在跨域请求中携带 cookies 或授权凭证。
-------------------------------------------- ------------- ----------- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ---------------------
拓展用法
fetch 函数除了能够使用基础的配置，还可以基于其它现代 Web API 来实现更丰富的功能，例如使用 AbortController 来控制请求取消或超时，使用 URLSearchParams 构造请求参数等等。
----- ---------- - --- ----------------- ----- ------ - ----------------- ------------------------------------------ ----------------- -- ------- ----- ----- - ------ -- -------------- -- ---------------- -------- -- -------------------- -------- ----------- -- ------------------- -
总结
fetch 函数是一个非常实用的 Web API，它比传统的 XMLHttpRequest 更加现代化，更加灵活和方便。通过详细了解它的用法和配置，我们可以在 JavaScript 中更加便捷地进行数据交互和资源加载。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646eeba8968c7c53b0d4df4e