Javascript

Promise

🔧 JS에서 함수를 호출했을 때 그 코드가 실행 되는 동안, 함수 밖의 다른 코드도 함께 실행이 되어야한다.

• Promise는 이런 비동기적인 작업이 잘 처리되도록 해준다.
• Promise 객체는 ES6에서 등장했다.

console.log(Promise);
//[Function: Promise]

장점👍🏻

• 비동기 작업이 많아져도 코드의 깊이가 깊어지지 않는다.

단점👎🏻

• 에러가 발생했을 때 어디서 에러가 발생했는지 알 수 없다.
• 특정 조건에 따라 분기를 나누는 작업이 어렵다.
  ➣ async-await으로 해결할 수 있음

---

1. 생성자로 프로미스 객체 만들기

• 생성자의 인자로 executor라는 함수를 이용한다.

new Promise(/* executor 함수가 들어올 자리 */);

new Promise(/* executor */ (resolve,reject) => {});

🔧 executor 함수는 resolve와 reject를 인자로 가진다.

• (resove, reject) => { ... }
• resolve와 reject는 함수다.

---

🤓 대기, 이행, 거부 상태

🔧 생성자를 통해서 프로미스 객체를 만드는 순간 pending( 대기 ) 상태에 빠진다.

🔧 executor 함수 인자인 resolve 함수를 실행하면, fulfilled ( 이행 ) 상태가 된다.

🔧 reject 함수를 실행하면 , rejected ( 거부 ) 상태가 된다.

(이미지 출처 : 패스트캠퍼스 Javascript 이웅재 강사님)

비동기 상황이 일어나기 전까진 pending 상태에 있고, 그 상황이 잘 이행되면 resolve() 함수를 호출하고 이행되지 않으면 reject() 함수를 호출한다고 생각하면 된다.

const p = new Promise((resolve,reject) => {
    /* pending 상태 */
    setTimeout(()=>{
        resolve(); /* fullfilled 상태 */
    },1000);    // 1초 후에 resolve 호출
})

// resolve 가 호출되면 then 함수가 실행이 된다.
p.then(()=>{
    // callback
  	console.log('1000ms 후에 fullfilled 됩니다.');
  	
  //출력: '1000ms 후에 fullfilled 됩니다.'
})

---

• 실무에서는 객체를 사용할 곳에서 만들어서 사용한 뒤, then 과 엮어준다.
• 대규모 작업을 할 때는 아래와 같이 해줘야 한다.

//then 을 설정하는 시점을 정확히 하고, 함수의 실행과 동시에 프로미스 객체를 만들면서
//pending이 시작되도록 하기 위해 프로미스 객체를 생성하면서 리턴하는 함수 p를 만들어준다.
//함수 p의 실행과 동시에 then 을 설정한다.

function p(){
    return new Promise((resolve,reject) => {
        // pending
        setTimeout(() => {
            resolve();  //fullfilled
        },1000);
    });
}

p().then(() => {
    console.log('1000ms 후에 fullfilled 됩니다.');
});

---

• receted 되는 시점에 p.catch 안에 설정한 callback 함수가 실행된다.

function p(){
    return new Promise((resolve,reject) => {
        // pending
        setTimeout(() => {
            reject();  //rejected
        },1000);
    });
}

p()
		// resolve 됐을 때 then 
    .then(() => {
        console.log('1000ms 후에 fullfilled 됩니다.');
    })
		// reject 됐을 때 catch
    .catch(() => {
        console.log('1000ms 후에 rejected 됩니다.');
    });

// 출력 : 1000ms 후에 rejected 됩니다.

---

resolve 함수 & reject 에 인자 넣기

• resolve 함수에 인자를 넣어서 실행하면, then의 callback 함수의 인자로 받을 수 있음
• reject 함수에 인자를 넣어서 실행하면, catch의 callback 함수의 인자로 받을 수 있음
• 🔥 데이터를 서버에서 받아와서 처리하기에 좋다!

function p(){
    return new Promise((resolve,reject) => {
        // pending
        setTimeout(() => {
            resolve('hello');  //then으로 인자를 보냄
        },1000);
    });
}

p()
    .then((message) => {
        console.log('1000ms 후에 fullfilled 됩니다.',message);
    })
    .catch(() => {
        console.log('1000ms 후에 rejected 됩니다.');
    });


//에러 객체 보내기
function p(){
    return new Promise((resolve,reject) => {
        // pending
        setTimeout(() => {
            reject(new Error('Network Error'));  //then으로 인자를 보냄
        },1000);
    });
}

p()
    .then((message) => {
        console.log('1000ms 후에 fullfilled 됩니다.',message);
    })
    .catch((error) => {
        console.log('1000ms 후에 rejected 됩니다.', error);
    });

---

finally 함수

• fullfilled 되거나 rejected 된 후에 최종적으로 실행할 것이 있다면, .finally() 를 설정하고, 함수를 인자로 넣어주면 된다.

