异步代码执行问题

来源:8-17 解答JS异步的面试题

Evonne_xy

2022-02-19

new Promise((resolve)=> {
  setTimeout(()=> {
      console.log('setTime') //第三步(问题1)
      resolve('ok')
  }, 0)
  console.log('promise1') //第一步
}).then((res) => {
  console.log(res) //第四步(问题2)
  console.log('then')
})

console.log('local') //第二步

//promise1 -> local -> setTime -> ok -> then

老师您好,麻烦您能帮我分析一下这行代码嘛?

我分析的是首先promise本身是个同步函数,所以顺序执行,然后setTimeout是一个异步的,会放入webapi中,然后,执行console.log(‘promise1’),然后then也是异步的,放入webapi中, 然后执行console.log(‘local’).

问题1 : 执行完console.log(‘local’).先执行setTimeout还是先执行then呢?

我试了一下是先执行setTimeout,但是我有点不太理解 为什么先执行setTimeout是因为 webAPI 执行完后 放入 回调队列中(先进先出)我先放入的所以先执行是嘛?

但是promise.then不是放入的是微任务队列,setTimeout是宏任务队列,按道理不是应该promise.then先执行吗?

问题2: 不太理解就是resolve(‘ok’), 我知道resolve是一个异步操作,我查了一下网上有这句话:
当在executor中执行resolve或者reject的时候, 此时是异步操作, 会先执行then/catch等,当主栈完成后,才会去调用resolve/reject中存放的方法执行

那如果是这样 不应该先执行 console.log(‘then’),再返回得到resolve返回值ok,然后再执行 console.log(res)吗?但是答案是顺序执行。

希望老师解答一下 谢谢

写回答

1回答

双越

2022-02-19

第一,需要先执行 resolve() ,再执行 then 里的函数。所以 'setTimeout' 会先于 then 内部函数打印

第二,resolve('ok') 其实就是把 promise 实例变成 fulfilled 状态,顺便把 'ok' 作为参数传递给第一个 then 内部的函数,然后再微任务异步执行 then 内部的函数。

这道题其实并不麻烦,只要理解了 Promise 的基础知识,并不难解答。


Promise 比较麻烦的问题,你可以搜一下“一道令我失眠的 promise 面试题”。这道题我在新课程 https://coding.imooc.com/class/562.html 中有讲解。

但前提还是要你熟悉 Promise 基础知识。

1
1
Evonne_xy
奥奥 懂了 谢谢老师~~
2022-02-19
共1条回复

一天时间高效准备前端技术一面 匹配大厂面试要求

针对时下面试高频考点,帮助新人js面试快速通关

4694 学习 · 1681 问题

查看课程