在 ES7 中使用 async/await 异步实现原生 AJAX
随着 JavaScript 语言的不断发展，现代前端开发中已经对异步编程有了较为成熟的解决方案，比如 Promise。但是 Promise 依然存在着一些问题，比如会让异步代码的可读性变得极差，如深度嵌套的 Promise 则会形成 “回调地狱”，这使得代码非常难以维护和测试。在 ES7 中，我们出现了一种新的解决方案，即 async/await 关键字，可将异步代码变得更加优雅和可读。
ES7 异步方式主要有 3 种：Promise、Generator 和 async/await。Async/await 是基于 Generator 的实现，并通过协程的方式将异步调用变得可写可读，这也使得代码变得更加简洁易懂。接下来，我们将会探讨如何使用 async/await 进行原生 AJAX 请求。
async/await 的用法
async/await 可以让异步代码看起来就像同步代码，使用它，我们可以简化异步代码的嵌套，并且更加容易管理异步的结果。
async/await 关键字必须在一个异步函数中使用。任何异步函数都可以被定义为一个 async 函数，使用 async 关键字“注释”它，如下所示：
async function asyncFn() {
// async 函数的内容
}async/await 关键字有两个：async 和 await。async 用于将普通函数和 Generator 函数转化为异步函数。而 await 则只能在异步函数内部使用，用于等待某个表达式的值的异步承诺。如果异步操作成功，它会返回一个解决的值，否则，它会抛出一个拒绝的异常。
例如，下面这个函数使用 async/await 实现了延时：
async function delay(delayTime) {
await new Promise(resolve => setTimeout(resolve, delayTime));
}Async 函数返回一个 Promise 对象。这就使得我们可以在这个对象上调用 then() 方法，以及使用 Promise.all() 和 Promise.race() 等标准 Promise API。
使用 async/await 实现 AJAX 请求
在 ES7 中，使用 async/await 实现 AJAX 请求非常简单。我们只需要使用原生的 XMLHTTPRequest 对象发送请求并等待响应即可。
下面是一个使用 async/await 实现 AJAX 请求的示例：
// javascriptcn.com 代码示例
async function fetchUsers() {
try {
const response = await fetch('https://jsonplcaeholder.typicode.com/users');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}首先，我们使用 fetch() 方法获取网站上的 JSON 数据。之后，使用 await 等待 Promise 解决，解决后将响应转换为 JSON 数据。最后，我们将打印出返回的 JSON 数据。
如果请求失败，则将抛出异常并使用 catch() 方法捕获错误。
总结
async/await 关键字可以让异步编程变得更加优雅和可读。它的使用使代码变得更加简洁易懂，而不需要不断嵌套大量的 Promise 对象。在前端开发中，使用 async/await 实现 AJAX 请求非常方便，同时也可以帮助我们更好地管理异步程序的结果。
在使用 async/await 都是管中窥豹，实际代码实现优雅异步并不是一个容易的事情。如果希望深入学习异步编程，可以学习 Generator 更加深了解异步编程的核心原理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654cb4767d4982a6eb61c8c6