在现代前端开发中，异步请求已经成为了必备的技术手段。而 fetch API 是一种常用的浏览器原生异步请求方法，它在 ECMAScript 2021 中得到了加强和扩展，成为了更加强大的异步请求工具。本文将详细介绍如何在 ECMAScript 2021 中，使用 fetch API 进行异步请求。
Fetch API 概述
fetch 是一种浏览器原生的异步请求方法，用于发送网络请求并获取响应数据。它是基于 Promise 的 API，包含了多种请求和响应的参数和方法，能够满足不同场景的异步请求需求。
在具体使用上，我们可以使用 fetch 函数来发送请求，然后使用链式方法 .then() 处理响应的数据。例如：
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))上述代码使用 fetch 请求了一个数据接口，然后使用 .then() 方法处理响应数据并输出到控制台。当然，我们也可以使用 .catch() 方法处理请求错误的情况。
Fetch API 的新特性
在 ECMAScript 2021 中，fetch API 得到了两项重要的扩展和加强。
abort() 方法
在之前的版本中，fetch 请求无法中途取消，这使得一些场景下的网络请求管理变得困难。在 ECMAScript 2021 中，fetch API 新增了一个 abort() 方法，用于中途取消请求。例如：
-- -------------------- ---- ------- ----- ---------- - --- ------------------ ----------------------------------------------------- - ------- ----------------- ---------------- -- ---------------- ---------- -- ------------------ ------------ -- ---------------------- -- ------ -------------------
上述代码中，我们使用 AbortController 创建了一个控制器，然后将其作为请求配置项的 signal 属性传递给 fetch 函数。当需要取消请求时，我们直接调用控制器的 abort() 方法即可。
原生支持URL参数序列化
在早期版本的 fetch API 中，需要额外导入第三方库进行 URL 参数的序列化。而在 ECMAScript 2021 中，fetch API 原生支持 URL 参数序列化，方便了参数的传递和处理。
例如，我们需要向后端发送一些参数：
const params = new URLSearchParams();
params.set('id', 123);
params.set('name', 'John Doe');然后，我们可以将其作为请求地址的搜索参数，直接传递给 fetch 函数：
fetch(`https://jsonplaceholder.typicode.com/todos?${params.toString()}`)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));在上述示例中，我们将参数序列化为 URLSearchParams 对象，然后将其转换为字符串并与请求地址拼接。在 fetch 函数中，我们直接传递该地址即可发送带有参数的网络请求。
总结
fetch API 是一种在现代前端开发中经常使用的网络请求方法。在 ECMAScript 2021 中，该 API 得到了扩展和加强，提供了更好的异步请求解决方案。本文介绍了 fetch API 的概述和两项新特性，并提供了详细的示例代码。希望读者在开发中能够熟练地使用 fetch API，提高异步请求效率和开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65017ff395b1f8cacdf3593e