기본 개념
자바스크립트의 내장 객체로써, 정해진 장시간의 기능을 수행하고 나서 정상적으로 완료됐다면 성공의 메시지와 함께 처리된 결과값을 전달해주고, 만약 기능을 수행하다가 예상치 못한 문제가 발생했다면 에러를 전달한다.
언제 사용하는가
주로 비동기!!! 적인 작업을 수행할 때, 특히 무거운 프로세스(네트워크에서 데이터를 받아오거나 파일을 읽는 작업)에서 활용된다. 그리고 비동기 처리에서 활용되는 콜백함수를 대신하여 사용할 수 있다.
promise 개념의 중요한 두가지 포인트
const promise = new Promise((resolve, reject)=>{
console.log('doing something..');
setTimeout(()=>{
resolve('son')
},5000)
})
/*
Promise 생성자는 executor 콜백함수를 받는데
executor는 또다시 두가지의 콜백함수를 받는다.
기능을 정상적으로 수행해서 마지막에 최종적으로 전달하는 resolve
기능을 수행하다가 중간에 문제가 생기면 호출하는 reject
*/
// 위 코드와 이어져 있어야 한다.
promise
.then((value) => {
console.log(value);
/* resolve 받아오면 그대로 실행하고
reject 받아오면 에러(에러 이름을 명시)가 발생한다.*/
})
.catch(error=>{
console.log(error) // 에러일때 해당 코드를 실행
})
/*코드 구조에 대한 설명
.then 뒤에 어떻게 .catch 를 바로 쓸 수 있냐면
then을 실행하면 리턴값으로 다시 promise가 나오기 때문에 이어서 .catch 구문을 사용할 수 있다.
*/
.finally(()=>{
console.log('byungjin') // 성공, 실패 상관없이 무조건 맨마지막에 실행됨
})
const fetchNumber = new Promise((resolve, reject) => {
console.log('loading');
setTimeout(() => {
resolve(1);
}, 1000);
});
fetchNumber
.then((num) => num + 1)
.then((num) => {
// 비동기 안에 비동기가 있는 경우 리턴값으로 promise를 전달할 수도 있다.
return Promise((resolve, reject) => {
setTimeout(() => {
resolve(num * 2);
}, 1000);
});
})
.then((num) => {
console.log(num);
});
const first = () =>
new Promise((resolve, reject) => {
setTimeout(resolve('손'), 1000);
});
const second = (first) =>
new Promise((resolve, reject) => {
setTimeout(resolve(`${first} 병`), 1000);
});
const last = (second) =>
new Promise((resolve, reject) => {
setTimeout(resolve(`${second} 진`), 1000);
});
// 프로미스 체인
first() //
.then(second) // 받아오는 인자와 넘겨주는 인자가 같다면 생략가능하다.
.then(last)
.then(console.log);// '손 병 진' 이라는 값을 출력
const first = () =>
new Promise((resolve, reject) => {
setTimeout(resolve('손'), 1000);
});
const second = (first) =>
new Promise((resolve, reject) => {
setTimeout(reject(`${first} 병`), 1000); // resolve 를 reject 로 변경
});
const last = (second) =>
new Promise((resolve, reject) => {
setTimeout(resolve(`${second} 진`), 1000);
});
// .catch 구문을 활용하여 잡아주거나 에러시 발생할 코드를 설정해준다.
first() //
.then(second)
.catch((error) => {
return '후';
})
.then(last)
.then(console.log); // '후 진' 출력