Open1

jsのマクロタスクとマイクロタスク

hanpenmanhanpenman
  const resolvedPromise = Promise.resolve()
  function func1() {
    console.log('Start')
    setTimeout(() => {
      console.log('Macrotask 1')
    }, 0)
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then((response) => {
        console.log('Microtask 1')
      })
      .catch((error) => {
        console.log('Error') 
      })
    Promise.resolve().then(() => {
      console.log('Microtask 2')
    })
    console.log('End')
  }
  function func2() {
    console.log('func2')

    resolvedPromise.then(() => {
      console.log('Microtask 4')
    })
  }

  Promise.resolve().then(() => {
    console.log('Microtask 3')
  })
  func1()
  func2()


Start
End
func2
Microtask 3
Microtask 2
Microtask 4
Macrotask 1
Microtask 1

マイクロタスクは先にいれた順番で発火.fetchはデータ取得に時間かかるので,最後.マクロはマイクロより有線低いのでマイクロが終わったあと.