Promise

- 프로미스는 비동기 작업을 편하게 처리할 수 있도록 ES6에 도입된 기능.

- 이전에는 비동기 작업을 끝내고 나서, 어떤 작업을 해야할 때 콜백함수로 처리를 해주었어야 했는데, 그러한 작업들이 많을 경우 여러 콜백함수로 인해 코드가 쉽게 난잡해지게 되었음

=> 이를 해결하기 위해 프로미스가 만들어짐

 

function increaseAndPrint(n, callback) {
  setTimeout(() => {
    const increased = n + 1;
    console.log(increased);
    if (callback) {
      callback(increased);
    }
  }, 1000);
}

increaseAndPrint(0, (n) => {
  increaseAndPrint(n, (n) => {
    increaseAndPrint(n, (n) => {
      increaseAndPrint(n, (n) => {
        increaseAndPrint(n, (n) => {
          console.log("작업~끝!");
        });
      });
    });
  });
});

위는 콜백 지옥 예제 코드임

 

이러한 난잡한 코드를 개선하기 위해 프로미스가 만들어짐.

---

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("result");
  }, 1000);
});

myPromise.then((result) => {
  console.log(result);
});

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error());
  }, 1000);
});

myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((e) => {
    console.error(e);
  });

 

- 매개변수로 넣어주는 resolve는 성공했을때 최종결과를 반환해주는 콜백함수이고, reject는 중간에 문제가 생길 시에 호출되는 콜백함수이다.

- 성공하는 상황에서는 resolve를 사용하고, 실패하는 상황에서는 reject를 사용함

---

 

function increaseAndPrint(n) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const value = n + 1;
      if (value === 5) {
        const error = new Error();
        error.name = "ValueIsfiveError";
        reject(error);
        return;
      }
      console.log(value);
      resolve(value);
    }, 1000);
  });
}

increaseAndPrint(0)
  .then((n) => {
    return increaseAndPrint(n);
  })
  .then((n) => {
    return increaseAndPrint(n);
  })
  .then((n) => {
    return increaseAndPrint(n);
  })
  .then((n) => {
    return increaseAndPrint(n);
  })
  .catch((e) => {
    console.error(e);
  });

 

function increaseAndPrint(n) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const value = n + 1;
      if (value === 5) {
        const error = new Error();
        error.name = "ValueIsfiveError";
        reject(error);
        return;
      }
      console.log(value);
      resolve(value);
    }, 1000);
  });
}

increaseAndPrint(0)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .catch((e) => {
    console.error(e);
  });

- promise를 그대로 반환하고, 파라미터도 동일하기 때문에 파라미터 넣지 않고 함수만 호출해도 됨.

- promise를 사용하면 비동기 작업이 많아져도 코드의 깊이가 깊어지지 않는다.