46장 제너레이터와 async/await - 지영님

제너레이터란?

제너레이터와 일반 함수의 차이점

1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.

• 일반 함수를 호출: 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행

• 제너레이터 함수는 함수 호출자가 함수 실행을 일시 중지시키거나 재개할 수 있다.

1. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.

• 일반 함수를 호출: 매개변수를 통해 함수 외부에서 값을 주입, 함수 코드를 일괄 실행하여 결과값을 함수 외부로 반환

• 제너레이터 함수는 함수 호출자와 양방향으로 함수 상태를 주고 받을 수 있음.

1. 제너레이터 함수를 호출하면 제너레이터 객체를 반환

• 일반 함수 호출: 함수 코드를 일괄 실행하고 값을 반환

• 제너레이터 함수 호출: 함수 코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환

제너레이터 함수의 정의

• 하나 이상의 yield 표현식을 포함: 제너레이터 함수를 멈추거나 다시 시작하게 하는 키워드

//제너레이터 함수 선언문
function* genDecFunc() {
	yield 1;
}

//제너레이터 함수 표현식
const genDecFunc = function* () {
	yield 1;
}

//제너레이터 메서드
const obj =  {
	* genObjMethod() {
     yield 1;
   }
}

//제더레이터 클래스 메서드
class MyClass =  {
	* genObjMethod() {
     yield 1;
   }
}

• 애스터리스크(*)의 위치는 function 키워드와 함수 이름 사이라면 어디든 상관 없지만 일관성 유지를 위해 function 뒤에 붙이는 것을 권장

• 화살표 함수 정의 불가능

• new 연산자 생성자 함수로 호출 불가능

제너레이터 객체

function* genFunc() {
  yield 1;
	yield 2;
	yield 3;
}

const generator = genFunc();

console.log(Symbol.iterator in generator); //true
console.log('next' in generator); //true

• next 메서드 호출

• return 메서드 호출

• throw 메서드 호출

제너레이터의 일시 중지와 재개

• yield 키워드

function* genFunc() {
	yield 1;
 	yield 2;
	yield 3;
}

const generator = genFunc();

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

인수는 제너레이터 함수의 yield 표현식을 할당받는 변수에 할당

function* genFenc() {
	const x = yield 1;

  const y = yield (x + 10);
	
	return x + y;
}

const generator = genFunc(0);

let res = generator.next();
console.log(res); //{value: 1, done: false}

res = generator.next(10);
console.log(res); //{value: 20, done: false}

res = generator.next(20);
console.log(res); //{value: 30, done: true}

제너레이터의 활용

이터러블의 구현

• 이터레이션 프로토콜을 준수하여 무한 피보나치 수열을 생성하는 함수

• 제너레이터 함수를 활용한 무한 피보나치 수열을 생성하는 함수

비동기 처리

//제너레이터 실행기
const async = generatorFunc => {
  const generator = generatorFunc(); // 2
  
  const onResolved = arg => {
		const result = generator.next(arg); // 5    

    return result.done
      ? result.value // 9
      : result.value.then(res => onResolved(res));// 7
  }
  
  return onResolved; // 3
}

(async(function* fetchTodo(){ // 1
  const url = 'https://jsonplaceholder.typicode.com/todos/1';
  
  const response = yield fetch(url); //6
  const todo = yield response.json(); //8
  console.log(todo);
  //{userId: 1, id: 1, title: "delectus aut autem", completed: false}
})()); // 4

async/await

async/await

async function fetchTodo() {
    const url = 'https://jsonplaceholder.typicode.com/todos/1';
  
  const response = await fetch(url);
  const todo = await response.json();
  console.log(todo);
  //{userId: 1, id: 1, title: "delectus aut autem", completed: false}
}

fetchTodo();

async 함수

• 클래스 constructor 메서드는 async 메서드가 될 수 없다.

await 키워드

• 프로미스가 settled상태(비동기 처리가 수행된 상태)가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과를 반환.

const getGithubUserName = async id => {
  const res = await fetch(`https://api.github.com/users/${id}`); // 1
  const {name} = await res.json(); // 2
  console.log(name); // jiyoung
};

getGithubUserName('zero');

async function foo() {
  const a = await new Promise(resolve => setTimeout(() => resolve(1), 3000));
  const b = await new Promise(resolve => setTimeout(() => resolve(2), 2000));
  const c = await new Promise(resolve => setTimeout(() => resolve(3), 1000));
  
  console.log([a, b, c]); // [1, 2, 3];
};

foo(); //약 6초가 소요된다

async function foo() {
  const res = await Promise.all([
    new Promise(resolve => setTimeout(() => resolve(1), 3000)),
    new Promise(resolve => setTimeout(() => resolve(2), 2000)),
    new Promise(resolve => setTimeout(() => resolve(3), 1000))
  ])
  
  console.log(res); // [1, 2, 3];
};

foo(); //약 3초가 소요된다.

에러처리

비동기 처리를 위한 콜백패턴의 단점은 에러 처리가 곤란하다는 것!

const foo = async() => {
  try{
    const wrongUrl = 'https://wrong.url';
    const response = await fetch(wrongUrl);
    const data = await response.json();
    console.log(data);
  } catch(err) {
    console.err(err); //TypeError: Failed to fetch
  }
};

foo();

const foo = async() => {
    const wrongUrl = 'https://wrong.url';
  
    const response = await fetch(wrongUrl);
    const data = await response.json();
    return data;
};

foo()
  .then(console.log)
  .catch(console.error); //TypeError: Failed to fetch