[JavaScript] Promise(프로미스) Callback 지옥을 해결하는 방법!

개념정리

Promise : Callback hell 일명 콜백 지옥 현상을 해결할 수 있는 객체이다.

 

💡 Callback hell 일명 콜백 지옥 현상을 해결할 수 있는 객체이다. 

 

---

Promise 사용법

Code

// Callback
const condition = true; // true면 resolve, false면 reject
const promise = new Promise((resolve, reject) => {
    if (condition) {
        resolve('성공');
    } else {
        reject('실패');
    }
});

// 다른 코드가 들어갈 수 있음

// Promise
promise
    .then(value => {
        console.log(value); // 성공(resolve)한 경우 실행
    })
    .catch(error => {
        console.error(error); // 실패(reject)한 경우 실행
    })
    .finally(() => { // 끝나고 무조건 실행
        console.log('무조건');
    });

Console

성공
무조건

 

💡 Promise에서 resolve가 호출되면 then이 실행되고, reject가 호출되면 catch가 실행된다.
finally는 resolve나 reject든지 Promise가 끝나면 실행된다.

• resolve는 성공!
• reject는 실패(Error).

 

---

Promise 반복 사용법 (Callback이 여러개일 경우)

Code

// Callback
const condition = true; // true면 resolve, false면 reject
const promise = new Promise((resolve, reject) => {
    if (condition) {
        resolve('성공');
    } else {
        reject('실패');
    }
});

// Promise then return
promise
    .then(value => {
        return new Promise((resolve, reject) => {
            resolve(value);
        });
    })
    .then(value2 => {
        console.log(value2);
        return new Promise((resolve, reject) => {
            resolve(value2);
        });
    })
    .then(value3 => {
        console.log(value3);
    })
    .catch(error => {
        console.error(error);
    });

Console

성공
성공

Order

1. 첫번 째 then에서 value를 resolve 하면
2. 두번 째 then에서 value2로 첫번째에 Promise에서 보낸 value 값을 받아서 value2를 resolve 하면
3. 세번 째 then에서 value2의 값을 console.log로 출력

 

💡 then에서 Promise(new Promise)를 만들어 return 해야 다음 then에서 resolve나 reject를 받을 수 있다.

 

---

Promise 여러개를 한 번에 실행

Code

// Promise simultaneous start
const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
Promise.all([promise1, promise2])
    .then(value => {
        console.log(value); // ['성공1', '성공2'];
    })
    .catch(err => {
        console.error(err);
    });

Console

[ '성공1', '성공2' ]

Order

1. promise1, 2를 만들어서 즉시 resolve를 반환하는 Promise를 생성한다.
2. Promise.all에서 모두 promise가 끝날 때 까지 기다렸다가
3. then에서 value의 값을 console.log로 출력

 

💡 Promise.all을 사용하면, 주어진 모든 Promise가 끝날 때까지 기다린다.

Error 처리

만약 주어진 Promise 중에서 하나이상이 오류가 발상해게 된다면,

첫 번째의 오류가 발생한 오류의 message를 Promise.all에서 뱉어낸다.

 

---