Асинхронный для циклов в JavaScript


Есть несколько способов перебирать вещи в JavaScript. Наиболее заметным способом является использование циклов. Петлевые конструкции включают в себя for, forEach, do...while, while, for...in и for...of, Все эти конструкции зацикливаются на синхронных итерациях, таких как массивы, объекты, строки и т. Д.

Однако что делать, если вы хотите перебирать асинхронные итерации, такие как чтение файлов, генераторы или любой объект, который реализует асинхронный итерируемый протокол? Для этого существует специальная конструкция цикла в ECMAScript 2015. Войти for...await...of,

Что for...await...of?

для … ЖДИТЕ … из Statement создает цикл, повторяющийся по асинхронным итерируемым объектам, а также по синхронизируемым итерируемым объектам, таким как массивы, объекты, строки, о которых я упоминал ранее. Вот как написать такой цикл.

var asyncIterable = {
  (Symbol.asyncIterator): asyncIterator
};

(async function() {
  for await (variable of asyncIterable) {
    //some logic
  }
})();

variable – На каждой итерации переменной присваивается значение другого свойства. переменная может быть объявлена ​​с const, let, или var,
iterable – Объект, чьи итеративные свойства должны быть повторены.

for...wait...of цикл начинается с создания источника данных через (Symbol.asyncIterator)(), За каждый раз next() называется, цикл неявно ждут обещания разрешить. Это обещание возвращается методом итератора. Обратите внимание, что здесь используется await, вы всегда должны использовать его в async функционировать как обычно await,

Теперь, например, если вы хотите прочитать файл, который является асинхронной операцией, вы можете сделать это так.

(async function() {
  for await (const line of readLines(filePath)) {
    console.log(line)
  }
})();

Давайте рассмотрим более реалистичный пример с использованием генераторов JavaScript.

async function* asyncGenerator() {
    var array = ('Hello', 'World');

    while (array.length) {
      yield await array.shift();
    }
}

(async function() {
  for await (const item of asyncGenerator()) {
    console.log(item);
    // 'Hello'
    // 'World'
  }
})();

Вот, asyncGenerator является асинхронным генератором, который возвращает элементы массива асинхронно Здесь генератор асинхронный, потому что он возвращает все значения асинхронно в отличие от синхронного генератора. for...wait...of цикл ожидает разрешения каждого элемента, прежде чем перейти к next(), Здесь next() также асинхронный, который возвращает обещания. И, следовательно, он может использовать для ожидания … из петля.