async和await

╰半夏微凉° 2024-03-17 22:59 108阅读 0赞

### 前言 ###

在看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` 。