[JavaScript] async & await

async & await 함수란? 

비동기 처리 방식인 콜백 함수와 Promise의 단점을 보완하는 함수

 

async function 함수명() {
  await 비동기_처리_메서드_명();
}

async는 function 앞에 위치합니다. 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙입니다.

 

 

async 

async function f() {
  return 1;
}

f().then(alert); // 1

function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환합니다. Promise가 아닌 값을 반환하더라도 이행 상태(resovled)의 Promise 로 값을 감싸 반환합니다.

 

 

명시적으로 Promise를 반환하는것도 동일합니다.

async function f() {
  return Promise.resolve(1);
}

f().then(alert); // 1

 

 

await 

함수 안에서 await를 만나면 Promise가 처리될 때 까지 기다립니다. 결과는 그 이후에 반영 됩니다.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // Promise가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

Promise가 처리되면 그 결과와 함께 await부분이 실행됩니다. 기다리는 동안 다른 작업을 할 수 없습니다.

 

 

 

API 호출 시 async & await 사용

function fetchUser() {
  var url = 'https://jsonplaceholder.typicode.com/users/1'
  return fetch(url).then(function(response) {
    return response.json();
  });
}

async function logTodoTitle() {
  var user = await fetchUser();
}

 

 

async & await 예외처리

async function logTodoTitle() {
  try {
    var user = await fetchUser();
    if (user.id === 1) {
      var todo = await fetchTodo();
      console.log(todo.title); // delectus aut autem
    }
  } catch (error) {
    console.log(error);
  }
}