async/await와promise의 실행 순서

    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')

JS의 실행 메커니즘

매크로 작업을 수행하는 과정에서 마이크로 작업이 발생하면 마이크로 작업의 [이벤트 대기열]에 넣습니다

현재 매크로 작업 수행이 완료되면 마이크로 작업의 [이벤트 대기열]을 보고 안에 있는 모든 마이크로 작업을 순서대로 수행합니다

매크로 작업과 마이크로 작업의 구분 방식

macro-task(매크로 작업): 전체 코드 script, setTimeout, setInterval

micro-task(마이크로 작업): Promise, process.nextTick

async는 무슨 일을 하고 있습니까?

async 키워드를 가진 함수입니다. 함수의 반환값은 반드시promise 대상입니다. 만약 async 키워드 함수가promise가 아니라면 Promise.resolve()로 자동으로 포장됩니다.만약 async 키워드 함수가promise를 현저하게 되돌려준다면, 당신이 되돌려준promise를 기준으로 합니다.

    async function fn1(){
        return 123
    }

    function fn2(){
        return 123
    }

    console.log(fn1())
    console.log(fn2())

await는 무엇을 기다리고 있습니까?

await 등은 오른쪽 표현식의 결과입니다.
즉, 오른쪽이 함수라면 함수의return값은'표현식의 결과'입니다.
오른쪽이'hello'또는 어떤 값이라면 표현식의 결과는'hello'입니다.

async function async1() {
    console.log( 'async1 start')
    await async2()
    console.log( 'async1 end')
}

async function async2() {
    console.log('async2')
}

async1()

console.log( 'script start')

왼쪽에서 오른쪽으로 실행하고 await에 부딪히면 바로 튀어나와 막힘async2()의 실행?
아니면 오른쪽에서 왼쪽으로 async2를 먼저 실행한 후await 키워드가 있는 것을 발견하여 라인을 양보하고 코드를 막을까요?
실천의 결론은 오른쪽에서 왼쪽으로 가는 것이다.먼저 async2를 인쇄하고 나중에 인쇄합니다script start.

await가 기다린 후에 무슨 일을 했습니까?

promise 대상이 아니다

promise 대상

만약promise가 아니라면await는 뒤의 코드를 막는다. 먼저 async 바깥의 동기화 코드를 실행하고 동기화 코드를 실행하고 다시 async 내부로 돌아가서 이 비promise 물건을 await 표현식의 결과로 삼는다.
만약에promise 대상을 기다린다면await도async 뒤에 있는 코드를 멈추고 async 밖에 있는 동기화 코드를 실행하고 Promise 대상fulfilled를 기다린 다음에resolve의 매개 변수를await 표현식의 연산 결과로 삼을 것입니다.Promise가 이상을 처리하면 await 표현식은 Promise의 이상 원인을 던집니다.

전재:https://segmentfault.com/a/1190000017224799

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.