[35일차 복습 및 정리] JavaScript async, await 사용법

async, await 공부 전 알아야할 Promise 객체 ↓↓↓

blckchainetc.tistory.com/83

[35일차 복습 및 정리] JavaScript Promise 란? 사용법 / Promise.all / .then .catch .finally 정리

 

 

 

----------------------------------------------------------------------------------------------------------------------------------

 

 

  ASYNC  

 

async 가 만들어진 이유 : 콜백함수를 편하게 처리하려고 promise 라는 방식이 나왔지만 생각보다 가독성이 떨어진다해서 비동기 처리를 위해 async 라는 것이 또 만들어졌다. (Callback hell을 해결위해) 

 

 

 

 

 

async 사용법 

함수 앞에 async 만 붙여주면 된다. 

 

 

 

 

 

async function 자동차(){
    return "아반떼";
}

 

return 값을 promise의 객체로 준다.

코드의 수를 줄일 수 있다.  

 

Promise 의 객체이니 promise 함수 then, catch, finally etc를 쓸 수 있다. 

 

 

 

 

 

 

 

 

 

만약 async 없이 그냥 일반 함수라면 결과값은 ↓↓

function 자동차(){
    return "아반떼";
}

 

return 값 = "아반떼" 만 나온다. 

 

 

 

 

 

 

 

일반적인 Promise 구문이라면 ↓↓

function 자동차(){ 
    return new Promise((resolve, reject)=>{
    resolve("아반떼");
    })
}

 

이렇게 많은 코드를 치면서 만들어야 한다. 

 

 

 

 

 

 

 

 

 

--------------------------------------------------Promise의 함수들을 써보기 ------------------------------------------------

 

 

 

 

 

console.log에 나온 promise 객체의 proto 속성을 보면

 

 

 

 

-> catch...finally...then... 등등 사용 가능하다! 

 

 

 

 

 

 

 

 

 

 

async function 자동차(){
    return "아반떼"
}

자동차().then((result)=>{
    console.log(result);
})

자동차() 함수를 실행하고 return 값에 then(fulfilled) 의 값을 result 인자로 넣어라. -> 그 넣은 result 값("아반떼")을 console.log해라 

 

 

 

console.log로 자동차, 자동차(), 자동차("아반떼") 입력해보기 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

async function 자동차(a){                   state     :   result
    return a;                -> Promise { <fulfilled> : undefined } Promise객체로 return
}                                       // 자동차() 인자값 빈 경우 undefined

자동차("소나타").then((result)=>{
    console.log(result);
})

 

 

자동차 함수 인자값(a) 을 무언가 넣고 return a 를 넣으면 ->들어간 인자값을 return 반환해라! 

 

자동차("소나타") 라고 입력하면 인자값 "소나타" 가 입력되어 <fulfilled> : "소나타" 가 되고 해당 fulfilled의 값 then에 의해 result에 담기고 console.log 찍힌다. 

 

 

 

 

 

 

 

 

 

 

------> 여기까지는 모두 Promise 의 state = fulfilled 즉, 성공한 것만 나온 것!

 

console.dir(Promise) 로 들어가서 찾아보면,  .reject 라는 함수가 있다. 

(Promise 객체 안에 바로 사용할 수 있는 method 가 존재 ex) then, catch, finally, reject etc)

 

 

 

 

 

이제 .reject를 사용해서 Promise 객체 state 값을 = rejected로 바꿔서 연습

async function 자동차(name){
    return Promise.reject(name);     //Promise.reject로 수정
}

자동차("소나타").catch((result)=>{     // .catch로 수정
    console.log(result);               
})

state = rejected 를 받을 수 있는 .catch((reuslt)=>{}) 로 수정

 

또는 .then 을 그대로 쓰고 뒤에 .catch를 붙여서 수정

async function 자동차(name){
    return Promise.reject(name);  
}

자동차("소나타").then((result)=>{
    console.log(result);
}).catch((error)=>{
    console.log(error);
})

두 코드 모두 결과값은 같다. 

return Promise.reject(name); 에서 Promise 객체로 반환된 값은 

Promise { <rejected> : "소나타" } 이므로 Promise의 state가 = rejected 임 => .catch 가 실행됨 

 

 

 

 

 

 

 

 

.finally 도 붙여보기

 

async function 자동차(name){
    return Promise.reject(name);  
}

자동차("소나타").then((result)=>{
    console.log(result);
}).catch((error)=>{
    console.log(error);
}).finally(()=>{
    console.log('항상 나오는 finally')
})

 

