ES6 비동기 생성기 및 이터러블을 사용하여 페이지 매김 빌드

🐠 발전기란?

글쎄, 정의에 따르면 :

Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.

팬시, 이것이 테이블에 무엇을 가져다 줍니까? 💭

아아 또 정의.. 💤

Generators in JavaScript -- especially when combined with Promises -- are a very powerful tool for asynchronous programming

현실 세계의 시나리오?

모든 정의를 읽은 후 핵심으로 넘어가 보겠습니다. :옥토캣:

해결해야 할 흥미로운 문제가 있었습니다. 오른쪽으로 스와이프할 때 모바일 앱 중 하나로 페이지 매김을 활성화하는 것이었습니다.

그래서 우리는 그것을 위해 발전기를 사용합니까?

다른 가능한 솔루션이 있습니다. 발전기는 더 깨끗한 솔루션일 뿐입니다.

그것을 하는 방법?

Create a generator

const asyncGetContent = async function* (){
  const limit = 10; /* content per page */
  let offset = 0; /* index of item to start from */
  let totalCount = -1; /* -1 signifies failure */
  while (offset === 0 || offset < totalCount) {
    try {
      const response = await (await fetch(<<url>>)).json();
      offset = offset + limit;
      totalCount = response["total-count"];
      console.log(`offset + totalCount`, offset, totalCount);
      yield response;
    } catch (e) {
      console.warn(`exception during fetch`, e);
      yield {
        done: true,
        value: "error"
      };
    }
  }

}

이해해야 할 내용이 많으므로 각 행을 살펴보겠습니다.

⛄ 선택한 결과에 대한 제한을 설정하는 변수를 정의하는 limit [상수일 필요는 없음]

⛄ fetch/axios/일부 API 호출을 준비하고 await로 쏴서 결과 약속을 해결합니다.

⛄ yield 응답. 반환은 .next()를 사용하여 비동기 호출자가 사용하는 약속이 됩니다(다음 섹션에서 이에 대해 설명합니다).

⛄ 가져오기를 처리하자

How do i use this?

다음과 같이 비동기 함수 내에서 시작하고 호출하기만 하면 됩니다.

const contentGen = await asyncGetContent(); /* initate the generator */

개시 후, 우리는 결과를 산출하기 위해 필요한 곳 ​​어디에서나 호출할 수 있습니다(예: 오른쪽 스와이프/버튼 클릭)

const content = await contentGen.next();

필요에 따라 content [이 경우 API의 응답]을 사용합니다.

질문이 있는 경우 댓글로 알려주시면 피드백을 기다리겠습니다 🍻