JavaScript - promise에 대해

promise를 등록해두면, 이후 성공했을 때 반환됨

이미 promise가 성공했는데 등록하면, 바로 반환

 

javascript에 내장된 object

asynchronous operation === 비동기적인 것을 수행할 때 콜백 함수 대신에 유용하게 쓸 수 있는 object

 

두 가지를 잡고 가자😗 (생각하자!)

1. state = 프로세스가 무거운 수행을 하는지, 다 완료해서 성공/실패했는지의 상태를 이해

☞ state: pending → fulfilled or rejected

2. producer / consumer의 차이를 잘 이해하면 된다.

 

1. producer의 입장 code

const promise = new Promise((resolve, reject) => {
	console.log('doing something');
});

// executer 콜백 함수가 바로 실행! (때문에 바로 실행하지 않으려면 주의하면서 짜야함)
// ex. network 통신하는 함수였다면, 성공하자마자 바로 네트워크 통신을 바로 실행

// ↓ producer code
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('gothic');
    }, 2000);
});

2. consumer의 입장 code

※ then, catch, finally를 꼭 기억하자! ※

// 값이 정상적으로 잘 수행이 된다면 then~
promise.then((value) => {
    console.log(value);
});
// 최종적으로 resolve라는 콜백함수를 통해서 전달한 이 값이 value의 파라미터로 전달되어서 들어옴

// error라는 object를 통해서 전달 -> 무언가 에러가 발생했다는 오브젝트 (정확한 error message를 적는 게 좋다)
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
    	reject(new Error('no network'));
    }, 2000);
});

// error는 catch를 이용해서 받아야함 catch를 이용하지 않는다면, Uncaught 메시지가 발생
promise.catch(error => {
	console.log(error);
});

// chaining 
promise
    .then((value) => {
        console.log(value);
    })
    .catch((error) => {
    	console.log(error);
    })
    // 성공/실패와 상관없이 실행되는 것, 때문에 아무런 인자를 받지 않는다!
    // 즉, 성공/실패와 상관없이 어떤 기능을 마지막에 실행하고 싶을 때 사용하면 된다~
    .finally(() => {
    	console.log('finally')
    });

3. promise chaining에 대해 더 알아보자🤔

const fetchNumber = new Promise((resolve, reject) => {
	setTimeout(() => resolve(1), 1000); // 1
});

fetchNumber
	.then(num => num*2) // 2
	.then(num => num*3) // 6
	.then(num => {
    	return new Promise((resolve, reject) => {
        	setTimeout(() => resolve(num - 1), 1000); //5
        });
        })
        .then(num => console.log(num)); // 5 (최종)

→ then은 값을 바로 전달해도 되고, 또 다른 비동기인 promise도 전달할 수 있군!

 

 

끗🤩~~