异步函数，宏任务/微任务

浏览器线程

1. 进程与线程: 一个进程中可能包含多个线程;
2. 浏览器有很多线程，但是用于js引擎的线程只有一个。
3. 浏览器常见线程:

• javascript引擎线程
• 界面渲染线程
• 浏览器事件触发线程
• Http请求线程

主程序 、任务队列

1. 首先，js是单线程执行的(虽然浏览器是多线程的，但是分配给js执行队列的只有一个线程)。即前一个执行完毕后才能执行后一个，不能同时进行，此时就会出现 排队 的情况。

2. js中存在同步任务 和 异步任务，同步任务就是js执行过程中会形成一条链，按照代码的先后顺序开始依次执行，这条链被称为: 主程序;

3. 但不是所有的js任务都能够进入主程序中，当js执行到异步任务时，就会在主程序之外新建一个任务队列, 所有的异步任务都会进入这个任务队列中，等到主程序里面的同步任务执行完毕，主程序为空闲状态时，就会对任务队列中的异步任务放行，使其进入到主程序中，再依次执行;

4. 异步任务：setTimeout和setInterval、ajax、事件绑定等

5. 同步任务：除了异步任务外的所有任务

宏任务、微任务

1. 宏任务 和 微任务都表示异步任务，只是分类不同。
2. 宏任务:
   • 定时器
   • 事件绑定
   • ajax
   • 回调函数
   • Node中fs可以进行异步的I/O操作
3. 微任务:
   • process.nextTick
   • Promise.then
   • Promise.catch

代码执行顺序

先同步再异步，在此基础上先宏任务再微任务
= => 先判断同步异步，在判断宏观微观;
= =>执行顺序：同步宏任务，同步微任务，异步宏任务, 异步微任务

案例

created() {
  this.getTime()
};
methods: {
  getTime() {
      // 异步
      setTimeout(() => {
        console.log('异步1任务time1')
        new Promise(function(resolve, reject) {
          console.log('异步1宏任务promise')
          setTimeout(() => {
            console.log('异步1任务time2')
          }, 0)
          resolve()
        }).then(function() {
          console.log('异步1微任务then')
        })
      }, 0)
      console.log('主线程宏任务')
      // 异步
      setTimeout(() => {
        console.log('异步2任务time2')
      }, 0)
      // 同步
      new Promise(function(resolve, reject) {
        console.log('宏任务promise')
        // reject();
        resolve()
      }).then(function() {
        console.log('微任务then')
      }).catch(function() {
        console.log('微任务catch')
      })
      console.log('主线程宏任务2')
    },
}

结果：
主线程宏任务
宏任务promise
主线程宏任务2
微任务then
异步1任务time1
异步1宏任务promise
异步1微任务then
异步2任务time2
异步1任务time2