简单理解JavaScript 的async/await

Posted mr-tao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单理解JavaScript 的async/await相关的知识,希望对你有一定的参考价值。

什么是Async/Await?

  • async 函数 : 是 Generator 函数的语法糖
  • async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
  • async/await与Promise一样,是非阻塞的
  • async函数返回的是 Promise 对象,可以作为await命令的参数

二、语法

1、返回 Promise 对象

async函数返回一个 Promise 对象。

async函数内部return语句返回的值,会成为then方法回调函数的参数。

async function f() 
    return hello world;


f().then(v => console.log(v))
// "hello world"


async函数内部抛出错误,会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到

async function f() 
    throw new Error(出错了);


f().then(
    v => console.log(v),
    e => console.log(e)
)
// Error: 出错了


2、Promise对象的状态变化

只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数。

async function getTitle(url) 
    let response = await fetch(url);
    let html = await response.text();
    return html.match(/<title>([\s\S]+)<\/title>/i)[1];

getTitle(https://tc39.github.io/ecma262/).then(console.log)
// "ECMAScript 2017 Language Specification"

3、await命令

正常情况下,await命令后面是一个 Promise 对象。如果不是,会被转成一个立即resolve的 Promise 对象。

await命令后面的 Promise 对象如果变为reject状态,则reject的参数会被catch方法的回调函数接收到。

只要一个await语句后面的 Promise 变为reject,那么整个async函数都会中断执行

async function f() 
    await Promise.reject(出错了);
    await Promise.resolve(hello world); // 不会执行


有时,我们希望即使前一个异步操作失败,也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面,这样不管这个异步操作是否成功,第二个await都会执行。

async function f() 
    try 
        await Promise.reject(出错了);
     catch(e) 
    
    return await Promise.resolve(hello world);


f()
.then(v => console.log(v))
// hello world


另一种方法是await后面的 Promise 对象再跟一个catch方法,处理前面可能出现的错误。

async function f() 
    await Promise.reject(出错了)
    .catch(e => console.log(e));
    return await Promise.resolve(hello world);


f()
.then(v => console.log(v))
// 出错了
// hello world


4、错误处理

如果await后面的异步操作出错,那么等同于async函数返回的 Promise 对象被reject。

防止出错的方法,将其放在try...catch代码块之中。

async function f() 
    try 
        await new Promise(function (resolve, reject) 
            throw new Error(出错了);
        );
     catch(e) 
    
    return await(hello world);

如果有多个await命令,可以统一放在try...catch结构中。

async function main() 
    try 
        const val1 = await firstStep();
        const val2 = await secondStep(val1);
        const val3 = await thirdStep(val1, val2);
        console.log(Final: , val3);
    
    catch (err) 
        console.error(err);
    

总结

函数前的 async 关键字有两个作用:

  1. 总是返回 promise。
  2. 允许在其中使用 await。

在 promise 之前的 await 关键字,使 javascript 等待 promise 被处理,然后:

  1. 如果有 error,就会产生异常,就像在那个地方调用了 throw error一样。
  2. 否则,就会返回值,我们可以给它分配一个值。

 

以上是关于简单理解JavaScript 的async/await的主要内容,如果未能解决你的问题,请参考以下文章

是否可以在 MVC 4 AuthorizeAttribute 中使用异步/等待?

javascript --- 递归的简单理解

await 与 Promise.all 结合使用

对闭包的简单理解

简单理解JavaScript,TypeScript和JSX

简单粗暴地理解 JavaScript 原型链