JS : 비동기 처리 & 콜백 공부 III

async & await

async & await 함수는 ES8에서 새롭게 정의된 문법으로, 비동기 처리 함수를 쉽게 정의하고 다룰 수 있게 돕는다. 함수를 비동기로 처리할 수 있는 방법은 1) 콜백, 2) Promise가 있는데, async/await을 통해 위 문법들의 단점을 보완하고 보다 가독성이 좋게 코드를 변환할 수 있다.

 

선언

비동기 처리를 하고자 하는 함수 앞에 async키워드를 설정하고, 해당 함수 내부에 비동기 처리를 해야하는 코드 앞에 await 키워드를 지정하여 실행할 수 있다.

* await을 선언한 비동기 처리 코드는 항상 promise 객체를 반환해야한다

// 1. 일반적인 함수
function getUrl() {
	let response = fetch('API주소');
    if (response.status === 200) return 1;
}

// 2. async&await 사용
async function getUrl() {
	let response = await fetch('API주소');
    if (response.status === 200) return 1;
}

 

예제

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });
  let result = await promise; // promise가 resolve되기 전까지 기다린다. wait until the promise resolves (*)
  alert(result); // "done!"
}

f();

위 예제의 진행 순서는 아래와 같다.

1. f() 함수 실행 (f() 함수는 async로 비동기 처리를 하겠다고 선언됨))

2. promise 함수 실행 (await을 선언했기 때문에 promise가 resolove값을 반환할때까지 다른 함수는 실행 X)

 * await은 promise의 값이 반환되기 전 까지 내 함수의 실행을 일시정지시킨다.

3. promiser가 resolve된 후에 반환값을 result에 할당

 

에러 처리

try ~ catch를 통해 await 이외의 예외처리 시 수행하는 메소드를 지정할 수 있다

sync 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);
  }
}