Detaillierte Erläuterung der asynchronen ES6-Funktion (10)

2024-07-12

Was sind asynchrone Funktionen? Mit einem Wort, es ist der syntaktische Zucker der Generatorfunktion.

const gen = function* () {
  const f1 = yield readFile('/etc/fstab');
  const f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};
1
2
3
4
5
6
7
8
9
10
11
12
13

Die asynchrone Funktion besteht darin, das Sternchen (*) der Generatorfunktion durch asynchron zu ersetzen und yield durchawait zu ersetzen, und das war’s.

Die Verbesserungen der Async-Funktion gegenüber der Generator-Funktion spiegeln sich in den folgenden vier Punkten wider:

(1) Eingebauter Aktuator.
Die Ausführung der Generatorfunktion muss vom Executor abhängen, daher gibt es das Co-Modul und die asynchrone Funktion verfügt über einen eigenen Executor. Mit anderen Worten: Die Ausführung asynchroner Funktionen ist genau die gleiche wie bei gewöhnlichen Funktionen, mit nur einer Zeile.

Co-Modul: Das Co-Modul ist ein kleines Tool, das im Juni 2013 vom berühmten Programmierer TJ Holowaychuk veröffentlicht wurde und zur automatischen Ausführung von Generatorfunktionen verwendet wird.
Das Co-Modul erspart Ihnen das Schreiben des Executors der Generator-Funktion.

// Generator 函数
var gen = function* () {
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

//co模块使用
var co = require('co');
co(gen); //co 函数返回一个 Promise 对象
co(gen).then(function (){
  console.log('Generator 函数执行完成');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

(2) Bessere Semantik.
Async und Await haben eine klarere Semantik als Asterisk und Yield. async bedeutet, dass die Funktion einen asynchronen Vorgang enthält, undwait bedeutet, dass der folgende Ausdruck auf das Ergebnis warten muss.
(3) Breitere Anwendbarkeit.
Gemäß der Co-Modulkonvention kann auf den Yield-Befehl nur eine Thunk-Funktion oder ein Promise-Objekt folgen, während auf den Wait-Befehl der Async-Funktion ein Promise-Objekt und ein primitiver Typwert (numerischer Wert, String und Boolescher Wert) folgen können Wert, aber es wird automatisch in ein sofort aufgelöstes Promise-Objekt konvertiert).
(4) Der Rückgabewert ist Promise.
Der Rückgabewert der asynchronen Funktion ist ein Promise-Objekt, was viel praktischer ist, als der Rückgabewert der Generator-Funktion ein Iterator-Objekt. Mit der then-Methode können Sie die nächste Aktion angeben.

Darüber hinaus kann die asynchrone Funktion als mehrere asynchrone Vorgänge betrachtet werden, die in ein Promise-Objekt gepackt sind, und der Befehl „await“ ist der syntaktische Zucker des internen Befehls „then“.

1. Grundlegende asynchrone Funktionen

// 定义一个异步函数
async function fetchData() {
    return 'Data fetched';
}

// 调用异步函数
fetchData().then(data => {
    console.log(data); // 输出: Data fetched
});
1
2
3
4
5
6
7
8
9

2. Verwenden Sie „await“, um auf Promise zu warten

// 模拟一个异步请求函数
function getUserData() {
    return new Promise(resolve => {
        setTimeout(() => resolve({ name: 'Alice' }), 1000);
    });
}

// 异步函数使用 await 等待 Promise
async function printUserData() {
    try {
        const userData = await getUserData();
        console.log(userData); // 输出: { name: 'Alice' }
    } catch (error) {
        console.error(error);
    }
}

printUserData();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. Fehlerbehandlung

// 异步函数中的错误处理
async function riskyFunction() {
    try {
        const result = await Promise.reject('An error occurred');
    } catch (error) {
        console.error(error); // 输出: An error occurred
    }
}

riskyFunction();
1
2
3
4
5
6
7
8
9
10

4. Verkettete asynchrone Funktionen

async function asyncOperation() {
    return 'Operation completed';
}

async function chainAsyncFunctions() {
    try {
        const result1 = await asyncOperation();
        const result2 = await asyncOperation();
        console.log(result1, result2); // 输出: Operation completed Operation completed
    } catch (error) {
        console.error(error);
    }
}

chainAsyncFunctions();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5. Asynchrone Funktion als Ereignisbehandlungsfunktion

// 假设有一个按钮元素
const button = document.querySelector('#myButton');

// 为按钮添加点击事件处理函数
button.addEventListener('click', async event => {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
});
1
2
3
4
5
6
7
8
9
10
11
12

6. Asynchrone Funktion und Promise.all

// 异步函数返回多个 Promise
async function fetchUsers() {
    return ["User1", "User2", "User3"];
}

async function fetchPosts() {
    return ["Post1", "Post2", "Post3"];
}

// 使用 Promise.all 并行处理多个异步操作
async function fetchAllData() {
    try {
        const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);
        console.log(users, posts); // 输出: [ 'User1', 'User2', 'User3' ] [ 'Post1', 'Post2', 'Post3' ]
    } catch (error) {
        console.error(error);
    }
}

fetchAllData();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Technologieaustausch