async、await 细节

于 2024-10-09 22:52:20 发布
阅读量842 收藏 13
点赞数 16
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/why_1639946449/article/details/142798442
版权

关于promise、async/await的使用相信很多小伙伴都比较熟悉了，但是提到事件循环机制输出结果类似的题目，你敢说都会？

试一试？

1：

async function async1 () {
    await new Promise((resolve, reject) => {
        resolve()
    })
    console.log('A')
}

async1()

new Promise((resolve) => {
    console.log('B')
    resolve()
}).then(() => {
    console.log('C')
}).then(() => {
    console.log('D')
})

// 最终结果: B A C D

2：

async function async1 () {
    await async2()
    console.log('A')
}

async function async2 () {
    return new Promise((resolve, reject) => {
        resolve()
    })
}

async1()

new Promise((resolve) => {
    console.log('B')
    resolve()
}).then(() => {
    console.log('C')
}).then(() => {
    console.log('D')
})

// 最终结果: B C D A

基本一样的代码为什么会出现差别，话不多说

1、async 函数返回值

在讨论 await 之前，先聊一下 async 函数处理返回值的问题，它会像 Promise.prototype.then 一样，会对返回值的类型进行辨识。

根据返回值的类型，引起 js引擎 对返回值处理方式的不同

📑结论：async函数在抛出返回值时，会根据返回值类型开启不同数目的微任务

  • return结果值：非thenable、非promise（不等待）

  • return结果值：thenable（等待 1个then的时间）

  • return结果值：promise（等待 2个then的时间）

1：

async function testA () {
    return 1;
}

testA().then(() => console.log(1));
Promise.resolve()
    .then(() => console.log(2))
    .then(() => console.log(3));

// (不等待)最终结果: 1 2 3

2：

async function testB () {
    return {
        then (cb) {
            cb();
        }
    };
}

testB().then(() => console.log(1));
Promise.resolve()
    .then(() => console.log(2))
    .then(() => console.log(3));

// (等待一个then)最终结果: 2 1 3

3：

async function testC () {
    return new Promise((resolve, reject) => {
        resolve()
    })
}

testC().then(() => console.log(1));
Promise.resolve()
    .then(() => console.log(2))
    .then(() => console.log(3));
    
// (等待两个then)最终结果: 2 3 1




async function testC () {
    return new Promise((resolve, reject) => {
        resolve()
    })
} 

testC().then(() => console.log(1));
Promise.resolve()
    .then(() => console.log(2))
    .then(() => console.log(3))
    .then(() => console.log(4))

// (等待两个then)最终结果: 2 3 1 4

看了这三个是不是对上面的结论有了更深的认识？

稍安勿躁，来试试一个经典面试题

async function async1 () {
    console.log('1')
    await async2()
    console.log('AAA')
}

async function async2 () {
    console.log('3')
    return new Promise((resolve, reject) => {
        resolve()
        console.log('4')
    })
}

console.log('5')

setTimeout(() => {
    console.log('6')
}, 0);

async1()

new Promise((resolve) => {
    console.log('7')
    resolve()
}).then(() => {
    console.log('8')
}).then(() => {
    console.log('9')
}).then(() => {
    console.log('10')
})
console.log('11')

// 最终结果: 5 1 3 4 7 11 8 9 AAA 10 6

哈哈没关系

步骤拆分：

  1. 先执行同步代码，输出5

  2. 执行setTimeout，是放入宏任务异步队列中

  3. 接着执行async1函数，输出1

  4. 执行async2函数，输出3

  5. Promise构造器中代码属于同步代码，输出4

    async2函数的返回值是Promise，等待2个then后放行，所以AAA暂时无法输出

  6. async1函数暂时结束，继续往下走，输出7

  7. 同步代码，输出11

  8. 执行第一个then，输出8

  9. 执行第二个then，输出9

  10. 终于等到了两个then执行完毕，执行async1函数里面剩下的，输出AAA

  11. 再执行最后一个微任务then，输出10

  12. 执行最后的宏任务setTimeout，输出6

2、await 右值类型区别

2.1、非 thenable

1：

async function test () {
    console.log(1);
    await 1;
    console.log(2);
}

test();
console.log(3);
// 最终结果: 1 3 2

2：

function func () {
    console.log(2);
}

async function test () {
    console.log(1);
    await func();
    console.log(3);
}

test();
console.log(4);

// 最终结果: 1 2 4 3

