자바스크립트는 기본적으로 동기 처리이기 때문에 중간에 대량의 데이터를 응답 받거나 대량의 이미지 업로드를 실행한다면 이 실행이 다 끝날 때 까지 뒤의 실행들이 blocking된다. 그래서 실행이 오래 걸리는 실행문들은 비동기로 처리하여 전송을 보내놓고 응답을 받으면 실행되게 한다!
그리고 자바스크립트를 비동기로 처리하기 위해 promise를 사용하는데 promise는 자바스크립트에서 제공하는 비동기를 간편하게 처리하게 하는 object(자바스크립트 내장 object)로 Callback hell을 해결할 수 있음
but return 처리를 해주지 않았을 때, callback hell 처럼 promise hell도 일어날 수 있음
State : pending(operation 수행중,비동기 처리가 아직 수행되지 않은 상태) -> fulfilled(operation 성공) OR rejected(operation 실패)
ex) Promise 예제1
const printNumber = (number) => {
return new Promise((resolve,reject)=> {
setTimeout(() => {
console.log(number);
resolve();
}, Math.floor(Math.random() * 1000));
})
};
const print = () => {
printNumber(1)
.then(() => {
return printNumber(2);
})
.then(() => {
return printNumber(3);
})
}
print(); // 1,2,3이 순서대로 나오게 된다
ex) Promise 예제2
const promise = new Promise((resolve,reject) => {
console.log("Hello");
setTimeout(() =>{
resolve("World"); // 성공적으로 수행
},2000);
})
// Hello가 콘솔창에 나옴
promise.then((message) => {
console.log("hello" + ' ' + message)
})
// 2초 후에 hello World가 콘솔창에 나옴
Producer vs Consumer
const promise = new Promise((resolve,reject) => {
console.log("Hello");
setTimeout(() =>{
resolve("World"); // 성공적으로 수행
},2000);
})
// promise는 class이기 때문에 new라는 키워드를 이용
// resolve,reject를 parameters로 하는 callback 함수
// 새로운 promise가 만들어질 때는 우리가 전달한 executor라는 callback함수가 자동적으로 실행됨(resolve)
**promise.then**((value) => {
console.log(value);
})
});
// then은 promise가 정상적으로 수행되어서 최종적으로 resolve라는 callback함수를 통해서 전달한 값이 value라는 parameter 에 전달됨
// 수행을 실패해서 reject가 나올 경우
const promise = new Promise((resolve,reject)=> {
console.log(“doing something”);
setTimeout(() => {
reject(new Error(“no network”));
},2000);
});
**promise.catch**(error => {
console.log(error);
});
// Error: no network
// **Catch** : 기존 서비스는 그대로 사용하고, 에러는 기록에 남길 수 있다.
// reject(에러 메시지나 에러 객체)성공하든 실패하든 어떤 기능을 마지막으로 수행하고 싶을 때
**promise.finally**(()=> {
console.log(“finally”);
});
// Error: no network
// “finally”