Detaillierte Erläuterung der neuen Funktion Async-Iteration in ES9

In ES6 wurde das Konzept der synchronen Iteration mit der Referenz des Async-Operators in ES8 eingeführt. Kann es in einer asynchronen Operation durchlaufen werden?

Heute möchte ich Ihnen etwas über die neue Funktion der asynchronen Traversierung in ES9, die asynchrone Iteration, erzählen.

Asynchrone Durchquerung

---

Bevor wir die asynchrone Durchquerung erklären, erinnern wir uns zunächst an die synchrone Durchquerung in ES6.

Gemäß der Definition von ES6 besteht die Iteration hauptsächlich aus drei Teilen:

1. Iterable

Schauen wir uns zunächst die Definition von Iterable an:

interface Iterable {
    [Symbol.iterator]() : Iterator;
}

Iterable bedeutet, dass in diesem Objekt übertragbare Daten vorhanden sind, und Es ist notwendig, eine Factory-Methode zu implementieren, um einen Iterator zu generieren.

2. Iterator

interface Iterator {
    next() : IteratorResult;
}

Iterator kann aus Iterable erstellt werden. Iterator ist ein Cursor-ähnliches Konzept, und auf IteratorResult kann über next zugegriffen werden.

3. IteratorResult

IteratorResult sind die Daten, die bei jedem Aufruf der nächsten Methode erhalten werden.

interface IteratorResult {
    value: any;
    done: boolean;
}

Neben einem Wert, der die abzurufenden Daten angibt, verfügt IteratorResult auch über einen Wert, der angibt, ob die Durchquerung abgeschlossen ist.

Das Folgende ist ein Beispiel für das Durchlaufen eines Arrays:

rrree

Aber das obige Beispiel durchläuft synchrone Daten, z. B. eine von der http-Seite heruntergeladene Datei, wir möchten die Datei Zeile für Zeile durchlaufen. Da das Lesen einer Datenzeile ein asynchroner Vorgang ist, beinhaltet dies einen asynchronen Datendurchlauf.

Die Methode zum Hinzufügen des asynchronen Lesens von Dateien ist readLinesFromFile, daher ist die synchrone Durchlaufmethode nicht mehr auf asynchron anwendbar:

> const iterable = ['a', 'b'];
> const iterator = iterable[Symbol.iterator]();
> iterator.next()
{ value: 'a', done: false }
> iterator.next()
{ value: 'b', done: false }
> iterator.next()
{ value: undefined, done: true }

Vielleicht denken Sie, können wir das asynchrone Lesen einer Zeile in Promise kapseln und sie dann durchlaufen? synchron?

Die Idee ist gut, aber in diesem Fall ist es unmöglich zu erkennen, ob der asynchrone Vorgang abgeschlossen ist. Die Methode ist also nicht durchführbar.

Daher führte ES9 das Konzept der asynchronen Durchquerung ein:

• Sie können den Iterator in asynchronen Iterables über Symbol.asyncIterator abrufen.

• Die next()-Methode des asynchronen Iterators gibt ein Promises-Objekt zurück, das IteratorResults enthält.

Schauen wir uns also die API-Definition der asynchronen Durchquerung an:

//不再适用
for (const line of readLinesFromFile(fileName)) {
    console.log(line);
}

Schauen wir uns eine Anwendung der asynchronen Durchquerung an:

interface AsyncIterable {
    [Symbol.asyncIterator]() : AsyncIterator;
}
interface AsyncIterator {
    next() : Promise<IteratorResult>;
}
interface IteratorResult {
    value: any;
    done: boolean;
}

Unter anderem konvertiert createAsyncIterable eine synchrone Iterable in eine asynchrone Iterable, was wir weiter unten tun werden Schauen wir uns in diesem Abschnitt an, wie es generiert wird.

Hier konzentrieren wir uns hauptsächlich auf die Traversaloperation von asyncIterator.

Da der Async-Operator in ES8 eingeführt wurde, können wir den obigen Code auch mit Async-Funktionen umschreiben:

const asyncIterable = createAsyncIterable(['a', 'b']);
const asyncIterator = asyncIterable[Symbol.asyncIterator]();
asyncIterator.next()
.then(iterResult1 => {
    console.log(iterResult1); // { value: 'a', done: false }
    return asyncIterator.next();
})
.then(iterResult2 => {
    console.log(iterResult2); // { value: 'b', done: false }
    return asyncIterator.next();
})
.then(iterResult3 => {
    console.log(iterResult3); // { value: undefined, done: true }
});

Traversal of asynchronous iterable

---

Verwenden Sie for-of, um synchron iterable zu durchlaufen, verwenden Sie for-await -of can asynchron iterierbar durchqueren.

async function f() {
    const asyncIterable = createAsyncIterable(['a', 'b']);
    const asyncIterator = asyncIterable[Symbol.asyncIterator]();
    console.log(await asyncIterator.next());
        // { value: 'a', done: false }
    console.log(await asyncIterator.next());
        // { value: 'b', done: false }
    console.log(await asyncIterator.next());
        // { value: undefined, done: true }
}

Beachten Sie, dass „await“ in der asynchronen Funktion platziert werden muss.

Wenn während unseres asynchronen Durchlaufs eine Ausnahme auftritt, können Sie try Catch in for-await-of verwenden, um die Ausnahme abzufangen:

