[JS] Asynchronous : async, await

async

async 함수는 반드시 프로미스를 반환함.

await

await 키워드를 만나면 프라미스가 처리될 때까지 기다림.

문법

async function a(){
  await 비동기 함수();
  ...await한 함수에서 받아온 내용으로 출력할 내용, promise 처리 기다림
}

예시

function fetchItems() {
  return new Promise(function (resolve, reject) {
    //promise를 걸지 않으면 동기적으로 수행되어 items가 undefined가 됨
    setTimeout(function () {
      var items = [1, 2, 3];
      resolve(items);
    }, 3000);
  });
}
async function logItems() {
  var resultItems = await fetchItems();
  //fetchItems가 완료되어야 콘솔 출력 가능해짐
  console.log(resultItems); // [1,2,3]
}
logItems();

실제 HTTP 통신 적용1

fetchItems에서 유저 정보를 받아와 id에 맞는 정보를 출력하는 코드를 작성하라.

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

function fetchTodo() {
  var url = "https://jsonplaceholder.typicode.com/todos/1";
  return fetch(url).then(function (response) {
    return response.json();
  });
}

async function callUserInfo() {
  try {
    const info = await fetchUser();
    if (info.id === 1) {
      const todo = await fetchTodo();
      console.log(todo.title);
    }
  } catch (error) {
    console.log(error);
  }
}

try...catch문으로 예외 처리

실제 HTTP 통신 적용2

function getWord() {
   return axios.get("https://random-word-api.herokuapp.com/word").then((res) => {
     return res.data[0];
   });
 }
async function setWord() {
  const obj = await getWord();//obj
  
  word = String(obj);
  wordDisplay.innerText = word;

  time = 11;
}

참고 : 캡틴 판교 자바스크립트 async와 await