js同步（微任務、宏任務）異步任務

同步任務（宏任務，微任務），異步任務

console.log(1);

setTimeout(() => {
  console.log("我是定時器，延遲0S執行的");
}, 0);

new Promise((resolve, reject) => {
  console.log("new Promise是同步任務裏面的宏任務");
  resolve("我是then裏面的參數，promise裏面的then方法是宏任務裏面的微任務");
}).then(data => {
  console.log(data);
});

console.log(2);

查看輸出結果 瀏覽器與node

上述代碼能夠看出執行順序,同步任務（先執行宏任務，在執行微任務），遍歷異步隊列，執行異步任務

setTimeout setInterval 是異步任務，promise.then()是微任務，new Promise()是宏任務

嵌套執行案例分析

/**
 * 1. 程序先執行同步任務，在執行異步任務
 * 2.同步任務分爲宏任務和微任務
 */

async function testSometing() {
  console.log("執行testSometing");
  return "testSometing";
}

async function testAsync() {
  console.log("執行testAsync");
  return Promise.resolve("hello async");
}

async function test() {
  console.log("test start...");
  new Promise(resolve => {
    console.log("async 裏面的promise");
    resolve("async裏面的promise裏面的then");
  }).then(data => {
    console.log(data);
  });
  const v1 = await testSometing();
  console.log(v1);
  const v2 = await testAsync();
  console.log(v2);
  console.log(v1, v2);
}

test();

var promise = new Promise(resolve => {
  console.log("promise start..");
  resolve("promise");
}); //3
promise.then(val => console.log(val));
setTimeout(() => {
  console.log("setTime1");
}, 3000);
console.log("test end...");

/*

1. 程序從上到下執行,遇到test()函數執行,執行test函數裏面的代碼，一樣分爲同步異步的狀況
  1）輸出 「test start...」  
  2）Promise是一個宏任務 輸出 「async 裏面的promise」 後續代碼會被推入微任務隊列
  3）碰見 await await後面的會被轉換爲Promise Promise裏面的代碼是宏任務，then()裏面的代碼是微任務，因此執行後面的 testSometing 這個函數，須要分析 testSomething 這個函數 輸出「執行testSometing」 遇到函數的返回值，對應 await 來講，這個return的值做爲 then 裏面的參數，會被 v1這個變量接收 await 會阻止後續代碼的執行 test() 目前執行完畢
  4）碰見 promise 輸出 ‘promise start..’ 後續代碼推入到微任務
  5）後續碰見定時器，異步任務，推入異步隊列
  6）輸出 「test end」 所有宏任務執行完畢，檢查微任務隊列
  7）第一個微任務是執行 test()函數推入的 輸出「async裏面的promise裏面的then」
  8）還記得 test() 裏面的await 後面的 微任務執行 輸出 「test something」
  9) 繼續向下執行 執行 testAsync 輸出 "執行testAsync" 
  10) 再次推入微任務
  11）執行 promise 那一個微任務 輸出 promise
  12）10步的時候推入了一個微任務，繼續執行 輸出 「hello async」
  13）碰見 console 執行 「testSometing hello async」
  14）微任務執行完畢 執行異步任務，就是定時器 輸出 「setTime1」
 */