async function f() {
    for await (const x of createAsyncIterable(['a', 'b'])) {
        console.log(x);
    }
}
// Output:
// a
// b

Synchronized iterable gibt synchrone Iteratoren zurück, und die nächste Methode gibt {value, done } zurück.

Wenn Sie „for-await-of“ verwenden, werden synchrone Iteratoren in asynchrone Iteratoren umgewandelt. Der zurückgegebene Wert wird dann in ein Promise umgewandelt.

Wenn der vom synchronen nächsten zurückgegebene Wert selbst ein Promise-Objekt ist, ist der asynchrone Rückgabewert immer noch dasselbe Versprechen.

Das heißt, es wird: Iterable<Promise<T>> 转换成为 AsyncIterable<T>, wie im folgenden Beispiel gezeigt:

function createRejectingIterable() {
    return {
        [Symbol.asyncIterator]() {
            return this;
        },
        next() {
            return Promise.reject(new Error('Problem!'));
        },
    };
}
(async function () { 
    try {
        for await (const x of createRejectingIterable()) {
            console.log(x);
        }
    } catch (e) {
        console.error(e);
            // Error: Problem!
    }
})();

Das obige Beispiel wandelt ein synchrones Promise in ein asynchrones Promise um.

async function main() {
    const syncIterable = [
        Promise.resolve('a'),
        Promise.resolve('b'),
    ];
    for await (const x of syncIterable) {
        console.log(x);
    }
}
main();

// Output:
// a
// b

Das obige Beispiel konvertiert synchronisierte Konstanten in Promise. Es ist ersichtlich, dass die Ergebnisse beider gleich sind.

Generierung von asynchronem Iterable

---

Zurück zum obigen Beispiel: Wir verwenden createAsyncIterable(syncIterable), um syncIterable in AsyncIterable zu konvertieren.

Sehen wir uns an, wie diese Methode implementiert wird:

async function main() {
    for await (const x of ['a', 'b']) {
        console.log(x);
    }
}
main();

// Output:
// c
// d

Im obigen Code fügen wir async vor einer gewöhnlichen Generatorfunktion ein, die einen asynchronen Generator darstellt.

Bei gewöhnlichen Generatoren wird bei jedem Aufruf der nächsten Methode ein Objekt {value,done} zurückgegeben. Dieses Objekt kapselt den Ertragswert.

Bei einem Asynchrongenerator wird jedes Mal, wenn die nächste Methode aufgerufen wird, ein Versprechensobjekt zurückgegeben, das das Objekt {value,done} enthält. Dieses Objektobjekt ist eine Kapselung des Ertragswerts.

Da ein Promise-Objekt zurückgegeben wird, müssen wir nicht warten, bis das Ergebnis der asynchronen Ausführung abgeschlossen ist, bevor wir die nächste Methode erneut aufrufen.

Wir können alle asynchronen Promise-Operationen gleichzeitig über ein Promise.all ausführen:

async function* createAsyncIterable(syncIterable) {
    for (const elem of syncIterable) {
        yield elem;
    }
}

In createAsyncIterable erstellen wir ein asynchrones Iterable aus einem synchronen Iterable.

Als nächstes schauen wir uns an, wie man aus einem asynchronen Iterable ein asynchrones Iterable erstellt.

Wir wissen aus dem vorherigen Abschnitt, dass Sie „for-await-of“ verwenden können, um asynchrone iterierbare Daten zu lesen, also können wir es wie folgt verwenden:

async function* prefixLines(asyncIterable) {
    for await (const line of asyncIterable) {
        yield '> ' + line;
    }
}

在generator一文中，我们讲到了在generator中调用generator。也就是在一个生产器中通过使用yield*来调用另外一个生成器。

同样的，如果是在异步生成器中，我们可以做同样的事情：

async function* gen1() {
    yield 'a';
    yield 'b';
    return 2;
}
async function* gen2() {
    const result = yield* gen1(); 
        // result === 2
}

(async function () {
    for await (const x of gen2()) {
        console.log(x);
    }
})();
// Output:
// a
// b

如果在异步生成器中抛出异常，这个异常也会被封装在Promise中：

async function* asyncGenerator() {
    throw new Error('Problem!');
}
asyncGenerator().next()
.catch(err => console.log(err)); // Error: Problem!

异步方法和异步生成器

---

异步方法是使用async function 声明的方法，它会返回一个Promise对象。

function中的return或throw异常会作为返回的Promise中的value。

(async function () {
    return 'hello';
})()
.then(x => console.log(x)); // hello

(async function () {
    throw new Error('Problem!');
})()
.catch(x => console.error(x)); // Error: Problem!

异步生成器是使用 async function * 申明的方法。它会返回一个异步的iterable。

通过调用iterable的next方法，将会返回一个Promise。异步生成器中yield 的值会用来填充Promise的值。如果在生成器中抛出了异常，同样会被Promise捕获到。

async function* gen() {
    yield 'hello';
}
const genObj = gen();
genObj.next().then(x => console.log(x));
    // { value: 'hello', done: false }

本文作者：flydean程序那些事

本文链接：http://www.flydean.com/es9-async-iteration/

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der neuen Funktion Async-Iteration in ES9. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!