finally는 역시 항상 promise의 state가 fulfilled or rejected 상관없이 무조건 나온다. 

 

 

 

 

 

 

 

 

 

 

 

 

  AWAIT   

 

* await은 async 함수 선언 안에서만 사용할 수 있다. 

await는 promise와 같은데 사용법의 변화만 있을 뿐이다. 

 

 

 

 

기존의 promise 객체 사용법 ↓

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

자동차("그랜저").then((result)=>{
    console.log(result);
})

 

이걸 10개 만드려고 하면 .then을 10번 계속 반복해야한다. 

 

 

 

 

 

 

 

 

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

async function 자동차2 (){
    const carName = await 자동차('아반떼');
    console.log(carName);
} 

자동차2();

await - resolve가 생성될 때까지 기다리다가 완료되면 result에 완료된 값을 넣어줘.

값 : promise object안에 있는 result값을 동기처럼 코드가 보이도록 

 

 

 

 

 

 

-----------------------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

 

awiat 이 필요한 이유 -> 비동기 처리 방식 가능 

 

 

 

 

일반적인 async 함수 구문 

async function 자동차4(name){
    return name;
}

자동차4("몰라").then((result)=>{
    console.log(result);
})

console.log 결과 : 몰라 

 

 

 

 

 

async 함수에 setTimeout을 넣어보기 (scheduled) 

async function 자동차3(name){
    setTimeout(()=>{
        return name;
    },1000)
}

자동차3("그랜저").then((result)=>{
    console.log(result);
})

1초 뒤 실행하도록 setTime 했지만 기다리는 await 이 없어서 1초뒤 name("그랜저") 값이 return 되기 전 console.log(result) 을 찍게 된다 

이 때 result는 = undefined 값  - 동기방식 

 

 

 

 

 

일반 함수도 setTimeout ㄱㄱ 

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

function 자동차2(){
    const carName = 자동차('아반떼');
    console.log(carName);
} 

자동차2();

자동차2( ) 도 undefined 가 뜬다. 

 

 

 

 

 

 

 

 

 

 

 

위의 쉬운 예 

let a ;

setTimeout(()=>{
    a = 10; 
},2000)

console.log(a); 

 

변수 a 선언 -> 2초 뒤 변수 a에 10을 넣는 setTimeout을 설정 -> 2초가 지나기 전, console.log(a) 찍힘 -> 아직 a는 값이 없는 상태이므로 = undefined가 나옴

 

 

 

 

 

 

 

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

function 자동차list2(){
    const carName10 = 자동차('몰라');
    console.log(carName10);
}

자동차list2();

function 자동차에 setTimeout 1초 뒤 실행이어서 console.log(carName10) 이 먼저 찍히고 그 다음에 resolve(name) = <fulfilled> : "몰라" 라 찍힌다. 그래서 pending 이라고 뜸. 

여기서 setTimeout()을 제거하면 pending -> fulfilled가 된다. 

 

 

 

 

 

 

 

 

setTimeout을 실현시키기 위해서는 async + await 이 필요 

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

async function 자동차2(){                     // async 추가 
    const carName = await 자동차('아반떼');   // await 추가 
    console.log(carName);
} 

자동차2();

이렇게 하면 console.log에 '아반떼' 가 나온다. 

Promise 객체 값으로 주는 함수 앞에서 사용되는 async, 함수 선언 앞에서 사용되는 await.  

 

 

 

 

 

 

 

async + await 을 쓰면  .then 보다 더 간편하게 (?) 이용할 수 있음.  

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

async function 자동차list(){
    const carName1 = await 자동차('아반떼');
    console.log(carName1);                           //1초뒤 실행
    const carName2 = await 자동차('소나타');
    console.log(carName2);                           //아반떼 출력 후 1초 뒤 실행됨
    const carName3 = await 자동차('그랜저');
    console.log(carName3);                           // 소나타 출력 후 1초 뒤 실행됨 
} 

자동차list();

 

 

 

 

 

 

 

 

- > 이게 가능해지고 나서 express가 각광받기 시작했다고 한다. 

 

아직 실전으로 사용하기 전이라 어떻게 적용할지 모르겠다.

직접 구현하게 되면 요 포스팅에 이어서 업데이트를 해봐야겠다@! 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

질문

 

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

async function 자동차2(){
    const carName = await 자동차('아반떼');
    console.log(carName);
} 

자동차2();

 

위의 코드를 하나의 코드로 바꿀 수는 없을까 ??

await은 반드시 함수() 앞에서만, async 는 function 글자 바로 앞에서만 쓸 수 있는지