본 자료는 박규하 코치님과 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

비동기 콜백 함수

• 호출부에서 실행 결과를 기다리지 않아도 되는 함수
• 콜백함수란 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수

function asyncFunction(callback) {
  setTimeout(function() {
    callback("Async Hello world");
  }, 16);
}

asyncFunction(function(data) {
  console.log(data);
});

• asyncFunction은 비동기 함수로, setTimeout을 사용하여 16ms 후에 콜백함수를 실행

콜백 지옥

• 콜백 함수를 익명 함수로 전달하는 과정에서 또 다시 콜백 안에 함수 호출이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 말한다.

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 2000);
}
function taskB(a, cb) {
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 2000);
}
function taskC(a, cb) {
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000);
}
taskA(1, 2, (res_a) => {
  taskB(res_a, (res_b) => {
    taskC(res_b, (res_c) => {
      console.log("taskC Result : ", res_c);
	}); 
  });
});

• 콜백 지옥을 해결하는 방법에는 Promise 나 Async를 사용하는 방법이 있습니다.

Promise

• 자바스크립트에서 비동기 처리를 위한 객체
• Promise를 사용하면 비동기 처리 결과를 콜백함수 대신에 직접 다룰 수 있습니다.
• Promise 객체를 생성하고, 비동기 처리를 수행하는 함수를 만들고, Promise 객체의 resolve나 reject함수를 호출하면 됩니다.
• Promise 객체의 then 메소드나 catch 메소드를 사용해서 비동기 처리 결과를 처리할 수 있습니다.
• 메소드 종류
  • then 비동기 작업이 성공적으로 완료된 경우 호출되는 메소드
  • catch 비동기 작업이 실패한 경우 호출되는 메소드
  • finally 비동기 작업의 결과에 상관없이 호출되는 메소드

const promise = new Promise((resolve, reject) => {
  // 비동기 처리를 수행하는 함수
  // 비동기 처리가 완료되면 resolve 함수를 호출합니다.
  resolve("비동기 처리 결과");
});

promise.then((result) => {
  // 비동기 처리 결과를 처리합니다.
  console.log(result);
}).catch((error) => {
  // 에러를 처리합니다.
  console.error(error);
});

Promise를 사용하는 방법

1. Promise 객체를 생성합니다.
2. 비동기 처리를 수행하는 함수를 만듭니다.
3. Promise 객체의 resolve나 reject함수를 호출합니다.
4. Promise 객체의 then 메소드나 catch 메소드를 사용해서 비동기 처리 결과를 처리합니다.

aynce-await

• Promise를 더욱 쉽게 사용할 수 있도록 해주는 문법
• async 함수를 만들고, 함수 내부에서 비동기 처리를 수행하는 코드 앞에 await 키워드를 붙이면 된다.
• await 키워드를 붙인 코드는 Promise 객체를 반환한다.
• async 함수에서 Promise 객체를 반환하면, then 메소드나 catch 메소드를 사용해서 비동기 처리 결과를 처리할 수 있다.

async function asyncFunction() {
  // 비동기 처리를 수행하는 코드
  const result = await Promise.resolve("비동기 처리 결과");
  return result;
}

asyncFunction().then((result) => {
  // 비동기 처리 결과를 처리합니다.
  console.log(result);
}).catch((error) => {
  // 에러를 처리합니다.
  console.error(error);
});

async-await을 사용하는 방법

1. 함수 앞에 async 키워드를 붙인다
2. 함수 내부에서 비동기 처리를 수행하는 코드 앞에 await 키워드를 붙인다.
3. 비동기 처리 결과를 반환한다.

Fetch API

• 기존 XMLHttpRequest를 대체하는 HTTP 요청 API
• Promise를 리턴
• 네트워크 요청 성공 시, Promise는 Response 객체를 resolve한다.
• 네트워크 요청 실패 시, Promise는 에러를 reject한다.