前言
作为前端开发人员，我们经常需要从后端服务器获取数据，并将其展示在前端页面上。为了实现这一点，JavaScript 提供了许多 API，如 XMLHttpRequest，但是这些 API 不利于操作和维护。自从 fetch API 出现后，它已成为许多前端开发人员的首选。
fetch API 提供了一个简单的方式来获取和处理数据，并且具有许多优点，例如：
- 使用了 Promise，更加方便和简单的异步模式。
- 通过 Response 对象处理响应，提供了更多的灵活性和可控性。
- 更加干净和直观的 API，使得代码更加易于维护和重构。
在 ECMAScript 2020 中，fetch API 获得了增强。在这篇文章中，我们将详细讨论这些增强，并且提供解决跨域问题的方案。
fetch API 基本使用
fetch 是全局函数，我们可以直接调用它，例如：
fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
fetch 函数接受一个 URL 字符串作为参数，并返回一个 Promise 对象。当 Promise 被解决时，它将返回一个 Response 对象。可以使用 Response 对象提供的多个方法来处理响应。例如，response.json() 方法可以将响应解析为一个 JSON 对象。
fetch API 的增强
在 ECMAScript 2020 中，fetch API 获得了以下增强：
1. 新增 Headers 类
在 fetch API 中，我们可以使用 Headers 类定制 HTTP 请求头。在 ECMAScript 2020 中，新增了 Headers 类中的一些方法，例如：
- Headers.prototype.entries()
- Headers.prototype.keys()
- Headers.prototype.values()
这些方法将 Headers 对象转换为可迭代的对象，方便开发人员使用 for...of 循环进行遍历。
2. 新增 Response 类的一些方法
在 ECMAScript 2020 中，Response 类新增了两个方法：Response.prototype.trailer 和 Response.prototype.formData。
- Response.prototype.trailer 方法用于检索底部响应的 trailer。
- Response.prototype.formData 方法用于将响应解析为 FormData 对象。
这两个方法提供了更多的灵活性和可控性，可以使开发人员更加轻松地处理响应。
3. 使用 try-with-resources 语句
try-with-resources 语句是 Java 中的一种语法结构，用于自动关闭资源。在 ECMAScript 2020 中，我们可以使用 try-with-resources 语句来自动关闭任何类型的资源，例如文件、数据库连接和 HTTP 请求等。例如：
try {
const response = await fetch(url);
// 处理响应
} catch (error) {
console.error(error);
} finally {
// 关闭连接
}这样，当 try 区域结束时，无论是否发生了错误，都将自动关闭连接。
解决跨域问题
使用 fetch API 可能会遇到跨域问题，解决这个问题有很多种方法，其中一种是使用 CORS（跨源资源共享）策略。使用 CORS 策略可以在前端代码中控制跨域请求。为了让跨域请求得到控制，浏览器需要了解远程服务器的 CORS 策略。
首先，在后端服务器的响应头中添加 Access-Control-Allow-Origin 属性，以允许指定的域名进行跨域访问。例如：
Access-Control-Allow-Origin: http://localhost:3000
这样，任何来自 http://localhost:3000 网站的请求都将被允许。
其次，在前端代码中，我们可以使用 mode 属性来指定请求的模式，例如：
- cors：使用浏览器的 CORS 机制来请求。
- no-cors：不使用 CORS 机制，通常用于发送一些简单的 GET / POST 请求。
- same-origin：只发起同源请求。
例如：
-- -------------------- ---- -------
---------- -
----- -------
-------- -
--------------- ------------------
--
----- ----------------
---- -----
--
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------在 fetch 请求中，我们可以通过 mode 属性来设置请求的模式。如果需要发送跨域请求，将 mode 属性设置为 cors。还可以设置 headers 和 body，这将传递到远程服务器的请求体和请求头。
总结
fetch API 是现代前端开发中用于获取数据的一种最佳实践。ECMAScript 2020 在 fetch API 上进行了一些增强，例如 Headers 类的扩展、Response 类的方法新增和 try-with-resources 语句等。解决跨域问题是前端开发人员最常遇到的问题之一，我们可以使用 CORS 策略来控制跨域请求。
希望本文可以为你提供有用的指导和启发，如果你有任何问题或建议，请在下面的评论中留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e5a1e48841e9894ae0675
