[자바스크립트] async-await 비동기처리

박은정·2022년 2월 17일
0

자바스크립트

목록 보기
19/25
post-thumbnail

참고내용

async await

ES2017부터 async await 키워드를 사용한 새로운 프로미스 작업 방식이 가능해졌습니다.

프로미스

깃허브 API로 특정 깃허브 사용자에 대한 정보를 가져와서 콘솔에 찍어본다면 아래와 같이 작성할 수 있다
이전에 정리한 내용을 참고하면 될 것 같다

fetch("https://api.github.com/users/eunjeong-97')
      .then(response => return response.json()) // 응답을 json형태로 반환
      .then(response => console.log(response)).catch(error => console.log(error)); // 성공사면 데이터 콘솔로 출력하고 실패하면 오류를 콘솔로 출력

비교

function walk(amount) {
  return new Promise((resolve, reject) => {
    if (amount < 500) reject('the value is too small');
    setTimeout(() => resolve(`you walk for ${amount}ms`), amount);
  });
}

// then메시드 활용
walk(1000).then(res => {
  console.log(res);
  return walk(500);
}).then(res => {
  console.log(res);
  return walk(700);
}).then(res => {
  console.log(res);
  return walk(800);
}).then(res => {
  console.log(res);
  return walk(100);
}).then(res => {
  console.log(res);
  return walk(400);
}).then(res => {
  console.log(res);
  return walk(600);
})

// async await 키워드를 사용한 비동기 함수 선언
async function go() {
  const res = await walk(500);
  console.log(res);
  const res2 = await walk(900);
  console.log(res2);
  const res3 = await walk(500);
  console.log(res3);
  const res4 = await walk(500);
  console.log(res4);
  const res5 = await walk(500);
  console.log(res5);
  console.log('finished');
}

go();
  • 비동기 함수를 만들려면 함수 앞에 async 키워드를 넣어야 한다

  • 해당 키워드는 자바스크립트에게 항상 프로미스를 반환하도록 지시한다

  • 비동기 함수 내에서 프로미스가 아닌 값을 반환하게 작성하면 자바스크립트가 해당 값을 자동으로 프로미스를 감싼 후에 반환한다

  • await 키워드는 비동기 함수 내에서만 작동한다 : 만약 비동기 함수가 아닌 곳에서 await 키워드를 사룡하려면 Syntax Error가 발생된다

  • 이름에서 알 수 있듯이 await 키워드는 프로미스가 결과를 반환할 때까지 기다리도록 자바스크립트에 지시한다

정리

프로젝트를 하다보면 로직의 순서대로 실행되어야 하는 경우가 있는데, 이 때 두가지의 비동기처리를 할 수 있습니다.
then 메서드를 활용하는 프로미스와 일명 async-await키워드입니다.
기존에는 프로미스를 통해 비동기방식을 처리했지만, 최근에는 가독성이 더 좋은 async-await 방식을 선호하는 경향이 있습니다.

async함수 안에서는 자바스크립트에서 항상 프로미스를 반환하도록 하기 때문에 프로미스가 아닌 값을 반환하게 작성을 해도 자동으로 프로미스로 감싼 후에 반환합니다.
그리고 await키워드는 이름처럼 프로미스가 결과를 반환할 때까지 기다리도록 하기 때문에 비동기 함수 안에서만 작동됩니다.

profile
새로운 것을 도전하고 노력한다

0개의 댓글