Explicação detalhada da função assíncrona ES6 (10)

2024-07-12

O que são funções assíncronas? Em uma palavra, é o açúcar sintático da função Gerador.

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

A função async consiste em substituir o asterisco (*) da função Generator por async, e substituir yield por await, e pronto.

As melhorias da função assíncrona para a função Gerador são refletidas nos quatro pontos a seguir:

(1) Atuador integrado.
A execução da função Generator deve contar com o executor, portanto existe o módulo co, e a função assíncrona vem com executor próprio. Em outras palavras, a execução de funções assíncronas é exatamente igual às funções comuns, com apenas uma linha.

Módulo co: O módulo co é uma pequena ferramenta lançada pelo famoso programador TJ Holowaychuk em junho de 2013, usada para execução automática de funções do Gerador.
O módulo co evita que você escreva o executor da função Gerador.

// 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) Melhor semântica.
Async e await têm semântica mais clara que asterisco e rendimento. async significa que há uma operação assíncrona na função e await significa que a expressão a seguir precisa aguardar o resultado.
(3) Aplicabilidade mais ampla.
De acordo com a convenção do módulo co, o comando yield só pode ser seguido por uma função Thunk ou um objeto Promise, enquanto o comando await da função async pode ser seguido por um objeto Promise e um valor de tipo primitivo (valor numérico, string e booleano). valor, mas será automaticamente convertido em objeto Promise resolvido imediatamente).
(4) O valor de retorno é Promessa.
O valor de retorno da função assíncrona é um objeto Promise, que é muito mais conveniente do que o valor de retorno da função Generator é um objeto Iterator. Você pode usar o método then para especificar a próxima ação.

Além disso, a função assíncrona pode ser considerada como múltiplas operações assíncronas, empacotadas em um objeto Promise, e o comando await é o açúcar sintático do comando then interno.

1. Funções assíncronas básicas

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

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

2. Use wait para esperar pelo Promise

// 模拟一个异步请求函数
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. Tratamento de erros

// 异步函数中的错误处理
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. Funções assíncronas encadeadas

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. Função assíncrona como função de manipulação de eventos

// 假设有一个按钮元素
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. função assíncrona e 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

Compartilhamento de tecnologia