javascript 면접 에서 비동기 에 대한 이해

비동기 개념
js 는 비동기 가 무엇 인지 모 르 고 왜 비동기 가 필요 한 학생 에 게 먼저 나의 이 글 을 볼 수 있 습 니 다. 예 를 들 어 잘못된 점, 지적 을 요청 하고 읽 어 주 셔 서 감사합니다.
비동기 적 으로 한층 더 이해 하 다.

                 ，        ,       ，            （  chrom:   ：72.0.3626.121           ）

//        
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')
})
async1()
new Promise(function (resolve) {
   console.log('promise1')
   resolve()
}).then(function () {
   console.log('promise2')
})
console.log('script end')

// result：
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// settimeout

실행 과정의 분석:

console. log ('script start') 를 만 나 메 인 스 레 드 에 놓 고 바로 실행 하기 때문에 첫 번 째 단 계 는 script start

를 출력 합 니 다.

setTimeout 을 만 났 습 니 다. setTimeout 은 비동기 이기 때문에 리 셋 함 수 를 비동기 대기 열 에 넣 고 기 다 립 니 다. 메 인 스 레 드 의 작업 이 끝 난 후에 이벤트 폴 링 방식 으로 호출 합 니 다

async 1 함수 호출 을 만 났 습 니 다. 이때 async 1 함수 에 가서 async 1 start

를 출력 합 니 다.

await 키 워드 를 만 나 async 2 함수 에 들 어가 async 2 를 출력 하고 await 뒤의 코드 를 마이크로 작업 에 넣 고 뒤의 작업 을 수행 합 니 다

Promise 를 만 나 promise 1 을 직접 출력 하고 리 셋 함 수 를 마이크로 작업 에 넣 고 다음 작업 을 수행 합 니 다

console. log ('script end') 를 만 나 메 인 스 레 드 에 놓 고 바로 실행 하기 때문에 첫 번 째 단 계 는 script end 를 출력 합 니 다. 이때 메 인 스 레 드 의 코드 가 실 행 됩 니 다

메 인 스 레 드 의 코드 가 실 행 된 후에 모든 마이크로 작업 을 즉시 수행 합 니 다.각각 async 1 end, promise 2

를 출력 합 니 다.

마지막 으로 이벤트 폴 링 방식 으로 비동기 대기 열 에 있 는 코드 를 메 인 스 레 드 로 가 져 와 실행 (출력 settimeout)

반복 절차 8

주의 하 다.

await 키 워드 는 async 키 워드 를 수식 하 는 함수 에서 만 사용 할 수 있 습 니 다.

async 문법 은 사실 Promise 문법 이다.

위의 예 에서 이 부분 코드 는 다음 과 같이 바 꿀 수 있다.
전환 전:

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

전환 후:

    async function async1() {
       console.log('async1 start')
       new Promise((resolve, reject) => {
           this.async2()
           resolve()
       })
       .then(body => {
           console.log('async1 end')
       })
    }

여러분 을 공 고 히 하기 위해 다음 두 문 제 를 연습 할 수 있 습 니 다.

async function async1() {
    console.log('async1 start');
    await async2();
    setTimeout(function() {
        console.log('setTimeout1')
    },0)
}
async function async2() {
	setTimeout(function() {
		console.log('setTimeout2')
	},0)
}
console.log('script start');

setTimeout(function() {
    console.log('setTimeout3');
}, 0)
async1();

new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

async function async1() {
   console.log('async1 start')
   await async2()
   console.log('async1 end')
}
async function async2() {
   console.log('async2')
	new Promise((resolve, reject) => {
		console.log('promise3')
		resolve()
	})
	.then(body => {
		console.log('promise4')
	})
}
console.log('script start')
setTimeout(function () {
   console.log('settimeout')
})
async1()
new Promise(function (resolve) {
   console.log('promise1')
   resolve()
}).then(function () {
   console.log('promise2')
})
console.log('script end')

답:

    script start
    async1 start
    promise1
    script end
    promise2
    setTimeout3
    setTimeout2
    setTimeout1

    script start
    async1 start
    async2
    promise3
    promise1
    script end
    promise4
    async1 end
    promise2
    settimeout

읽 어 주 셔 서 감사합니다. 잘못된 점 은 가르쳐 주세요.
다음으로 전송:https://juejin.im/post/5c85d75b6fb9a049ac79fc58