ES7 Async & Await 본문

2021 프론트 엔드 로드맵 따라가기/JS

ES7 Async & Await

알 수 없는 사용자 2021. 6. 9. 22:54

ES7에 추가된 기능으로 함수 앞에 async 키워드를 붙여 해당 함수가 Promise 객체를 리턴하도록 합니다.

따라서 비동기처리를 좀 더 간결하게 할 수 있습니다.

 

await 키워드는 async 키워드가 붙은 함수 내부에서 Promise 객체 앞에 쓰이며, 해당 Promise 객체가 비동기 작업을 완료할 때 까지 기다립니다.

async function myFunc() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Hello"), 1000);
  }); 
  
  const error = false;

  if (!error) {
    // 해당 promise 객체가 resolve 될 때까지 기다린다.
    const res = await promise;

    return res;
  } else {
    await Promise.reject(new Error("Something went wrong"));
  }
}

myFunc()
  .then(res => console.log(res))
  .catch(err => console.error(err));

async function getUsers() {
  // await response of the fetch call
  const response = await fetch("https://jsonplaceholder.typicode.com/users")

  // Only proceed first promise is resolved
  const data = await response.json();

  // only proceed second promise is resolved
  return data;
}

getUsers()
  .then(user => console.log(user));

 

 

'2021 프론트 엔드 로드맵 따라가기 > JS' 카테고리의 다른 글

Regular Expression in JS, 정규표현식  (0) 2021.06.12
Error Handling in JS  (0) 2021.06.12
ES6 Arrow Function  (0) 2021.06.09
ES6 Fetch API  (0) 2021.06.09
ES6 Promise  (0) 2021.06.09
Comments