참고: https://www.youtube.com/watch?v=Uh8u20MD978&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=17
const f1=()=>{
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve("1st order is completed");
}, 1000);
});
}
const f2=(message)=>{
console.log(message);
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve("2nd order is completed");
// reject(new Error("Error occurred baby~"))
}, 3000);
});
}
const f3=(message)=>{
console.log(message);
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve("3rd order is completed");
}, 2000);
});
}
// f1().then((msg)=>f2(msg)).then((msg)=>f3(msg)).then((msg)=>console.log(msg))
.catch((err)=>console.log(err)).finally(console.log("The end"));
The code above is what I saw in the last blog writing 프로미2. And now I'm gonna make this Promise chain way simpler using async and await. Like I studied, with using await I can get the input parameter of Promise resolve callback function without using then. So I can code like below and this looks much simpler with same result using promise chain above.
//프로미스 체인을 사용하지 않고도 async, await를 사용하여 더 간단하면서 같은 결과를 얻도록 코딩하였다.
async function order(){
let result1=await f1();//await를 사용하면 그 결과로 Promise객체에서 resolve(혹은 reject)함수에 들어간 인자가 반환되는 것을 이 줄과 다음줄을 통 //해 알수있다
let result2=await f2(result1);
let result3=await f3(result2);
console.log(result3);
console.log("The end");
}
order();
//In case error occurred in the middle of the order function, use try, catch phrase like below;
async function order(){
try{
let result1=await f1();//await를 사용하면 그 결과로 Promise객체에서 resolve(혹은 reject)함수에 들어간 인자가 반환되는 것을 이 줄과 다음줄을 통해 알수있다
let result2=await f2(result1);
let result3=await f3(result2);
console.log(result3);
}catch(e){
console.log(e)
}finally{console.log("The end")};
}
order();
// //아래와 같은 Promise.all도 async, await 구문에서 당연히 사용할 수 있다.
// async function order(){
// try{
// let result= await Promise.all([f1(), f2(), f3()]);//이때 f2,f3의 인자에는 별도로 어떤것을 전달해 주지는 않음
// console.log(result);
// }catch(e){
// console.log(e);
// }finally{console.log("The end")};
// }
// order();
'FrontEnd > Javascript' 카테고리의 다른 글
프로토타입을 이용한 객체의 상속 (0) | 2024.02.09 |
---|---|
Class, Class에서의 상속과 생성자 호출 (0) | 2024.02.09 |
async, await (1) | 2024.02.09 |
프로미스(Promise)2 (0) | 2024.02.08 |
Java와 JS의 동기적 비동기 구현방식 (0) | 2024.02.08 |