3：

async function test () {
    console.log(1);
    await 123
    console.log(2);
}

test();
console.log(3);

Promise.resolve()
    .then(() => console.log(4))
    .then(() => console.log(5))
    .then(() => console.log(6))
    .then(() => console.log(7));

// 最终结果: 1 3 2 4 5 6 7

Note:

await后面接非 thenable 类型，会立即向微任务队列添加一个微任务then，但不需等待

2.2、thenable类型

async function test () {
    console.log(1);
    await {
        then (cb) {
            cb();
        },
    };
    console.log(2);
}

test();
console.log(3);

Promise.resolve()
    .then(() => console.log(4))
    .then(() => console.log(5))
    .then(() => console.log(6))
    .then(() => console.log(7));

// 最终结果: 1 3 4 2 5 6 7

Note:

await 后面接 thenable 类型，需要等待一个 then 的时间之后执行

2.3、Promise类型

async function test () {
    console.log(1);
    await new Promise((resolve, reject) => {
        resolve()
    })
    console.log(2);
}

test();
console.log(3);

Promise.resolve()
    .then(() => console.log(4))
    .then(() => console.log(5))
    .then(() => console.log(6))
    .then(() => console.log(7));

// 最终结果: 1 3 2 4 5 6 7

为什么表现的和非 thenable 值一样呢？为什么不等待两个 then 的时间呢？

Note:

  • TC 39(ECMAScript标准制定者) 对await 后面是 promise 的情况如何处理进行了一次修改，移除了额外的两个微任务，在早期版本，依然会等待两个 then 的时间

  • 有大佬翻译了官方解释：更快的 async 函数和 promises[1]，但在这次更新中并没有修改 thenable 的情况

这样做可以极大的优化 await 等待的速度

async function func () {
    console.log(1);
    await 1;
    console.log(2);
    await 2;
    console.log(3);
    await 3;
    console.log(4);
}

async function test () {
    console.log(5);
    await func();
    console.log(6);
}

test();
console.log(7);

Promise.resolve()
    .then(() => console.log(8))
    .then(() => console.log(9))
    .then(() => console.log(10))
    .then(() => console.log(11));

// 最终结果: 5 1 7 2 8 3 9 4 10 6 11

Note：

await 和 Promise.prototype.then 虽然很多时候可以在时间顺序上能等效，但是它们之间有本质的区别。

  • test 函数中的 await 会等待 func 函数中所有的 await 取得 恢复函数执行 的命令并且整个函数执行完毕后才能获得取得 恢复函数执行的命令；

  • 也就是说，func 函数的 await 此时不能在时间的顺序上等效 then，而要等待到 test 函数完全执行完毕；

  • 比如这里的数字6很晚才输出，如果单纯看成then的话，在下一个微任务队列执行时6就应该作为同步代码输出了才对。

所以我们可以合并两个函数的代码

async function test () {
    console.log(5);

    console.log(1);
    await 1;
    console.log(2);
    await 2;
    console.log(3);
    await 3;
    console.log(4);
    await null;
    
    console.log(6);
}

test();
console.log(7);

Promise.resolve()
    .then(() => console.log(8))
    .then(() => console.log(9))
    .then(() => console.log(10))
    .then(() => console.log(11));

// 最终结果: 5 1 7 2 8 3 9 4 10 6 11

因为将原本的函数融合，此时的 await 可以等效为 Promise.prototype.then，又完全可以等效如下代码

async function test () {
    console.log(5);
    console.log(1);
    Promise.resolve()
        .then(() => console.log(2))
        .then(() => console.log(3))
        .then(() => console.log(4))
        .then(() => console.log(6))
}

test();
console.log(7);

Promise.resolve()
    .then(() => console.log(8))
    .then(() => console.log(9))
    .then(() => console.log(10))
    .then(() => console.log(11));

// 最终结果: 5 1 7 2 8 3 9 4 10 6 11

以上三种写法在时间的顺序上完全等效，所以你 完全可以将 await 后面的代码可以看做在 then 里面执行的结果，又因为 async 函数会返回 promise 实例，所以还可以等效成

async function test () {
    console.log(5);
    console.log(1);
}

test()
    .then(() => console.log(2))
    .then(() => console.log(3))
    .then(() => console.log(4))
    .then(() => console.log(6))

console.log(7);

