async/await

beomjin_97·2022년 5월 28일
0

javascript

목록 보기
8/13

0. 제너레이터

제너레이터 : 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수
제너레이터 함수는 function* 키워드를 사용하며 하나 이상의 yeild표현식을 가진다.
( 화살표 함수로는 정의할 수 없다. )

fuction* foo () {
  yeild 1; 
}

제너레이터 함수를 호출하면 함수 코드 블럭을 실행하는 것이 아니라 제너레이터 객체를 생성하여 반환한다. 제너레이터 객체는 iterable이자 iterator이다.
yield 키워드는 제너레이터 함수의 실행을 일시 중지시키거나 yeild 뒤에 오는 표현식의 평가 결과를 제너레이터 함수 호출자에게 반환한다.

function* foo() {
  yield 1;
  yield 2 + x;
  yield 3;
}

const generator = foo();

console.log(generator.next()); // {value: 1, done: false}
console.log(generator.next(3)); // {value: 5, done: false}
console.log(generator.next()); // {value: 3, done: false}
console.log(generator.next()); // {value: undefined, done: true}

1. async/await

ES8에서는 제너레이터보다 간단하고 가독성 좋은 비동기 처리를 동기 처리 처럼 동작하도록 구현할 수 있는 async/await이 도입되었다. async/await은 프로미스를 기반으로 동작한다.

async 함수는 언제나 프로미스를 반환한다. 명시적으로 프로미스를 반환하지 않더라도 암묵적으로 반환값을 resolve하는 프로미스를 반환한다.
await 키워드는 프로미스가 settled 상태가 될 때 까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과를 반환한다.

const fetch = require("node-fetch");

const getName = async (id) => {
  const res = await fetch(`https://example/${id}`);
  const { name } = await res.json();
  console.log(name);
};

getName("beomjin97");

1.1 에러처리

async/await에서 에러처리는 try/catch문을 사용할 수 있다.

const fetch = require("node-fetch");

const getName = async (id) => {
  try {
    const res = await fetch(`https://example/${id}`);
    const { name } = await res.json();
    console.log(name);
  } catch (error) {
    console.log(errer);
  }
};

getName("beomjin97");

async/await은 프로미스 기반이기 때문에 물론 catch문을 사용해 에러처리를 할 수도 있다.

const fetch = require("node-fetch");

const getName = async (id) => {
  const res = await fetch(`https://example/${id}`);
  const { name } = await res.json();
  return name;
};

getName("beomjin97")
  .then(console.log)
  .catch(console.error);
profile
Rather be dead than cool.

0개의 댓글