Promise
를 더 간결하고 간편하고, 동기적으로 실행되는 것처럼 보이게 만들어주는 것.
새로운 것이 추가된 것이 아니라, 기존에 존재하는 Promise
위에 조금 더 간편한 API를 제공한다.
깔끔하게 Promise
를 사용할 수 있는 방법, 그렇다고 항상 Promise
가 나쁘고 async
, await
로 대체해서 사용해야 한다는 것은 아님!!
Promise
를 유지해서 써야 맞는 경우가 있고 async
, await
로 변환해서 써야 깔끔해지는 경우가 있음.
( -> 프로젝트 해보면서 감 잡자!!)
Promise
안에는 resolve
나 reject
로 완료를 해줘야 한다. 아니면 Promise state
가 penging
이고, 결과는 undefined
됨.
📍
Promise
를 chaining
promise then, promise then …..
=>이런식으로 chining을 계속하게 되면 코드가 난잡해질 수 있다~~!
이런 것 위에 조금 더 간편한 API로async
과await
를 사용하면 동기식으로 코드를 순서대로 작성하는 것처럼 간편하게 코드를 작성할 수 있게 도와준다.
✨ syntactic sugar : 기존에 존재하는 것 위 or 기존에 존재하는 것을 감싸서 우리가 조금 더 간편하게 쓸 수 있는 API를 제공하는 것
function sleep(ms){
return new Promise(resolve => setTimeout(resolve, ms));
}
async function process() {
console.log('good night');
await sleep(1000);
console.log(('good morning');
}
process();
good night
// 1초뒤
good morning
📍
async
-await
문법을 사용할 때는!function
앞 부분에async
,
Promise
앞부분에await
적어주기~!
그러면Promise
를 기다리는 것을.then
으로 안해도 되고 그냥await
로 기다려 줄 수 있음.
function sleep(ms){
return new Promise(resolve => setTimeout(resolve, ms));
}
async function process() {
console.log('good night');
await sleep(1000);
console.log('good morning');
return true;
}
process().then(value=>{
console.log(value);
});
good night
// 1초뒤
good morning
true
📍
async
를 사용하게 된다면 함수의 결과물은Promise
를 반환하게 된다.
function sleep(ms){
return new Promise(resolve => setTimeout(resolve, ms));
}
async function makeError(){
await sleep(1000);
const error = new Error();
throw error;
}
// error 잡기
async function process(){
try{
await makeError();
} catch (e){
console.error(e)
}
}
process();
// 1초뒤
Error
📍
Error
발생 :throw
Error
잡기 :try-catch
문 사용