비동기 동작 어떻게 하는지, promise 동작

요약

• 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 말한다.
• 자바스크립트 엔진은 한번에 하나의 테스크만 실행할 수 있는 싱글 스레드 방식으로 동작하며 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹이 발생한다.
• 현재 실행중인 태스크를 블로킹 하지 않고 다음 태스크를 실행하는 방식을 비동기라고 한다.

• 콜백함수로 비동기 처리를 할수있다.

• 콜백 함수를 익명함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 늘어남에 따라서 콜백 지옥 현상이 발생하는 문제점이 있다.
• 이를 해결하기 위해서 ES6에서 Promise가 도입되었다.

• Promise 객체는 new 키워드와 생성자를 사용해서 만든다.
• 생성자는 매개변수로 executor라는 콜백 함수를 받는데 이 콜백 함수는 인자로 resolve, reject함수를 인자로 받는다.
• resolve 함수는 비동기 작업을 성공적으로 완료해 결과를 값으로 반환할 때 호출
• reject 함수는 작업이 실패하여 오류의 원인을 반환할 때 호출
• resolve, reject 의 처리 결과 모두 후속 처리 메소드로 전달한다.

• Promise 객체의 상태에 따라 후속 처리 메소드를 호출하게 된다.
• then() 메소드는 두 개의 콜백 함수를 인자로 받는다.
• 첫 번째 콜백 함수는 resolve함수가 호출되면 호출,
• 두 번재 콜백 함수는 reject함수가 호출되면 호출
• catch() 메소드는 예외(비동기 처리 또는 then 메소드에서 발생한 에러)가 발생하면 호출
• finally() 메소드는 Promise가 처리되면 상태에 상관없이 지정된 콜백 함수가 실행된다.

Async/Await

async

• async함수는 function 앞에 위치하고 해당 함수는 항상 Promise를 반환한다.

await

• 자바스크립트는 await키워드를 만나면 프로미스가 처리될 떄까지 기다린다. 결과는 그 이후 반환된다.

• await은 async 키워드를 사용한 함수에서만 사용이 가능하다.

참조