Callback 지옥

• 콜백 함수를 익명 함수로 전달하는 과정이 반복되어
  코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상

  예시

 setTimeout(
  (name) => {
    let coffeeList = name;
    console.log(coffeeList);

    setTimeout(
      (name) => {
        coffeeList += ', ' + name;
        console.log(coffeeList);

        setTimeout(
          (name) => {
            coffeeList += ', ' + name;
            console.log(coffeeList);

            setTimeout(
              (name) => {
                coffeeList += ', ' + name;
                console.log(coffeeList);
              },
              500,
              'Latte',
            );
          },
          500,
          'Mocha',
        );
      },
      500,
      'Americano',
    );
  },
  500,
  'Espresso',
);

• 정상적으로 실행되지만 들여쓰기 수준이 과도하게 깊어져 가독성이 떨어짐

---

Promise (ES6부터 지원)

• axios는 기본적으로 Promise를 지원하는 라이브러리

const url = 'https://koreanjson.com/posts/1';

function getData() {
  return new Promise(function (resolve, reject) {
    axios.get(url).then(function (response) {
      if (response) {
        resolve(response.data);
      }
      reject(new Error('Request is failed'));
    });
  });
}

let result = [];
getData()
  .then(function (data) {
    for (let v of Object.values(data)) {
      result.push(v);
    }
    console.log(result);
  })
  .catch(function (err) {
    console.error(err);
  });

• new 연산자와 함께 호출한 Promise의 인자로 넘겨주는 콜백 함수는 호출할때 바로 실행

• Promise의 콜백함수의 인자 resolve, reject 호출하는 구문이 있을 경우
  둘 중 하나가 실행되기 전까지는 then 또는 catch로 넘어가지 않음

• 비동기 작업이 완료될 때
  resolve 또는 reject를 호출하는 방법으로 비동기 작업의 동기적 표현이 가능해짐

• resolve 성공 했을 때 반환값을 의미

• reject는 실패 했을 경우를 나타냄