[JS] Callback, Promise, Async/await

비동기란?

현재 실행중인 작업과는 별도로 다른 작업을 수행하는 것

Callback이란?

비동기 작업이 완료되면 호출되는 함수

비동기 함수의 매개변수로 함수 객체를 넘기는 기법

Promise란?

자바스크립트에서 비동기 작업(setTimeout, API 요청)을 다루기 위한 객체

1. pending(대기중(작업중))
2. fulfilled(성공)
3. rejected(실패)

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("성공!");
  }, 1000);
}).then(value => {
  console.log(value);
}).catch(err => {
  console.error(err);
}).finally(() => {
  console.log("무조건 실행됨");
});

Async/await란?

• Promise를 대체하는 기능은 아니다.
• function 앞에 async 붙여주고 비동기로 처리되는 부분 앞에 awit만 붙여주면 된다.
• 코드 작성 부분을 프로그래머가 유지보수하게 편하게 보이는 문법만 다르게 해줄 뿐
• async
  • 함수 앞에 async 키워드를 붙여줌으로써, 함수내에서 await를 사용
  • ES2022부터 모듈 스코프(ESM)에서는 파일 최상단에서도 await을 쓸 수 있게 허용
  • 함수 리턴값은 Promse 객체 ⇒ 단순한 값이여도 fulfilled 상태의 객체 반환
• await
  • Promise 비동기 처리가 완료될때 까지 코드 실행을 일시 중지하고 wait

---

콜백 지옥(Callback Hell) 해결 방법

콜백 함수가 중첩되어 코드의 깊이가 깊어지는 현상

• 콜백 지옥은 비동기 작업을 처리할 때 콜백 안에 또 콜백을 계속 중첩해 작성하면서

코드 구조가 깊어지고 가독성이 떨어지는 문제이다.

• 이를 해결하기 위해 자바스크립트에서는 크게 세 가지 접근을 사용하다.

1. Promise

비동기 작업의 성공/실패를 하나의 객체로 관리할 수 있어 then() 체이닝을 통해 순차적으로 작성 가능

1. async/await

Promise를 기반으로 하지만 동기 코드처럼 가능

1. Promise.all

병렬 처리 기법을 사용하면 비동기 작업을 한꺼번에 처리할 수 있어 구조 개선

---

Promise와 Callback의 차이

1. 결과값 사용 범위

callback을 사용하면 콜백 밖에서는 결과값을 알 수 가 없기 때문에 callback안에서만 처리해야 한다.

promise를 사용하면 결과값이 promise 객체에 저장되기 때문에 callback 밖에서도 접근 가능하다.

Callback

function async(callback) {
  var result;
    
  setTimeout(() => {
    result = callback("결과값"); // 1초 뒤 실행
  },1000);
    
  return result; // ❗ setTimeout보다 먼저 실행됨
}

var b = async((res) => {
  return res;
})

console.log(b) // undefined

Promise 객체에 저장되어 있기 때문에 언제든 then 메소드를 사용해서 값을 사용할 수 있다.

var p = new Promise((res, rej) => {
    setTimeout(() => {
      res("a")
    }, 1000)
    
})

var result = p.then(res => {
  return res;
})

console.log(result) // Promise {<fulfilled>: "a"}

result.then(res => {
    console.log(res); // "a"
})

2. 코드 깊이 차이

비동기 로직의 결과(1)를 받아서 다음 비동기 로직을 실행할 때 callback은 점점 깊어져서 가독성이 끔찍

Promise를 사용할 경우 코드가 깊어지지 않는다.

Callback

function async(result, callback) {
  setTimeout(() => {
    callback(result, function (result) {
      console.log(result);
    });
  }, 1000);
}

async(0, function (res, callback) {
  callback(res)
  async(res + 1, function (res, callback) {
    callback(res)
    async(res + 1, function (res, callback) {
      callback(res)
    });
  });
});

// 0
// 1
// 2

Promise 객체에 저장되어 있기 때문에 언제든 then 메소드를 사용해서 값을 사용할 수 있다.

function async(result) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(result);
      resolve(result);
    }, 1000)
  });
}

async(0).then(res => {
  return async(res + 1);
}).then(res => {
  return async(res + 1);
})

// 0
// 1
// 2

---

 

Promise와 Async/await 차이

1. 코드 깊이 차이

Promise을 사용하면 then을 연속적으로 사용하여 코드가 복잡

async/await을 사용하면 비동기 접근 방식을 동기적으로 작성할 수 있다.

2. 에러 처리

Promise을 사용하면 catch() 핸들러를 중간 중간에 명시함으로써 에러를 받아야만 한다.

async/await을 사용하면 try/catch문을 씌우면 된다.

---

병렬 처리

공통

function getApple(){
  return new Promise( (resolve, reject) => {
    setTimeout(() => resolve("apple"), 1000);
  })
}

function getBanana(){
  return new Promise( (resolve, reject) => {
    setTimeout(() => resolve("banana"), 1000);
  })
}

잘못된 예시

async function getFruites() {
  let a = await getApple(); // getApple() 비동기 처리를 요청하고, 요청이 처리될때 까지 기다림 (1초 소요)
  let b = await getBanana(); // getBanana() 비동기 처리를 요청하고, 요청이 처리될때 까지 기다림 (1초 소요)
  console.log(`${a} and ${b}`); // 총 2초 소요
}

올바른 예시

async function getFruites(){

  let getApplePromise = getApple(); // async함수를 미리 논블록킹으로 실행한다. 
  let getBananaPromise = getBanana(); // async함수를 미리 논블록킹으로 실행한다. 
  
  // 이렇게 하면 각각 백단에서 독립적으로 거의 동시에 실행되게 된다.
  console.log(getApplePromise)
  console.log(getBananaPromise)
  
  let a = await getApplePromise; // 위에서 받은 프로미스객체 결과 변수를 await을 통해 꺼낸다.
  let b = await getBananaPromise; // 위에서 받은 프로미스객체 결과 변수를 await을 통해 꺼낸다.
  
  console.log(`${a} and ${b}`); // 본래라면 1초+1초 를 기다려야 하는데, 위에서 1초기다리는 함수를 바로 연속으로 비동기로 불려왔기 때문에, 대충 1.01초만 기다리면 처리된다.
})