Explication détaillée de la fonction asynchrone ES6 (10)

2024-07-12

Que sont les fonctions asynchrones ? En un mot, c’est le sucre syntaxique de la fonction Générateur.

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

La fonction async consiste à remplacer l'astérisque (*) de la fonction Generator par async, et à remplacer rendement par wait, et c'est tout.

Les améliorations de la fonction async par rapport à la fonction Générateur se traduisent par les quatre points suivants :

(1) Actionneur intégré.
L'exécution de la fonction Generator doit reposer sur l'exécuteur, il y a donc le module co, et la fonction async est livrée avec son propre exécuteur. En d’autres termes, l’exécution des fonctions asynchrones est exactement la même que celle des fonctions ordinaires, avec une seule ligne.

module co : Le module co est un petit outil sorti par le célèbre programmeur TJ Holowaychuk en juin 2013, utilisé pour l'exécution automatique des fonctions du générateur.
Le module co vous évite d'écrire l'exécuteur de la fonction Générateur.

// 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) Meilleure sémantique.
Async et wait ont une sémantique plus claire que l'astérisque et le rendement. async signifie qu'il y a une opération asynchrone dans la fonction, et wait signifie que l'expression suivante doit attendre le résultat.
(3) Applicabilité plus large.
Selon la convention du module co, la commande rendement ne peut être suivie que d'une fonction Thunk ou d'un objet Promise, tandis que la commande wait de la fonction async peut être suivie d'un objet Promise et d'une valeur de type primitif (valeur numérique, chaîne et booléen). valeur, mais il sera automatiquement converti en objet Promise résolu immédiatement).
(4) La valeur de retour est Promesse.
La valeur de retour de la fonction async est un objet Promise, ce qui est beaucoup plus pratique que la valeur de retour de la fonction Generator n'est un objet Iterator. Vous pouvez utiliser la méthode then pour spécifier l'action suivante.

De plus, la fonction asynchrone peut être considérée comme plusieurs opérations asynchrones, regroupées dans un objet Promise, et la commande wait est le sucre syntaxique de la commande interne then.

1. Fonctions asynchrones de base

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

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

2. Utilisez wait pour attendre la promesse

// 模拟一个异步请求函数
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. Gestion des erreurs

// 异步函数中的错误处理
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. Fonctions asynchrones chaînées

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. fonction asynchrone comme fonction de gestion des événements

// 假设有一个按钮元素
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. fonction asynchrone et 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

Partage de technologie