JavaScript async/await

我们使用 async 关键字和一个 函数 来表示该函数是一个异步函数。async 函数返回一个 promise。

async 函数的语法是

async function name(parameter1, parameter2, ...paramaterN) {
    // statements
}

这里，

• name - 函数的名称
• parameters - 传递给函数的参数

示例：Async Function

// async function example

async function f() {
    console.log('Async function.');
    return Promise.resolve(1);
}

f(); 

输出

Async function.

在上面的程序中，async 关键字用在函数前面，表示该函数是异步的。

由于该函数返回一个 promise，您可以使用链式方法 then()，如下所示

async function f() {
    console.log('Async function.');
    return Promise.resolve(1);
}

f().then(function(result) {
    console.log(result)
});

输出

Async function
1

在上面的程序中，f() 函数被解析，then() 方法被执行。

JavaScript await 关键字

await 关键字在 async 函数内部用于等待异步操作。

使用 await 的语法是

let result = await promise;

await 的使用会暂停 async 函数，直到 promise 返回一个结果（resolved 或 rejected）值。例如，

// a promise
let promise = new Promise(function (resolve, reject) {
    setTimeout(function () {
    resolve('Promise resolved')}, 4000); 
});

// async function
async function asyncFunc() {

    // wait until the promise resolves 
    let result = await promise; 

    console.log(result);
    console.log('hello');
}

// calling the async function
asyncFunc();

输出

Promise resolved
hello

在上面的程序中，创建了一个 Promise 对象，它会在 4000 毫秒后解析。这里，asyncFunc() 函数是使用 async 函数编写的。

await 关键字等待 promise 完成（resolved 或 rejected）。

let result = await promise;

因此，hello 仅在 promise 值可用到 result 变量之后才显示。

在上面的程序中，如果未使用 await，hello 会在 Promise resolved 之前显示。

注意：您只能在 async 函数内部使用 await。

async 函数允许异步方法以看似同步的方式执行。尽管操作是异步的，但它看起来像是以同步方式执行的。

如果程序中有多个 promise，这可能很有用。例如，

let promise1;
let promise2;
let promise3;

async function asyncFunc() {
    let result1 = await promise1;
    let result2 = await promise2;
    let result3 = await promise3;

    console.log(result1);
    console.log(result1);
    console.log(result1);
}

在上面的程序中，await 等待每个 promise 完成。

错误处理

在使用 async 函数时，您以同步方式编写代码。您还可以使用 catch() 方法来捕获错误。例如，

asyncFunc().catch(
    // catch error and do something
)

处理错误的另一种方法是使用 try/catch 块。例如，

// a promise
let promise = new Promise(function (resolve, reject) {
    setTimeout(function () {
    resolve('Promise resolved')}, 4000); 
});

// async function
async function asyncFunc() {
    try {
        // wait until the promise resolves 
        let result = await promise; 

        console.log(result);
    }   
    catch(error) {
        console.log(error);
    }
}

// calling the async function
asyncFunc(); // Promise resolved

在上面的程序中，我们使用 try/catch 块来处理错误。如果程序成功运行，它将进入 try 块。如果程序抛出错误，它将进入 catch 块。

要了解有关 try/catch 的更多详细信息，请访问 JavaScript JavaScript try/catch。

使用 async 函数的好处

• 与使用 callback 或 promise 相比，代码更具可读性。
• 错误处理更简单。
• 调试更容易。

注意：这两个关键字 async/await 在较新版本的 JavaScript (ES8) 中引入。一些较旧的浏览器可能不支持 async/await。要了解更多信息，请访问 JavaScript async/await 浏览器支持。