[JS핵심개념33] 26. async / await

async / await란?

asnyc/await 는 비동기 코드를 작성하는 새로운 방법이다.
async/await는 promise처럼 non-blocking 이다.
비동기 코드의 겉모습과 동작을 좀 더 동기 코드와 유사하게 만들어준다는 것이 가장 큰 장점이다.

async / await을 이용한 비동기요청 처리

await는 async 안에서만 사용 가능하다

async function main(title) {
  let posts = await getPostsByTitle(title);
}

만약 일반 함수 혹은 전역 컨텍스트(window)에서 await를 사용하면 에러가 발생한다. await를 사용하려면 항상 async가 선언된 함수 내부에서 사용해야 한다.

async 함수는 Promise를 리턴한다

async function a() {
    return 1;
}
let result = a(); // Promise {<resolved>: 1}

일반적으로 async / await 는 비동기 함수를 처리하기 위해 사용한다. 하지만, 비동기 처리가 없는 일반적인 함수에 async를 붙이면 리턴해주는 값을 resolve로 감싼 Promise를 리턴해준다.

await는 resolve로 리턴해주는 값을 꺼낸다

async function a() {
    return 1;
}

async function main() {
   let promise = a(); // Promise {<resolved>: 1}
   let value = await a(); // 1
}

async 함수를 실행하면 Promise 객체를 리턴한다. 이 때 만약 await 키워드를 사용하면 내부의 값을 리턴한다. 이 부분을 응용하면 아래와 같이 사용할수 있다.

아래 예제를 보면 getUserById(id).then(user => { ... }) 와 같이 then을 사용하여 블록 안에서 결과(user)를 받고 있다.
이 부분을 await로 대체하면 then 없이도 결과를 받아서 변수에 저장할 수 있다.

const USERS = 'https://jsonplaceholder.typicode.com/users';

function getUserById(id) {
  return fetch(`${USERS}/${id}`)
  .then(res => res.json());
}

function main() {
    getUserById(1).then(user => {
        console.log('user : ', user);
        // ... do something with user data
    });
}

async function main() {
    let user = await getUserById(1);
    console.log(user);

    // ... do something with user data
}

즉, await 키워드가 내포하고 있는 기능은 두 가지로 볼 수 있다.
1. 비동기 함수가 끝날때까지 wating 시킨다.
2. 비동기 함수가 리턴하는 값을 뽑아낸다.

Async / Await이 Callback이나 Promise보다 나은 점

• 코드가 간결해지고, 가독성이 높아진다.
• 응답데이터로 들어오는 변수(관례적으로 많이 사용되는 data, response)를 없앨 수 있다.
• try / catch로 에러를 핸들링할 수 있다.
• error가 어디서 발생했는지 알기 쉽다.