Promise.resolve()
    .then(() => console.log(8))
    .then(() => console.log(9))
    .then(() => console.log(10))
    .then(() => console.log(11));

// 最终结果: 5 1 7 2 8 3 9 4 10 6 11

可以发现，test 函数全是走的同步代码...

所以：**async/await 是用同步的方式，执行异步操作**

3、

1：

async function async2 () {
    new Promise((resolve, reject) => {
        resolve()
    })
}

async function async3 () {
    return new Promise((resolve, reject) => {
        resolve()
    })
}

async function async1 () {
    // 方式一：最终结果：B A C D
    // await new Promise((resolve, reject) => {
    //     resolve()
    // })

    // 方式二：最终结果：B A C D
    // await async2()

    // 方式三：最终结果：B C D A
    await async3()

    console.log('A')
}

async1()

new Promise((resolve) => {
    console.log('B')
    resolve()
}).then(() => {
    console.log('C')
}).then(() => {
    console.log('D')
})

大致思路：

  • 首先，**async函数的整体返回值永远都是Promise，无论值本身是什么**

  • 方式一：await的是Promise，无需等待

  • 方式二：await的是async函数，但是该函数的返回值本身是**非thenable**，无需等待

  • 方式三：await的是async函数，且返回值本身是Promise，需等待两个then时间

2：

function func () {
    console.log(2);

    // 方式一：1 2 4  5 3 6 7
    // Promise.resolve()
    //     .then(() => console.log(5))
    //     .then(() => console.log(6))
    //     .then(() => console.log(7))

    // 方式二：1 2 4  5 6 7 3
    return Promise.resolve()
        .then(() => console.log(5))
        .then(() => console.log(6))
        .then(() => console.log(7))
}

async function test () {
    console.log(1);
    await func();
    console.log(3);
}

test();
console.log(4);

步骤拆分：

  • 同步代码输出1、2，接着将log(5)处的then1加入微任务队列，await拿到确切的func函数返回值undefined，将后续代码放入微任务队列（then2，可以这样理解）

  • 执行同步代码输出4，到此，所有同步代码完毕

  • 执行第一个放入的微任务then1输出5，产生log(6)的微任务then3

  • 执行第二个放入的微任务then2输出3

  • 然后执行微任务then3，输出6，产生log(7)的微任务then4

  • 执行then4，输出7

  • 同步代码输出1、2，await拿到func函数返回值，但是并未获得具体的结果（由Promise本身机制决定），暂停执行当前async函数内的代码（跳出、让行）

  • 输出4，到此，所有同步代码完毕

  • await一直等到Promise.resolve().then...执行完成，再放行输出3

方式二没太明白

继续

function func () {
    console.log(2);

    return Promise.resolve()
        .then(() => console.log(5))
        .then(() => console.log(6))
        .then(() => console.log(7))
}

async function test () {
    console.log(1);
    await func()
    console.log(3);
}

test();
console.log(4);

new Promise((resolve) => {
    console.log('B')
    resolve()
}).then(() => {
    console.log('C')
}).then(() => {
    console.log('D')
})

// 最终结果: 1 2 4    B 5 C 6 D 7 3

还是没懂？

继续

async function test () {
    console.log(1);
    await Promise.resolve()
        .then(() => console.log(5))
        .then(() => console.log(6))
        .then(() => console.log(7))
    console.log(3);
}

test();
console.log(4);

new Promise((resolve) => {
    console.log('B')
    resolve()
}).then(() => {
    console.log('C')
}).then(() => {
    console.log('D')
})

// 最终结果: 1 4    B 5 C 6 D 7 3

Note:

综上，await一定要等到右侧的表达式有确切的值才会放行，否则将一直等待（阻塞当前async函数内的后续代码），不服看看这个

  • function func () {
  return new Promise((resolve) => {
      console.log('B')
      // resolve() 故意一直保持pending
  })
}

async function test () {
  console.log(1);
  await func()
  console.log(3);
}

test();
console.log(4);
// 最终结果: 1 B 4 (永远不会打印3)


// ---------------------或者写为-------------------
async function test () {
  console.log(1);
  await new Promise((resolve) => {
      console.log('B')
      // resolve() 故意一直保持pending
  })
  console.log(3);
}

test();
console.log(4);
// 最终结果: 1 B 4 (永远不会打印3)

3：

async function func () {
    console.log(2);
    return {
        then (cb) {
            cb()
        }
    }
}

async function test () {
    console.log(1);
    await func();
    console.log(3);
}

