关于async函数中await的执行分析

最新推荐文章于 2024-02-14 08:15:00 发布

原创最新推荐文章于 2024-02-14 08:15:00 发布 · 441 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es 6 #async

ES6 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了async函数中await关键字的行为，特别是它如何等待Promise变为resolve状态才继续执行。当await后的Promise未处理resolve状态时，程序会等待。在错误处理方面，如果Promise有catch，不影响后续执行；若无错误处理，会抛出错误，并可能由上层catch捕获。根据jQuery的promise机制，await的错误处理遵循类似catch的规则，寻找合适的错误处理函数。

关于async函数中await的执行分析

async函数中await命令后面是一个 Promise 对象。如果不是，会被转成一个立即resolve的 Promise 对象。那么await是否等待这个Promise置为resolve状态才能进行下一步运行呢？我们通过下面代码分析下

async function test(){
        await new Promise(function(resolve,reject){
            setTimeout(x=>resolve('11111'),2000);
        }).then(x=>console.log(x));
        await new Promise(function(resolve,reject){
            setTimeout(x=>resolve('22222'),2000);
        }).then(x=>console.log(x));
    }
    test()
    //11111  2秒后打印
    //22222  4秒后打印

分析得出await是在Promise的resolve状态下才进行下一步。
如果没有处理resolve状态呢？

 async function test(){
        await new Promise(function(resolve,reject){
            //setTimeout(x=>resolve('11111'),2000);
        });
        await new Promise(function(resolve,reject){
            setTimeout(x=>resolve('22222'),2000);
        }).then(x=>console.log(x));
    }
//测试发现并没有任何打印

所以await需要Promise的resolve状态。
那么reject状态又是如何呢？

async function test(){
        await new Promise(function(resolve,reject){
            setTimeout(x=>reject('11111'),2000);
        }).catch(x=>console.log(x));
        await new Promise(function(resolve,reject){
            setTimeout(x=>resolve('22222'),2000);
        }).then(x=>console.log(x));
    }
     //11111  2秒后打印
    //22222  4秒后打印

async function test(){
        await new Promise(function(resolve,reject){
            setTimeout(x=>reject('11111'),2000);
        });
        await new Promise(function(resolve,reject){
            setTimeout(x=>resolve('22222'),2000);
        }).then(x=>console.log(x));
    }
    //报错

async function test(){
        await new Promise(function(resolve,reject){
            setTimeout(x=>reject('11111'),2000);
        });
        await new Promise(function(resolve,reject){
            setTimeout(x=>resolve('22222'),2000);
        }).then(x=>console.log(x));
    }
    test().catch(x=>console.log(x));
    //11111   2秒后打印

分析得出：
1.如果await后面的promise拥有catch则不影响后续的执行
2.如果没有处理错误状态则会报错，如果test有错误处理则错误抛出给test的catch处理。
3.根据jQuery的promise机制分析猜测await的错误处理流程：如果await后面的Promise拥有错误处理函数，则将该函数放入错误处理队列，待抛出错误将处理函数和参数apply方法使用一下，如果没有错误处理函数，则从父级中查找错误处理函数放入队列，如果没有，再从上一级直到找到错误处理函数放入队列（这跟promise的catch用法符合），如果没有则报错。