面试官问你 Promise 是同步还是异步。你的回答是

现在前端去面试,面试官总是会问到Promise,而问到Promise就肯定会在最后问一句:Promise到底是同步还是异步？那么这篇文章就给你一个答案!!!
(默认读者已经会使用Promise了,不熟悉可以看我的上一篇文章)

在这之前,要先给大家简单讲一下同步异步的问题。由于javaScript是单线程,这就意味着,所有任务都需要排队,就像你过年回家去车站买火车票一样,只有一个售票窗口,所有人都要排队,前面的人买完才能轮到你。如果排到了一个人,他找身份证找了半天,堵在了前面，那后面的所有人都被堵住了。而javaScript如果遇到一个任务,执行时间过长,造成堵塞，该怎么办。javaScript作者显然意识到了这个问题，于是就把任务分为了两种,一种同步任务,一种异步任务。

• 所有同步任务都在主线程上执行,形成一个技术栈(execution context stack)。
• 主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"中放置一个事件。
• 一旦"执行栈"中所有同步任务执行完毕,系统就会读取"任务队列",查看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
• 主线程不断重复上面的第三步。

Promise

   new Promise((resolve,reject) => {
        console.log("resolve before");
        resolve("success")
    }).then(res => console.log(res))
    console.log("同步");

    // resolve before
    // 同步
    // success

通过打印可以看到 Promise 本身是同步的("resolve before" 在"同步"之前先执行),而then()则是异步任务("success" 在"同步之后再执行")

微任务与宏任务

异步任务又分 宏任务 和 微任务
宏任务:setTimeout,setInterval,UI交互事件,I/O等
微任务:Promise.then(),Object.observe等
运行机制:
事件循环中,每执行一次循环操作称为tick,每一次tick的任务处理模型是比较复杂的
在这里我们就不展开讲了,你只要简单理解为 同步--> 微任务 --> 宏任务 就可以了

  new Promise((resolve,reject) => {
        console.log("resolve before");
        resolve("success");
        setTimeout(() => {
            console.log("setTimeout");
        })
    }).then(res => console.log(res))
    console.log("同步");

    // resolve before
    // 同步
    // success
    // setTimeout

上面的代码可以看到,resolve() 触发then()，此时"scuuess"是微任务,而"setTimeout"是宏任务,所以定时器最后输出打印

    new Promise((resolve,reject) => {
        setTimeout(() => {
            console.log("setTimeout");
            resolve("success");
        })
    }).then(res => console.log(res))
    console.log("同步");

    // 同步
    // setTimeout
    // success

而此时 由于resolve()在setTimeout中被执行,才触发then(),所以"success"就会被推到了下一次的事件循环。"success"最后才会被打印

总结

总的来讲Promise本身是同步的,但是then()是异步的。这其中还涉及到了微任务与宏任务。在这里我们并没有详细的对其进行讲解,我们可以简单理解为 同步-->微任务-->宏任务 就可以了。如果有感兴趣的同学,可以去深入的去了解一下。好了，这篇文章到此就结束了,相信面试官再问你此类问题,就难不倒你了！