이벤트 순환과 리셋 대기열의 실전 이해

흔히 볼 수 있는 문제를 통해 이벤트 순환과 리셋 대기열 메커니즘을 설명하다

async function async1(){
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
async function async2(){
  console.log('async2')
}
console.log('script start')
setTimeout(function(){
  console.log('setTimeout') 
},0)  
async1();
new Promise(function(resolve){
  console.log('promise1')
  resolve();
}).then(function(){
  console.log('promise2')
})
console.log('script end')

Chrome 66 및 node v10에서 이 문제의 정확한 출력은 다음과 같습니다.

script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout

지식

매크로 작업은 일반적으로 전체 코드 script, setTimeout, setInterval, setImmediate, MessageChannel을 포함한다

마이크로 퀘스트는 일반적으로 Promise, process를 포함한다.nextTick

실행 순서는 우선 매크로 작업의 대기열(이 대기열은taskqueue라고도 부른다)에서 첫 번째 작업을 꺼내고 실행이 끝난 후에 마이크로 작업 대기열의 모든 작업 순서를 꺼내서 실행한다.그 다음에 매크로 퀘스트를 하나 더 가져와서 두 큐의 퀘스트가 모두 끝날 때까지 반복합니다

우선 순위 1.매크로 작업의 우선 순위: 주 코드 블록 > setImmediate > MessageChannel > setTimeout/setInterval 2.마이크로 작업의 우선순위:process.nextTick > Promise > MutationObserver

Promise  1. Promise가 정의되면 즉시 실행됩니다. 2. Promise의 reject와resolve는 비동기적으로 실행되는 리셋입니다.따라서resolve () 는 리셋 대기열에 저장됩니다

async/await  1. await가 실행되면 라인을 양보합니다. 2. async 태그의 함수는 Promise 객체를 반환합니다

난점

이해하기 쉽도록 async1 함수는 다음과 같이 이해할 수 있습니다.

async function async1(){
  console.log('async1 start')
  async2().then( () => {
    console.log( 'async1 end ')
  })
}

프로세스

console.log ('script start') 출력:script start

setTimeout이 마지막에 호출됩니다

async1 함수를 실행하고 async1start를 출력합니다.그리고 async2 함수에 들어가서 async2를 출력하고 Promise 대상을 되돌려줍니다.async1로 돌아갑니다. await로 인해 라인을 양보합니다. async2 함수가 되돌아오는 Promise는 리셋 대기열에 놓입니다

새 new는 Promise 대상을 출력하고promise1을 출력합니다.그중의resolve () 는 리셋 대기열에 놓여 있습니다

console.log ('script end') 출력:script end

리셋 대기열에서 async1이 되돌아오는 Promise 대상, 대상이 생성한resolve는 리셋 대기열에 넣습니다.여기는 어떤 값도 출력하지 않습니다..

리셋 대기열 실행, 아래 Promise 현식 성명의resolve, 출력promise2..

실행 리셋 대기열에서 async1 함수로 되돌아온promise 대상의resolve로 인해 async1 end를 출력합니다..

리셋 대기열 실행, 마지막 setTimeout, 출력 setTimeout

완성