동기, 비동기, 콜백함수 그리고 Promise

관련 면접질문

• Callback 패턴, 문제점
• Promise, callback의 차이점 ? 각각 장단점 ?
• promise란?
• Promise.all은 언제 쓰임?
• async/await와 promise의 차이는 ?

---

 

동기

위에서 아래로 순서대로 실행되는 흐름

각 라인마다 실행되고 완료될 때까지 blocking

 

비동기

실행 중인 코드가 완료되지 않아도 다음 코드를 실행함

비동기처리가 필요한 이유 - 싱글스레드는 여러 task를 동시에 할 수 없으므로, 비동기적으로 task를 처리해 오래걸리는 작업을 기다리지 않고 다음 작업을 수행함. non-blocking

실행 순서가 보장되지 않는다.

비동기를 처리하기 위해 callback 패턴을 사용한다.

 

콜백함수

매개변수로 함수를 받거나 인자로 전달되는 함수

매개변수로 함수을 받는 함수 === High order function

😵 콜백지옥의 예시

상품정보를 보여주는 페이지가 있을 때 필요한 정보가 api하나에 묶여있으면 좋은데,,,

각각 api가 나뉘어져있다면 한 페이지에서 여러 api를 보내주어야하는 경우가 있다.

여기서 페이지의 id를 갖고 각 다음 요청을 보내야하는데 비동기요청은 순서가 보장되지 않으므로 콜백패턴으로 해당 문제를 해결했었다.

이전보다 더욱 깔끔하게 비동기요청을 핸들링할 수 있도록, 비동기처리를 위한 객체인 Promsie가 등장했다.

 

Promise

Promise는 클래스고 사용하기 위해선 인스턴스화 하여 객체를 생성해야한다 - using new

Promise는 state, resolve, reject 함수의 이해가 필요하다.

state

• pending : resolve, reject할지 결정 전인 상태
• fullfilled : 요청이 성공적으로 완료된 상태
• rejected : 요청이 실패한 상태

resolve : promise를 이행

reject : promise를 거부

한 번에 하나의 resolve, reject의 결과만 반환된다.

아래의 경우는 첫 resolve로 promise의 상태가 결정되어 해당 promise는 fullfiled상태가 된다. 따라서 두번째 reject는 의미없다

만약 reject된 경우 첫번째 콜백으로만 결과를 전달받게되면 에러가 발생하는데 catch 를 통해 에러를 핸들링할 수 있다.

let promise = new Promise((resolve, reject) => {
    resolve('1') //이게 사용되지 않으면 마지막라인 에러발생
    reject('2') // reject되므로 catch로 에러 핸들링
})

promise.then(result => console.log(result));// -> 1
promise.then(result => console.log(result)).catch(error => console.log(error)); // 에러핸들링 

p.then(onFulfilled[, onRejected]);

promise의 결과는 .then 메소드로 확인할 수 있는데, 해당 메소드도 2가지의 콜백을 전달받는다.

첫째 콜백은 resolve로 인해 결정된 상태의 결과를 전달받는 함수, 두번째는 reject의 경우다.

onFulfilled 는 promise에 대해 resolve로 전달된 인자가 존재하면 전달된 인자를 받는 함수로써 사용된다.

 

chaining

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve(1);
    }, 1000);
});

promise
    .then(function(first) {
      console.log('first', first);
      return 2;
    })
    .then(function(second) { 
        console.log('second', second);

        return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(3);
        }, 1000);
    });
    })
    .then(function(third) {
        console.log('third', third);
    });
//1초뒤
//1
//2
//1초뒤
//3

then은 위에서 보듯이 resolve, reject 콜백을 전달받는다라고 했는데 onFulfilled 는 이행되는 결과값이 resolve로 되었는지, return으로 인한 값인지에 따라 함수 또는 값으로 사용할 수 있다.

위의 코드에서 첫번째 then의 인자는 함수로써 상단 Promise의 resolve의 값인 1을 first로 받는다.

여기서 return된 value는 체이닝된 then의 second로 전달되고 바로 로그가 찍힌다.

그 다음 promise 객체를 생성해 1초뒤 resolve하여 마지막인 third가 1초뒤 수행된다.

 

Promise는 두개로 나뉘어진 큐 중 microTask에서 핸들링된다.

우선순위는 micro > task 순서이다

promise는 비동기처리를 위한 객체고 상태를 나타내는 3가지 (pending, fullfiled, rejected)가 있고 이 상태는 promise의 callback인 resolve, reject함수의 호출여부에 따라 결정된다.

 

👉 async await와 관련키워드

• 제너레이터
• 이터레이터
• 이터레이터 obj