Создавайте бесконечное разбиение на страницы с помощью асинхронных генераторов и итераций ES6.

Что за 🐠 генератор?

Ну, по определению:

Генераторы — это функции, из которых можно выйти, а затем снова войти. Их контекст (привязки переменных) будет сохранен при повторных входах.

Представляете, что это дает? 💭

ааа, опять определение.. 💤

Генераторы в JavaScript — особенно в сочетании с промисами — очень мощный инструмент для асинхронного программирования

Сценарий реального мира?

После прочтения всего этого определения давайте перейдем к его сути. :octocat:

Перед нами стояла интересная задача. Это должно было включить разбивку на страницы в одном из наших мобильных приложений при пролистывании вправо.

Значит, мы используем для этого генераторы?

Есть и другие возможные решения, генераторы - просто более чистое решение.

Как это сделать?

› Создать генератор

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() (мы вернемся к этому в следующем разделе).

⛄ давайте просто обработаем выборку

Как мне это использовать?

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

Все, что осталось сделать, это инициировать и вызвать его внутри асинхронной функции как таковой:

после инициации мы можем позвонить туда, где это необходимо (например, смахнуть правой кнопкой мыши / нажать кнопку), чтобы получить результат

const content = await contentGen.next();

используйте content [в данном случае ответ API] по мере необходимости

Если у вас есть вопросы, дайте нам знать в комментариях, и мы с нетерпением ждем ваших отзывов 🍻

Первоначально опубликовано на https://dev.to 7 мая 2020 г.