在前端开发中，处理 Ajax 请求是非常常见的任务。早期的处理方式是使用回调函数来处理异步请求，在处理多个请求的情况下，容易出现回调嵌套过多的情况，代码可读性和可维护性较差。ES7 引入了 async/await 关键字，可以更直观、简洁地处理异步请求，极大地提升了开发效率。
async/await 关键字
async/await 关键字是ES7中处理异步编程的一种解决方案。使用 async 关键字来声明一个异步函数，并在函数体中使用 await 关键字来等待 Promise 对象的解决。被 await 关键字等待的 Promise 对象的状态变为 resolve 时，就会继续执行下一步。而在 Promise 对象的状态变为 rejected 时，就会抛出异常并被 try/catch 块捕获。
async function foo(){
const result = await Promise.resolve("Hello World");
console.log(result);
}
foo(); //输出Hello World使用 async/await 处理 Ajax 请求
我们可以利用 async/await 关键字来处理 Ajax 请求。在这里，我们使用 fetch 函数来发起请求，fetch 函数返回的是一个 Promise 对象。
async function getData(){
const response = await fetch('/data.json');
const data = await response.json();
console.log(data);
}在上述代码中，我们声明了一个 async 函数 getData，然后使用 fetch 函数去获取数据。在使用 await 关键字等待 fetch 函数返回的 Promise 对象后，我们解析返回的数据并输出。
我们还可以在异步函数中使用 try/catch 语句处理 Promise 的异常情况，代码如下所示：
-- -------------------- ---- -------
----- -------- ----------
--- -
----- -------- - ----- --------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
-在上述代码中，我们使用 try/catch 语句来处理 Promise 对象的异常情况。如果 Promise 对象的状态变为 rejected，就会抛出异常并被 catch 块捕获。
示例代码
下面是一个完整的示例代码，用于演示如何使用 async/await 关键字来处理 Ajax 请求：
-- -------------------- ---- -------
----- -------- ----------
--- -
----- -------- - ----- --------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
-
---------------------
----------总结
使用 ES7 的 async/await 关键字可以更直观、简洁地处理异步请求，在处理多个请求的情况下，代码可读性和可维护性更好。我们可以结合 try/catch 语句来处理 Promise 对象的异常情况，提高代码的健壮性。通过本文的学习，我们可以更好地掌握如何使用 async/await 关键字来处理 Ajax 请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645af378968c7c53b0d4f65a