function p(){
    return new Promise((resolve,reject) => {
        // pending
        setTimeout(() => {
            reject(new Error('Network Error'));  //then으로 인자를 보냄
        },1000);
    });
}

p()
    .then((message) => {
        console.log('1000ms 후에 fullfilled 됩니다.',message);
    })
    .catch((error) => {
        console.log('1000ms 후에 rejected 됩니다.', error);
    })
    // 추가적으로 작업해줄 것이 있으면 설정해준다.
    .finally(()=>{
        console.log('end');
    });

---

promise 없이 비동기 작업 처리하기 : callback

• promise가 없을 땐 callback hell에 빠지곤 했다고 한다. . .🤬

function c(callback){
    setTimeout(()=>{
        callback();
    },1000);
}

c(()=>{
    console.log('1000ms 후에 callback 함수가 실행됩니다.');
})

// 😈 callback hell : 점점 중첩이 된다.
c(()=>{
    c(()=>{
        c(()=>{
            console.log('1000ms 후에 callback 함수가 실행됩니다.');
        })
    })
})

---

// [5초동안 출력하기]
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('작업 끝!');
        });
      });
    });
  });
});

//출력 :
// 1
// 2
// 3
// 4
// 5
// 작업 끝!

---

promise 로 비동기 작업 처리하기

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

//1초 뒤
p().then(() => {
    return p();
})
//2초 뒤 : 화살표함수라 return과 중괄호 생략
.then(() => p())
//3초 뒤
.then(p)
//4초 뒤
.then(()=>{
    console.log('4000ms 후에 fullfilled 됩니다.');
})

// 중첩이 되지않고, 순차적으로 chaining 된다. 👍🏻

---

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)
.then(increaseAndPrint)
.catch(e => {
  console.log(e);
});

//출력 :
// 1
// 2
// 3
// 4
// ValueIsFiveError

---

2. Promise.resolve()

Promise.resolve(/* value */);

• value에는 프로미스 객체가 오거나, 어떤 값을 넣어서 then 메소드를 실행시킬 수 있다.
• 만약 프로미스 객체인지, 데이터 객체인지 모를 때 Promise.resolve의 인자로 한번 넘기면 알아서 처리되기 때문에 유용하다!

Promise.resolve(new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('doyeon');
    },1000);
})).then((data)=>{
    console.log(
        '프로미스 객체인 경우, resolve 된 결과를 받아서 then이 실행된다.',
        data
    );
});

Promise.resolve('woong').then(data =>{
    console.log(
        '프로미스 객체가 아닌 경우, then 메소드가 없기때문에 fullfilled 됩니다.',
        data
    );
});

---

3. Promise.reject()

Promise.reject(/* value */);

• Promise.resolve() 와 동일하다.
• 거의 드물지만 받자마자 에러 처리를 해야할 때 유용하다.

Promise.reject(new Error('reason'))
    .then(error => {})
    .catch(error =>{
    console.log(error);
});

---

4. Promise.all()

• 여러개의 프로미스 객체를 배열로 만들어 인자로 넣고, Promise.all을 실행한다.
• 배열의 모든 프로미스 객체들이 fulfilled 되었을 때, then의 함수가 실행된다.
• 프로미스 객체들의 resolve 인자값이 배열 형태로 then의 함수의 인자로 들어온다.

function p(ms){
    return new Promise((resolve,reject) => {
        setTimeout(()=>{
            resolve(ms);
            console.log(ms,'ms 후에 실행됩니다.');
        },ms);
    });
}

Promise.all([p(1000), p(2000), p(3000)]).then((messages)=>{
    // resolve의 인자가 배열 처리 되어 then의 인자로 들어옴 (messages)
    console.log('모두 fullfilled 된 이후에 실행됩니다.',messages)
})

출력:
1000 ms 후에 실행됩니다.
2000 ms 후에 실행됩니다.
3000 ms 후에 실행됩니다.
모두 fullfilled 된 이후에 실행됩니다. [ 1000, 2000, 3000 ]

---

5. Promise.race()

• Promise.all 은 모든 프로미스 객체가 fullfilled 되어야 실행됐다면, Promise.race는 가장 먼저 fullfilled 된 것으로 then의 함수가 실행된다.
• then의 함수 인자로 가장 먼저 fullfilled 된 프로미스 객체의 resolve 인자값이 들어온다.

function p(ms){
    return new Promise((resolve,reject) => {
        setTimeout(()=>{
            resolve(ms);
            console.log(ms,'ms 후에 실행됩니다.');
        },ms);
    });
}

Promise.race([p(1000), p(2000), p(3000)]).then((messages)=>{
    // 가장 빨리 실행된 resolve(1000)의 인자가 배열 처리 되어 then의 인자로 들어옴 (messages)
    console.log('가장 빠른 하나가 fullfilled 된 이후에 실행됩니다.',messages)
})