21.04.30 async

콜백지옥을 해결하기 위해 Promise가 나왔지만 이것도 가독성이 떨어져서 async라는것을 만들었다

 

1. return값이 Promise객체로 온다.

 

{state : ? result : ?}

return 안에 있는 값들은 Promise 객체 안에 있는 result 값 안에 들어간다.

 

async function 자동차(name){
    return Promise.resolve(name);           //result로 값이 가고
    //return Promise.reject(name);          // error로 값이 간다.
}

자동차('아반떼').then(result=>{
    console.log("result = ",result);
}).catch((error)=>{
    console.log("error = ",error);
}).finally(()=>{
    console.log('end');
})

// await
function 자동차(name){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(name);
        },1500);
    })
}

// 기존에 했던 Promise 객체 사용법

자동차('아반떼').then((result)=>{
    console.log(result);
    return 자동차('소나타');
}).then((result)=>{
    console.log(result);
    return 자동차('그랜저');
}).then((result)=>{
    console.log(result);
});


// async - 안에서 await 명령어
async function 자동차리스트(){
    const Carname = await 자동차('아반떼');      // 3초동안 기다리다가 함수가 진행되는걸 기다리다가 완료되면 result에 값을 집어넣는다
    console.log(Carname);                       // console.log가 3초후에 찍혔다
    const Carname2 = await 자동차('소나타');      
    console.log(Carname2);
    const Carname3 = await 자동차('그랜저');      
    console.log(Carname3);
}
자동차리스트();

결과

(3초 후) 아반떼

(3초 후) 소나타

(3초 후) 그랜저 

 

 

 

2. 동기 비동기 차이 [await]

function 자동차(name){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(name);
        },1500);
    })
}

// async - 안에서 await 명령어
async function 자동차리스트(){
    const Carname = await 자동차('아반떼');      // 3초동안 기다리다가 함수가 진행되는걸 기다리다가 완료되면 result에 값을 집어넣는다
    console.log(Carname);                       // console.log가 3초후에 찍혔다
}
자동차리스트();



// 동기로 처리됨 - 값이 3초가 되기도 전에 들어가서 undefined라고 뜸
function 자동차리스트2(){
    const Carname = 자동차('아반떼');   //자동차 함수라서 3초 후에 결과값을 가져온다.
    console.log(Carname);       // 함수 호출하면 실행이 바로 됨
}
/*
56실행 58실행
3초후 57 실행
*/

 

 

결과 :

자동차리스트( ); 는 아반떼가 찍히고

자동차리스트2( ); 는 undefined가 찍힌다

-> pending (아직 콜백함수가 실행이 안됐다는 뜻) 이 뜬다.