async/await在JavaScript中是如何工作的？

async/await是基于Promise的语法糖，它使得异步代码的书写更加接近同步代码，从而提高了代码的可读性和可维护性。以下是async/await的工作原理：

1. async关键字

• 当一个函数被声明为async时，它会返回一个Promise对象。

• 如果函数返回的是一个非Promise值，async会将其包装成一个已解决的Promise。

• 如果函数内部抛出错误，async会返回一个被拒绝的Promise。

2. await关键字

• await只能在async函数内部使用。

• 它会暂停async函数的执行，直到等待的Promise被解决或被拒绝。

• 如果等待的Promise被解决，await会返回Promise的值。

• 如果等待的Promise被拒绝，await会抛出错误。

3. 工作流程

以下是一个简单的例子，展示了async/await是如何工作的：

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data'); // 暂停直到fetch完成
        if (!response.ok) {
            throw new Error('网络请求失败');
        }
        const data = await response.json(); // 暂停直到response.json完成
        console.log(data); // 打印数据
    } catch (error) {
        console.error(error); // 捕获错误
    }
}

fetchData(); // 调用异步函数

• 步骤解析：

  1. fetchData()被声明为async函数，因此它会返回一个Promise。

  2. await fetch('https://api.example.com/data')暂停fetchData的执行，直到fetch请求完成。

  3. 如果fetch请求成功，返回的Promise被解决，await返回请求的Response对象。

  4. 如果fetch请求失败，返回的Promise被拒绝，await会抛出错误，进入catch块。

  5. await response.json()暂停fetchData的执行，直到response.json()解析完成。

  6. 如果解析成功，返回的数据被打印到控制台。

4. 错误处理

• 使用try/catch可以捕获await操作中抛出的错误。

• 如果await的Promise被拒绝，错误会被抛出并被捕获到catch块中。

5. 注意事项

• await只能在async函数中使用。

• 如果在非async函数中使用await，会导致语法错误。

6. 与Promise的对比

• 使用async/await时，代码看起来更像同步代码，但本质上仍然是异步的。

• async/await的实现基于Promise，因此可以与Promise的方法（如.then()和.catch()）互操作。

总结

async/await通过将异步代码包装在Promise中，并使用await暂停和恢复函数执行，让异步代码变得更加直观和易于管理。它是现代JavaScript中处理异步操作的重要工具，使得代码的可读性和可维护性得到显著提升。