test();
console.log(4);

new Promise((resolve) => {
    console.log('B')
    resolve()
}).then(() => {
    console.log('C')
}).then(() => {
    console.log('D')
})

// 最终结果: 1 2 4 B C 3 D

步骤拆分：

  • 同步代码输出1、2

  • await拿到func函数的具体返回值thenable，将当前async函数内的后续代码放入微任务then1(但是需要等待一个then时间)

  • 同步代码输出4、B，产生log(C)的微任务then2

  • 由于then1滞后一个then时间，直接执行then2输出C，产生log(D)的微任务then3

  • 执行原本滞后一个then时间的微任务then1，输出3

  • 执行最后一个微任务then3输出D

4、总结

async函数返回值

  • return结果值：非thenable、非promise（不等待）

  • return结果值：thenable（等待 1个then的时间）

  • return结果值：promise（等待 2个then的时间）

  • 📑结论：async函数在抛出返回值时，会根据返回值类型开启不同数目的微任务

await右值类型区别

  • TC 39 对await 后面是 promise 的情况如何处理进行了一次修改，移除了额外的两个微任务，在早期版本，依然会等待两个 then 的时间

  • 接非 thenable 类型，会立即向微任务队列添加一个微任务then，但不需等待

  • 接 thenable 类型，需要等待一个 then 的时间之后执行

  • 接Promise类型(有确定的返回值)，会立即向微任务队列添加一个微任务then，但不需等待

