ES6 async await原则探索

最新推荐文章于 2025-03-31 17:17:20 发布

Garrettzxd

最新推荐文章于 2025-03-31 17:17:20 发布

阅读量405

点赞数

CC 4.0 BY-SA版权

分类专栏： js 学习经验总结文章标签： ES6 async await js异步

本文链接：https://blog.youkuaiyun.com/Garrettzxd/article/details/87387798

学习同时被 3 个专栏收录

40 篇文章

订阅专栏

34 篇文章

订阅专栏

经验总结

11 篇文章

订阅专栏

本文详细介绍了ES6中新增的异步函数特性，包括async和await关键字的使用，以及它们如何改变异步编程的流程。通过实例演示了await在遇到非Promise和Promise对象时的不同行为，解释了其如何阻塞后续代码执行，直到异步操作完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6中新增异步函数，即在函数声明前加上async即可，使得异步操作更加方便简洁，其中await是在async函数中独有的

在执行过程中一旦遇到await就会先返回，等到异步操作完成之后再接着执行函数后面的语句，这句话是什么意思呢

一旦遇到await就立刻让出线程，阻塞后面的代码
如果不是promise，await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完毕后再回到async内部，把非promise作为await的结果
如果await右边是promise对象，也会阻塞后面的代码，先执行async外面的同步代码，等待promise对象fulfilled，把resolve的参数作为await表达式的运算结果

以上描述可以用如下代码验证：

function doSomething() {
    console.log('in doSomething');
}

async function test() {
    console.log('test start');
    await doSomething();//会阻塞后面的代码，执行外面代码
    console.log('test end');
}
test();
console.log('outside');
//输出如下
//test start
//in doSomething
//outside
//test end

由上面的代码可以看出执行到await时会中断其后面到代码，执行函数之外到代码，执行完后再回到这里来执行await后面的代码

下面是当await后面是promise对象时

function doSomething() {
    return new Promise((resolve, reject) => {
        resolve('something resolve');
    })
}

async function test() {
    console.log('test start');
    let res = await doSomething();
    console.log(res);
    console.log('test end');
}
test();
console.log('outside');

// 输出结果
// test start
// outside
// something resolve
// test end

await的结果是promise中resolve的参数，但是执行过程是相同的，先阻塞await后面的代码执行外面的同步代码再执行await后面的代码块