Javascript 中 Async/Await 的简单解释
这篇文章最初发表在lindaojo.com网站上。
要充分理解 Async-Await 的用法，首先必须明白 JavaScript 默认情况下是同步的。
同步函数
在同步函数中，操作同时运行，不能指定暂停点或等待点。
例子
function solveC() {
const A = 1;
const B = 2;
const C = A + B;
console.log(C);
}
solveC(); // 3
但如果由于某种原因获取值“B”出现延迟，JavaScript 将会执行其他未被延迟的代码行。这可能会导致意想不到的结果。
在下面的示例中，我们使用 Promise 延迟了值“B”。让我们来看看结果会是什么。
function solveC() {
const getB = () => {
const executor = (resolve, _reject) => {
setTimeout(() => resolve(2), 100);
};
return new Promise(executor);
}
const A = 1;
const B = getB();
const C = A + B;
console.log(C);
}
solveC(); // "1[object Promise]"
JavaScript 会在上述 Promise 实现之前记录结果；
即使 B 延迟执行，我们该如何获得正确的结果？如何让 JavaScript暂停并等待B 执行完毕？
答案是我们要让函数异步运行。这就是“async/await”的作用所在。
注意：编写异步代码还有其他方法。您可以使用回调函数和Promise。
使用 Async/await 的异步函数
要使函数异步执行，我们使用关键字“async”声明该函数。
函数名前的“async”表示该函数始终返回一个Promise 对象。
下面这个异步函数……
async function One() {
return 1;
}
这与下面返回 Promise 的普通函数相同。
function One() {
return Promise.resolve(1);
}
我们可以使用 `await` 关键字让 JavaScript 等待 Promise 完成。需要注意的是，它只会让异步函数块等待，而不会让整个程序执行完毕。
下面的代码块展示了我们如何使用 async-await 解决之前的问题。
async function solveC() {
const getB = () => {
const executor = (resolve, _reject) => {
setTimeout(() => resolve(2), 100);
};
return new Promise(executor);
}
const A = 1;
const B = await getB(); //waits for promise to be resolved
const C = A + B;
console.log(C);
}
solveC(); // 3
注意：`await` 关键字只能在 `async` 函数中使用。
就是这样！希望这篇文章对你有帮助，因为我尽量用浅显易懂的方式讲解，适合初学者。如果你想阅读更深入的 async/await 讲解，我推荐Ashay Mandwarya 的这篇文章。
更新：做了一些更正，感谢@peerreynders。
文章来源：https://dev.to/lindaojo/simple-explanation-of-async-await-in-javascript-199p