콜백 지옥이라 불리는 지저분한 자바스크립트 코드의 해결책
1. 프로미스
const promise = new Promise((resolve, reject) => {
if(condition)
resolve('성공');
else
reject('실패');
}
promise.then((data) => {
console.log(data)
}).catch((error) => {
console.log(error)
})
- 프로미스: 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체 -> (비동기 코드를 위한 객체이다.)
- 프로미스 객체의 콜백 함수의 로직이 수행이 된후 then을 붙이면 then의 콜백 함수의 로직에 따라 결과를 반환함
- resolve -> 성공시 리턴 값 -> then으로 연결
- reject -> 실패시 리턴 값 -> catch로 연결
- finally -> 성공, 실패 여부 상관없이 로직 실행
- Promise.all([promise1, promise2...]) 모든 프로미스가 완료된후 then 체이닝으로 로직 실행
- Promise.allSettled([promise1, promise2...]) 실패한 프로미스를 추려낼 수 있음
2. async/await
function promise() {
return new Promise((resolve, reject) => {
if(condition)
resolve('성공');
else
reject('실패');
}
}
async function test() {
const data = await promise();
console.log(data);
return data;
}
test().then((data) => {...});
- then 체이닝의 대안으로 나온 문법이다.
- await을 사용하려면 항상 async함수 안에서 사용해야 한다.
- async 함수의 리턴 값은 항상 프로미스 이다.
- async/await 에서 catch 부분을 사용하기 위해선 await을 사용한 부분을 try-catch를 사용하여 에러 처리를 해야한다.