likes
comments
collection
share

JS 的 async await 使用 内部实现 首先会打印 0 执行 foo 函数，遇到 async ，保存当前调用栈

作者站长头像
站长
· 阅读数 37

JS 的 async await 使用 内部实现 首先会打印 0 执行 foo 函数，遇到 async ，保存当前调用栈

使用

async function 声明创建一个异步函数。函数体内允许使用 await 关键字，这使得我们可以更简洁地编写基于 promise 的异步代码，并且避免了显式地配置 promise 链的需要

function resolveAfter2Seconds() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // Expected output: "resolved"
}

asyncCall();

JS 的 async await 使用 内部实现 首先会打印 0 执行 foo 函数，遇到 async ，保存当前调用栈

内部实现

async function foo() {
    console.log(1)
    let a = await 100
    console.log(a)
    console.log(2)
}
console.log(0)
foo()
console.log(3)

首先会打印 0

执行 foo 函数，遇到 async ，保存当前调用栈信息，进入 foo 协程。

打印 1。执行到 await 100 这行时，会创建一个 Promise 对象 promise_

协程是线程上的更轻量级的任务，一个线程可以有多个协程，但同时只能执行一个

（JS引擎会将 resolve 任务交给微任务）

然后将控制权交给父协程，将 promise_ 也传给父协程，父协程调用 promise_.then 来监控 Promise 的状态变化

let promise_ = new Promise((resolve,reject){
  resolve(100)
})

父协程执行 console.log(3)，父协程结束前进入微任务检查点，在微任务队列发现 resolve(100)，执行它并触发 promise_.then，父将控制权交给 foo 协程，同时传递 value （也就是100）

promise_.then((value)=>{
   //回调函数被激活后
  //将主线程控制权交给foo协程，并将vaule值传给协程
})

继续执行 console.log(a) 和 console.log(2)

JS 的 async await 使用 内部实现 首先会打印 0 执行 foo 函数，遇到 async ，保存当前调用栈

一句话介绍

主线程（父协程）执行，遇到 async 进入子协程，执行到 await ，创建一个 Promise 对象 p ，将控制权（及 p）还给父协程，父先用 p.then 监控状态（用于返回子协程），然后继续执行父协程的同步代码，结束前检查微任务，执行 resolve 触发 p.then，父将控制权（及 p 的结果）交给子协程

JS 的 async await 使用 内部实现 首先会打印 0 执行 foo 函数，遇到 async ，保存当前调用栈

参考：

转载自:https://juejin.cn/post/7423307164046245899
评论
请登录