본문 바로가기

FrontEnd/Javascript

async, await 2

참고: 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