We-5211314
关注
Unity C# 之 Task、async和 await 、Thread 基础使用的Task的简单整理
仙魁XAN
08-21 7901
ThreadPool中有若干数量的线程，如果有任务需要处理时，会从线程池中获取一个空闲的线程来执行任务，任务执行完毕后线程不会销毁，而是被线程池回收以供后续任务使用。当线程池中所有的线程都在忙碌时，又有新任务要处理时，线程池才会新建一个线程来处理该任务，如果线程数量达到设置的最大值，任务会排队，等待其他任务释放线程后再执行。是进程中的基本执行单元，是操作系统分配CPU时间的基本单位，一个进程可以包含若干个线程，在进程入口执行的第一个线程被视为这个进程的主线程。可以设置每个任务的优先级以优化程序性能。
异步Promise及Async/Await详解
qq_15859173的博客
12-21 786
一、为什么有Async/Await？ 我们都知道已经有了Promise的解决方案了，为什么还要ES7提出新的Async/Await标准呢？ 答案其实也显而易见：Promise虽然跳出了异步嵌套的怪圈，用链式表达更加清晰，但是我们也发现如果有大量的异步请求的时候，流程复杂的情况下，会发现充满了屏幕的then，看起来非常吃力，而ES7的Async/Await的出现就是为了解决这种复杂的情况。 首先，我们必须了解Promise。 二、Promise简介 2.1 Promise实例 什么是Promise，很多人应该
async、await和.then的使用
守灯者的博客
12-30 1413
then async await 三者的使用
你不知道的 async、await 魔鬼细节
不定时分享最优质的网络技术与教程，满满的干货。
02-14 247
关于的使用相信很多小伙伴都比较熟悉了，但是提到事件循环机制输出结果类似的题目，你敢说都会？试一试？resolve()})​async1()​resolve()})​// 最终结果👉: B A C D复制代码​resolve()})​async1()​resolve()})​// 最终结果👉: B C D A复制代码❓基本一样的代码为什么会出现差别，话不多说👇async函数返回值async函数在抛出返回值时，会根据返回值类型开启不同数目的微任务。
前端：你不知道的async await
接着奏乐接着舞的博客
02-24 5142
你是否知道async是什么？作用是什么？await是什么执行逻辑是怎样的？await下面的代码是什么样的执行顺序？
15、async函数
weixin_43613849的博客
03-05 1592
目录 1、基本用法 2、语法 1、返回 Promise 对象 2、Promise 对象的状态变化 3、await 命令 4、错误处理 5、使用注意点 1、基本用法 async函数返回一个 Promise 对象，可以使用then方法添加回调函数。 当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。 async function getStockPriceByName(name) { const symbol = await get.
async when then
highflys的博客
11-14 166
  function test1(){ var def = new  $.Deferred; setTimeout(function() { console.log(1) def.resolve(); }, 1000); return def; }   function test2(){   var def = new  $.Deferred; setTimeout(f...
js async await 使用细节
09-12
使用async/await关键字可以让我们以同步的方式编写异步代码。在使用async函数时，需要注意以下几点： 1. async函数本身会马上返回，不会阻塞当前线程，即使函数内部存在异步操作也是如此。这使得我们可以在异步操作...
C#中的async和await的使用详解
热门推荐
Liu_G的博客
09-23 1万+
C#中的async和await的使用 在C#中，在很多的时候，都需要一些异步操作，并且在做完这些异步操作之后，可以在后面接着做一些处理，在 .net framework 4.5之后，便加入了一种简洁的方式来使用异步操作，这就是async和await。 async用来声明一个函数体，将其声明为异步方法，而await则是用在这个函数体的内部，用于等待一个异步操作的完成。 异步方法内部可以出现一个或者多个await，一般不要是0个，这样就失去了异步方法的意义了。 ...
C# Async/Await原理剖析
weixin_43990579的博客
04-09 1万+
什么是Async/Await Async/Await是C# 5引入的关键字，用以提高用户界面响应能力和对Web资源的访问能力，同时它使异步代码的编写变得更加容易。 为什么需要Async/Await 1. 需要使用异步编程技术来提高程序的响应能力 在Windows桌面应用中，当click download button时，我们不希望其导致整个ui失去响应。我们希望ui线程能够实时的响应窗体事件，而不...
JS-学习ES6之- async & await
BigKongfuPanda的博客
06-09 1631
目录 概述 基本用法 1. 概述 async 函数是什么？一句话，它就是 Generator 函数的语法糖。 2. 基本用法 2.1 返回 promise 对象 async 函数返回的是一个 promise 对象. async function test (){ return 'hello async'; } let result = test(); cons...
async 和 await
weixin_41040445的博客
04-07 145
async函数就是Generator函数的语法糖 ES7中提出的async函数，它能解决Promise连续then的一个火车黑洞问题 1、基本使用 const fs = require("fs"); function readFile(url) { return new Promise((resolve,reject) => { fs.readFile(url,(err,content) => { if(err){
ES6 -- async 函数
yecengxiangshi0426的专栏
04-17 166
async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。 1.基本用法 async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。 async function getStockPriceByName(nam...
promise，async →await，then→catch，try→catch 使用简介
最新发布
weixin_44434938的博客
03-13 1218
promise，async →await，then→catch，try→catch 使用简介
ES7 之 Async/await 的使用（改进 Promise 链式操作）
weixin_33748818的博客
11-06 291
在 js 异步请求数据时，通常，我们多采用回调函数的方式解决，但是，如果有多个回调函数嵌套时，代码显得很不优雅，维护成本也相应较高。 ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖可以更好解决多层回调问题。 Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。 await 操作符用于等待一个Promise 对象。它只能在异步函数...
ES6学习（八）---async和await
邱先生的博客
04-22 226
1.async 2.await 1.async async 函数算是一个语法糖,使异步函数、回调函数在语法上看上去更像同步函数。async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。 async function getStockPriceByName(name) { ...
async/await（优势在于处理then链）
Holly31的博客
06-02 555
async/await没有这个限制，可以当做普通的局部变量来处理，用let或者const定义的块级变量想怎么用就怎么用，想定义几个就定义几个，完全没有限制，也没有冗余工作；从字面上来看，async是“异步”的简写，await译为等待，所以我们很好理解async声明function是异步的，await等待某个操作完成。sync/await是对Promise的优化： async/await是基于Promise的，是进一步的一种优化，不过在写代码时，Promise本身的API出现得很少，很接近同步代码的写法；
async函数、await函数、promise、then四者的关系
前端知识库
05-22 3432
async和await要搭配Promise使用, 它进一步极大的改进了Promise的写法 1.特点 await后面接一个会return new promise的函数并执行它 await只能放在async函数里 2.案例 function 摇色子(){ return new Promise((resolve, reject)=>{ let sino = parseInt(Math.random() * 6 +1) setTimeout(()=>{
关于 async 函数的理解/then的多层次回调问题
song854601134的博客
01-01 1969
前言 写这一篇文章的目的在于看到这篇文章觉得挺有意思，所以写下这个已表看法。 这个是原文 开始进坑 所谓的争论起源于一道面试题 async function async1() { console.log('async1 start') await async2() console.log('async1 end') } async function async2() { console.log('async2') } console.log('script start') setT
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值