Κοινή χρήση τεχνολογίας

Ασύγχρονη εφαρμογή της λειτουργίας ES6 Generator (8)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Η ασύγχρονη εφαρμογή των λειτουργιών του ES6 Generator υλοποιείται κυρίως με τη χρήση του σε συνδυασμό με το Promise. Αυτό το μοτίβο ονομάζεται μοτίβο "thunk" και σας επιτρέπει να γράψετε ασύγχρονο κώδικα που φαίνεται να είναι σύγχρονος.

χαρακτηριστικό γνώρισμα:

  1. Αναστολή εκτέλεσης: Όταν η συνάρτηση Generator συναντήσει μια παράσταση απόδοσης, θα σταματήσει την εκτέλεση και θα περιμένει να επιλυθεί το Promise.
  2. Συνέχιση της εκτέλεσης: Όταν ολοκληρωθεί το Promise (επιλύεται ή απορρίπτεται), η συνάρτηση Generator συνεχίζει την εκτέλεση και επιστρέφει το αποτέλεσμα της παράστασης απόδοσης.
  3. Διαχείριση σφαλμάτων: Τα σφάλματα σε ασύγχρονες λειτουργίες μπορούν να καταγραφούν και να υποβληθούν σε επεξεργασία.
  4. αλυσιδωτή κλήση: Μπορείτε να δημιουργήσετε μια αλυσίδα ασύγχρονων λειτουργιών, με κάθε λειτουργία να ξεκινά μετά την ολοκλήρωση της προηγούμενης λειτουργίας.

1. Βασική λειτουργία ασύγχρονης γεννήτριας

function delay(time) {
    return new Promise(resolve => setTimeout(resolve, time));
}

function* asyncGenerator() {
    console.log("Start");
    yield delay(1000); // 等待1秒
    console.log("After 1 second");
    yield delay(1000); // 再等待1秒
    console.log("After another second");
    return "Done";
}

let gen = asyncGenerator();

function runGenerator(g) {
    let result = g.next();
    result.value.then(() => {
        if (!result.done) {
            runGenerator(g);
        }
    });
}

runGenerator(gen);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

2. Χρήση για…of and async…wait syntax sugar

// 假设我们有以下 async generator
async function* asyncGen() {
    yield await Promise.resolve(1);
    yield await Promise.resolve(2);
    yield await Promise.resolve(3);
}

// 我们可以使用 for...of 循环和 async...await 语法糖来简化调用
(async () => {
    for await (let value of asyncGen()) {
        console.log(value); // 依次输出 1, 2, 3
    }
})();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

3. Χειρισμός σφαλμάτων σε ασύγχρονες λειτουργίες

function* asyncGenWithError() {
    try {
        yield Promise.reject("Error occurred!");
    } catch (e) {
        console.log(e); // 输出:Error occurred!
    }
}

let genWithError = asyncGenWithError();

genWithError.next().value.catch(err => console.log(err));
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

4. Χρησιμοποιήστε την απόδοση* για να αναθέσετε σε άλλες ασύγχρονες συναρτήσεις Generator

function* innerAsyncGen() {
    yield Promise.resolve("A");
    yield Promise.resolve("B");
}

function* outerAsyncGen() {
    yield "Start";
    yield* innerAsyncGen(); // 委托给另一个异步 Generator 函数
    yield "End";
}

let outerGen = outerAsyncGen();

function runOuterGenerator(g) {
    let result = g.next();
    result.value.then(val => {
        if (!result.done) {
            runOuterGenerator(g);
        }
    });
}

runOuterGenerator(outerGen);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23