在JavaScript中，await关键字是用于等待Promise完成的一个关键特性，它与async函数一起使用，使得异步代码的书写和管理变得更加直观和易于理解。下面详细解释await的作用原理和如何使用它。

1. async 函数

首先，要使用await，你需要在一个async函数内部。async函数是通过在函数声明前添加async关键字来定义的，这告诉JavaScript这个函数内部会有异步操作。

async function myFunction() {

    // 函数体

}

2. await 关键字

在async函数内部，你可以使用await关键字来暂停函数的执行，直到指定的Promise解决（resolve）或拒绝（reject）。这意味着你可以等待一个异步操作完成后再继续执行代码。

async function myFunction() {

    const result = await someAsyncOperation();

    console.log(result);

}

3. await 的工作原理

当你在一个async函数中使用await时，JavaScript引擎会暂停当前函数的执行，直到await后面的Promise解决。一旦这个Promise解决，暂停的函数将继续执行，并使用该Promise的解决值。

示例：

function fetchData() {

    return new Promise(resolve => setTimeout(() => resolve("Data Loaded"), 2000));

}

 

async function displayData() {

    console.log('Before fetching data');

    const data = await fetchData(); // 等待Promise解决

    console.log('After fetching data'); // 继续执行

    console.log(data); // 输出解决的值

}

 

displayData(); // 输出顺序：'Before fetching data', 'After fetching data', 'Data Loaded'

4. 处理错误

使用await时，任何由Promise拒绝引起的错误都可以通过在外部使用try...catch结构来捕获和处理。

async function fetchDataWithError() {

    return new Promise((resolve, reject) => setTimeout(() => reject("Error"), 2000));

}

 

async function displayDataWithErrorHandling() {

    try {

        console.log('Before fetching data');

        const data = await fetchDataWithError(); // 等待Promise解决或拒绝

        console.log('After fetching data'); // 如果成功则执行到这里

        console.log(data); // 输出解决的值

    } catch (error) {

        console.error('Error occurred:', error); // 如果Promise被拒绝，则执行到这里

    }

}

 

displayDataWithErrorHandling(); // 输出顺序：'Before fetching data', 'Error occurred: Error'（如果拒绝）

总结

通过在async函数中使用await，你可以以一种非常直观和同步的方式编写异步代码，这使得异步编程在JavaScript中更加易于理解和维护

​