[4주차] async/await

2월 11일 자 학습 내용 정리입니다.

 

 

✅ async/await

async/await은 Promise를 활용한 비동기 코드를 보다 간결하게 작성하는 문법으로 Promise와 동일하게 비동기 코드를 동기 코드처럼 작동하게 한다.

 

async function Func() {
    let res = await fetch(url)
    ...
}

 

async 키워드로 선언된 함수 안에 await 키워드가 사용된다.

이때 async 키워드로 선언된 함수는 반드시 Promise를 리턴한다.

하지만 await 키워드가 반드시 Promise를 리턴하는 함수에만 사용되는 것은 아니다.

Promise를 리턴하지 않는 함수의 경우에도 사용은 가능하지만 이 경우 리턴한 데이터는 Promise.resolve()로 감싸진다.

 

await문은 Promise가 resolve(=fulfill)되거나 reject될 때까지 async 함수의 실행을 일시정지하고 Promise가 반환되기를 기다린다.

만약 Promise가 reject되면 await문은 reject된 값을 throw하고 끝내지만 resolve(=fulfill)되면 async 함수를 일시정지한 부분부터 다시 실행해 나간다.

이때 await 문의 반환값은 Promise에서 resolve된 값이다.

 

따라서 이를 Promise와 비교해보면 다음과 같다.

 

// Promise
fetch(url)
  .then(res => res.json())
  .then(data => console.log(data))
  
// async/await
async function Func() {
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
}
Func();

 

Promise의 경우 .then() 메서드를 이용해 체인처럼 엮어나간다.

이와 비교해 async/await의 경우에는 await 키워드를 이용해 .then() 메서드 체인을 연결한 것처럼 순서대로 동작하게 한다.

 

async function Func() {
    let data1 = await fetchData();
    let data2 = await fetchData(data1);
    let data3 = await fetchData(data2);
    
    return data3
}

 

실제 await 키워드의 실행 순서는 .then() 메서드 체인을 연결한 것처럼 순서대로 동작한다.

따라서 동일한 동작을 Promise의 .then() 메서드를 이용하는 것보다 async/await을 사용해 좀 더 간결하게 표현할 수 있다.

 

✔️ 에러처리

Promise를 리턴하는 함수의 경우 에러가 발생하면 catch 메서드를 사용해 에러를 처리한다.

 

// Promise에서의 에러 처리
fetch(url)
  .then(res => ...)
  .catch(err => console.log(err))
  
// try-catch문
async function Func() {
    try {
        let res = await fetch(url);
        let data = await res.json();
    } catch(err) {
        console.log(err);
    }
}

 

async/await 구문에서는 catch 메서드를 사용하지 않고 async 함수에서 try-catch 구문을 사용해도 된다.
여러 개의 Promise를 리턴하는 함수에 대해 개별 에러처리를 하고 싶다면 try-catch 구문을 여러 개 사용할 수 있다.

 

 

🔍 참조

await https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/await