[JavaScript] Promise의 의미와 Promise 사용법

promise

'약속'이라는 단어로 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 object 
정해진 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행된다면 처리된 결과값을 전달하고, 기능을 수행하다가 문제가 발생한다면 에러를 전달해 줌

 

1. State(상태) : 프로세스가 무거운 기능을 수행하고 있는 중인지, 기능 수행이 완료되어 성공했는지 실패했는지 상태에 대한 이해 pending -> fulfilled or rejected

2. Producer vs Consumer : 우리가 원하는 데이터를 제공하는 사항과 제공된 데이터를 사용하는 것의 차이 

 

새로운 프로미스가 만들어 질 때 executor 라는 함수가 바로 실행이 됨!!

ex) 사용자가 요청하기 전에 바로 네트워크가 실행되어 불필요하게 네트워크가 실행될 수 있음

// 1.Producer
const promise = new Promise((resolve, reject) => {
	// 무거운 작업이나 시간이 걸리는 작업을 비동기적으로 처리하기 좋음
    console.log("dogin something..");
    setTimeout(() => {
    	resolve("성공!")
        //reject(new Error("실패!"))
    }, 2000);
});

// 2.Consumers: then, catch, finally
// then: 프로미스가 정상적으로 수행되어 최종적으로 resolve라는 콜백함수를 통해 전달한 값이 val의 파라미터로 전달
promise
.then((val) => {
	console.log(val); // "성공!"
})
.catch(error => {
    console.log(error) //reject이 발생하여 에러가 발생한다면 "실패!"
})
.finally(() => {
    console.log('finally'); //성공여부와 상관없이 마지막으로 수행함
})
    
// 3.Promise Chaining
const fetchNumber = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
});
    
fetchNumber
.then(num => num * 2)
.then(num => num * 3)
.then(num => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(num - 1), 1000)
    });
})
.then(num => console.log(num)); //2초 뒤 5전달