Promise, async, setTimeout 비동기식 실행 순서 문제

뇌가 난폭해~ 머리가 어지럽기 쉬운 사람은 들어오지 마라
제목 1:

console.log('script start');
    
setTimeout(function() {
  console.log('setTimeout');
}, 0);

const newPromise6 = new Promise(function(resolve, reject) {
  resolve(console.log('promise1'));
});

newPromise6.then(function() {
  console.log('promise2');
}).then(function() {
  console.log('promise3');
});

console.log('script end'); chrome ？

결과: script start promise1 script end promise2 promise3 setTimeout
해석: 비동기 작업 사이에는 차이가 존재하기 때문에 실행 우선순위도 다르다.크게 마이크로태스크(microtask, 예를 들어 Promise, MutaionObserver 등)와 매크로태스크(macrotask, 예를 들어 setTimeout, setInterval, I/O 등)로 나뉜다.
1. setTimeout 타이머는 js 작업 대기열의 매크로 작업에 속합니다.작업 대기열을 실행 창고에 넣고 실행 라인이 순서대로 실행되기를 기다리는 것을 가리킨다.마이크로 0을 설정할 수 있지만, 이번 라운드 실행 환경의 **를 기다려야 합니다 ** 실행이 끝난 후에야 실행할 수 있습니다.
2,promisees6의 비동기 문법은 js퀘스트 대기열의 마이크로퀘스트에 속한다.이번 라운드 매크로 작업을 수행하는 과정에서promise를 만나면 라운드 실행 과정의 마이크로 작업에 끼워 넣습니다.이 라운드 ** ， **.실행이 끝나면 다음 작업 대기열을 시작합니다.
제목 2:

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) {
  resolve(console.log("promise1"));
}).then(function () {
  console.log("promise2");
});

console.log('script end');

답: script start async1 start async2 promise1 script end async1 end promise2 settimeout
제목 3:promise를 앞에 넣고 then과 await를 비교해 보세요

new Promise(function (resolve) {
  resolve(console.log("promise1"));
}).then(function () {
  console.log("promise2");
});

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();

console.log('script end');

답: script start async1 start async2 promise1 script end promise2 async1 end settimeout
해석: 3. async await 비동기 문법은promise를 바탕으로 그 문법 설탕으로 비동기화를 동기화 작업처럼 한다.async를 사용하면 함수체에return XX가 있어 비동기promise로 포장됩니다.resolve('XX'), 현식return이 없으면async도 마찬가지로promise로 포장됩니다.resolve(‘undefined’);
주의:await는 js가 간다는 것을 상징합니다.** ， ， async **, 이번 라운드 실행 주기 내의 임무를 수행하고 이번 라운드의 매크로 작업(동기화 작업)이 완성된 후에 async로 돌아와서 이전 await의 함수의 반환 값을 기다립니다. 반환 값이 비동기promise라면promise에 넣을 것입니다.resolve () 마이크로퀘스트 (비동기 퀘스트 실행 창고), 앞에 있는 비동기 퀘스트 실행이 끝난 후에awaitpromise를 받습니다.resolve () 의 값, 그 다음에await 뒤의 논리를 실행합니다. 만약await 함수체가 비동기promise가 아니라면 그 뒤의 논리를 실행합니다.
?궁극대 boss

async function async1() {
 console.log("async1 start");
 await  async2(); 
 const newPromise6 = new Promise(function(resolve, reject) {
   resolve(console.log('promise11111'));
 }).then(() => {console.log('then2222222')});
 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) {
 resolve(console.log("promise1"));
}).then(function () {
 console.log("promise2");
});

console.log('script end');

답: script start async1 start async2 promise1 script end promise11111 async1 end promise2 then22222 settimeout
직접 두드려보고 이해해봐~