async和await

前言

在看vue-element-admin-4.2.1时，除了Promise对象处理异步操作外，想起来以前经常看到async和await处理异步，但具体怎么用就一脸懵逼了；这里简单记录一下。

1、介绍

async 和 await 是 JavaScript 中用于处理异步操作的关键字。

async 是一个修饰符，用于声明一个函数是异步函数。异步函数在执行过程中可以包含 await 关键字来等待一个 Promise 对象的解决或拒绝，并以同步的方式来处理异步操作。

await 关键字只能在异步函数中使用，用于等待一个 Promise 对象的状态变为已解决（fulfilled）或已拒绝（rejected）。当遇到 await 时，代码执行会暂停，直到该 Promise 对象解决或拒绝后才会继续执行后续代码。

2、具体使用

当使用 await 修饰一个异步方法时，程序会暂停在使用 await 处的位置，并等待被 await 修饰的异步操作完成。

当遇到 await 关键字时，JavaScript 引擎会暂停执行当前的异步函数，并将控制权交还给调用者。它不会一直阻塞线程或挂起程序，而是允许其他任务在此期间继续执行。

具体来说：

1. 如果被 await 修饰的异步操作已经完成（Promise 对象已经解决），则 await 表达式会返回该异步操作的结果，并继续执行下一行代码。这使得异步操作能够以同步的方式来处理。

2. 如果被 await 修饰的异步操作尚未完成（Promise 对象仍处于等待状态），则 JavaScript 引擎会暂停当前异步函数的执行，并将控制权交还给调用者。这使得事件循环可以处理其他任务，如处理 UI 事件、执行其他异步操作等。

在等待期间，JavaScript 引擎会继续执行其他的同步代码，从而提高程序的并发性和响应性。

需要注意的是，await 关键字只能在异步函数中使用。如果在非异步函数（即普通函数）中使用 await，会导致语法错误。

示例代码如下所示：

async function fetchUser() {
  const response = await fetch('https://api.example.com/user');
  const user = await response.json();
  console.log(user);
  // 额外的同步代码
}

console.log('开始');

fetchUser();

console.log('结束');

在这个示例中，fetchUser 函数是一个异步函数。在该函数内部，await 关键字被用于等待 fetch 函数返回的 Promise 对象解决，以获取用户数据。在等待期间，程序会暂停执行 fetchUser 函数，并继续执行其他的同步代码（例如 "开始" 和 "结束" 的输出）。一旦异步操作完成，程序会回到 await 行所在的位置，并将异步操作的结果赋值给 user 变量。

注意：这也会导致一个问题，如果 fetch 等待的时间长，就会先把 "结束" 输出，然后才输出 user 。