第10道：setTimeout、promise、async/await 的区别_settimeout、async-await、props

题目：

说一说setTimeout、promise、async/await 的区别。

前面有一篇文章专门将了js的运行机制，在任务分为宏任务与微任务，setTimeout属性宏任务，Promise里面的then方法属于微任务，Async/Await中await语法后面紧跟的表达式是同步的，但接下来的代码是异步的，属于微任务。

下面分别举例子来setTimeout、Promise、Async/Await的区别。

setTimeout

 console.log("script start");
    setTimeout(function () {
        console.log('setTimeout')
    }, 0);
    console.log('script end');
1
2
3
4
5

输出顺序： script start -> script end -> setTimeout

Promise

Promise本身是同步的，但在执行resolve或者rejects时是异步的，即then方法是异步的。

    console.log("script start");
    let promise1 = new Promise(function(resolve) {
        console.log("promise1");
        resolve();
        console.log("promise1 end");
    }).then(function(){
        console.log('promise2');
    })

    setTimeout(function () {
        console.log('setTimeout');
    }, 0)
    console.log('script end');
1
2
3
4
5
6
7
8
9
10
11
12
13

输出顺序： script start -> promise1 -> promise1 end -> script end -> promise2 ->setTimeout

• promise1.then()的回调放入 microtask queue（微任务队列）
• setTimeout的回调放入macrotask queue （宏队列）即使是 0ms 的情况。

async/await

    async function async1(){
        console.log('async1 start');
        await async2();
        console.log('async1 end')
    }
    async function async2(){
        console.log('async2')
    }

    console.log('script start');
    async1();
    console.log('script end')
1
2
3
4
5
6
7
8
9
10
11
12

输出顺序：script start -> async1 start -> async2 -> script end -> async1 end

• async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。

• await的含义为等待，也就是 async 函数需要等待await后的函数执行完成并且有了返回结果（Promise对象）之后，才能继续执行下面的代码。await通过返回一个Promise对象来实现同步的效果

注意： 关于异步问题，小柒的两篇博客：真正了解js运行机制和一道关于异步问题的面试题讲述的很清楚，有需要的可以去看看哦。