如何在 ES9 中使用 async 与 await 实现 ajax 异步请求
随着前端技术的发展，越来越多的应用程序需要从服务器动态获取数据，而异步请求成为不可或缺的一环。其中，ajax 是一个非常常用的异步请求方式。
在 ES9 中，引入了 async 和 await，这两个语法可以让我们更加方便地进行异步请求。本篇文章将介绍如何使用 async 与 await 实现 ajax 异步请求。
1. ES9 中的异步请求
ES9 引入了 async 和 await，这两个语法可以让我们更加方便地进行异步请求。与之前的 Promise 相比，async 和 await 使代码更加简洁易懂，可以减少回调函数的嵌套，提升代码的可读性。
在 ES9 中，我们可以使用 async 和 await 来发送异步请求，例如：
async function fetchData() {
const response = await fetch('http://example.com/data');
const jsonData = await response.json();
return jsonData;
}上面的代码中，fetchData 函数使用了 async 和 await，通过 fetch 方法发送异步请求，然后等待响应的结果使用 await 去获取数据。返回的是一个 Promise 对象，我们可以像处理普通的 Promise 一样处理。
2. 实现 Ajax 异步请求
在实现 ajax 异步请求之前，我们需要了解 fetch API。
2.1 fetch API
fetch 是 ES6 中新增的 API，用于发送网络请求。 它基于 Promise 实现，可以非常方便地处理异步请求。
fetch API 的基本用法如下：
fetch(url, options) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error))
- url：请求的路径。
- options：可选参数，用于控制请求的相关信息，包括 method、headers、body 等，更多参数请查看 fetch API 文档。
上面的代码中使用了 fetch 方法发送了一个 http 请求，并处理了响应结果。
2.2 实现 Ajax 异步请求
使用 ES9 中的 async 和 await，我们可以很方便地实现 Ajax 异步请求，如下所示：
-- -------------------- ---- -------
----- -------- ------------- -
----- -------- - ----- ------------------ -
------- -------------- -- ------
-------- --------------- -- ---
----- ------------ -- ----
---
----- ---- - ----- ----------------
------ -----
-上面的代码中，我们封装了一个 ajax 函数，通过 fetch 方法发送异步请求，然后等待响应的结果使用 await 去获取数据。
使用该函数可以实现如下调用方法：
-- -------------------- ---- -------
----- -------- ----------- -
----- ------ - ----- ------
---- --------------------------
------- -------
-------- -
--------------- ------------------
--
----- ----------------
----- ----- ----
--
---
--------------------
-3. 总结
async 和 await 语法使异步请求变得更加简单方便，同时也提高了代码的可读性。在实际开发中，我们可以使用这两个语法来发送异步请求，从而实现我们的业务需求。
本文介绍了ES9 中如何使用 async 和 await 来实现 Ajax 异步请求，相信对于前端初学者和进阶者都有一定的借鉴价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6468540c968c7c53b088c70d