async/await

자바스크립트는 싱글 스레드 프로그래밍 언어이기 때문에 멀티 작업을 하기 위해 비동기 처리 기반 방식이 자주 쓰인다.

비동기 처리는 백그라운드로 동작되므로 그 결과가 언제 반환되는지 알 수 없다

그렇기에 완료되면 결과를 받아 처리하기 위해 사용되는 대표적인 방법이 바로 콜백 함수랑 프로미스 객체이다.

async / await 기본 사용법

function 키워드 앞에 async 를 붙여주고 비동기로 처리되는 부분 앞에 await 를 붙여준다

비동기 처리를 동기처럼 동작할 수 있도록 구현해주는 것인데, async/await를 사용하면 프로미스의 then/catch/finally 후속 처리 메서드에 콜백 함수를 전달해서 비동기 처리 결과를 후속 처리할 필요 없이 마치 동기처럼 프로미스를 사용할 수 있다.

const fetch = require('node-fetch');

async function fetchTodo() {
  const url = '<https://jsonplaceholder.typicode.com/todos/1>';

  const response = await fetch(url);
  const todo = await response.json();
  console.log(todo);
  // {userId: 1, id: 1, title: 'delectus aut autem', completed: false}
}

fetchTodo();

async 키워드

await를 사용하기 위해 async function 정의가 되어 있어야 한다.

async function func1() {
    const res = await fetch(url); 
    const data = await res.json(); 
}
func1();

const func2 = async () => {
    const res = await fetch(url); 
    const data = await res.json(); 
}
func2();

async function에서는 어떤 값을 리턴하든 무조건 프로미스 객체로 감싸져서 반환된다.

await 키워드

await 키워드는 promise.then() 보다 좀 더 세련되게 비동기 처리의 결과값을 얻을 수 있도록 해주는 문법이다.

fetch(url)
    .then(res => res.json()) 
    .then(data => {
      console.log(data);
    })

await 키워드를 사용하면

async function func() {
    const res = await fetch(url); 
    const data = await res.json(); 
    console.log(data);
}
func();

가독성을 높일 수가 있다.