Javascript async/await

    在本教程中,您将借助示例了解 JavaScript 的 async/await 关键字。
    我们在函数中使用 async 关键字来表示该函数是一个异步函数。异步函数返回一个 promise
    async 函数的语法是:

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

    这里,

  • name - 函数的名称
  • parameters - 传递给函数的参数
示例:异步函数
// 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 方法

    在 async(异步)函数中使用 await 关键字来等待异步操作。
    使用 await 的语法是:

let result = await promise;

    使用 await 暂停 async 函数,直到 promise 返回结果(解析或拒绝)值。例如,

// 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 完成(resolve 或 reject)。

let result = await promise;

    因此,只有在 promise 值对 result 变量可用后,才会显示 hello。
    在上面的程序中,如果 await 没有使用,在 Promise resolved 之前显示 hello。
在这里插入图片描述

async/await 函数的工作原理

    注意:您只能在 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 try/catch

使用 async 函数的好处
  • 代码比使用回调或 promise 更具可读性。
  • 错误处理更简单。
  • 调试更容易。

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

    上一教程JS Promise                                          下一教程JS setInterval()

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/async-await

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值