[JavaScript] 비동기 작업 처리하기 async/await

 

 

async

- 어떤 함수를 비동기 함수로 만들어주는 키워드

- 함수가 프로미스를 반환하도록 변환해주는 그런 키워드

 

 

 

- 객체를 그대로 반환하는 함수가 아닌,

- 객체를 결과값으로 갖는 새로운  프로미스를 반환하는 함수로 변환됨

 

 

 

 

- 결과로 Promise 반환

 

 

- 애초에 promise를 반환하고 있는 비동기 함수라면

- async 키워드가 별다른 일을 하지 않고 그냥 프로미스가 반환되도록 둠

- 즉, 변화 없음

 

 

 

 

- 시간 설정을 두고 싶다면 setTimeout을 사용할 수 있음

 

 

 

 

 

- id와 name 값이 잘 전달됐음

- 완료 상태임

 

 

 

 

 

 await

 

- async 함수 내부에서만 사용이 가능한 키워드

- async가 없는 함수에서 사용하면 에러 발생 

- 비동기 함수가 다 처리되기를 기다리는 역할을 함

 

 

- 프로미스의 결과값을 사용할 때 원래라면 아래와 같이 써야했음

 

 

 

 

하지만 await를 사용하면 아래와 같이 간단하게 쓸 수 있음

 

- 프로미스가 종료되길 기다렸다가 결과값을 변수에 저장해줌 

 

 

 

시간적 Delay 주기(응용)

function getData() {
    return {
        name: 'alice',
        id: 'good',
    };
}

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function printData() {
    await delay(3000); // 3000ms 지연
    const data = getData();
    console.log(data);
}

printData();

 

- async/await 만으로는 시간적 delay 주기가 불가능하므로 setTimeout을 함께 사용해야 함 

 

 

출처 ) 인프런 : 이정환 - 한입 크기로 잘라 먹는 리액트 강의