Explicación detallada de la función asíncrona de ES6 (10)

2024-07-12

¿Qué son las funciones asíncronas? En una palabra, es el azúcar sintáctico de la función Generador.

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 función async consiste en reemplazar el asterisco (*) de la función Generator con async, y reemplazar yield con await, y listo.

Las mejoras de la función asíncrona a la función Generador se reflejan en los siguientes cuatro puntos:

(1) Actuador incorporado.
La ejecución de la función Generador debe depender del ejecutor, por lo que existe el módulo co y la función asíncrona viene con su propio ejecutor. En otras palabras, la ejecución de funciones asíncronas es exactamente la misma que la de las funciones ordinarias, con una sola línea.

Módulo co: El módulo co es una pequeña herramienta lanzada por el famoso programador TJ Holowaychuk en junio de 2013, que se utiliza para la ejecución automática de funciones del Generador.
El módulo co le evita escribir el ejecutor de la función Generador.

// 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) Mejor semántica.
Async y await tienen una semántica más clara que asterisco y rendimiento. async significa que hay una operación asincrónica en la función y await significa que la siguiente expresión debe esperar el resultado.
(3) Aplicabilidad más amplia.
Según la convención del módulo co, el comando de rendimiento solo puede ir seguido de una función Thunk o un objeto Promise, mientras que el comando await de la función asíncrona puede ir seguido de un objeto Promise y un valor de tipo primitivo (valor numérico, cadena y valor booleano). valor, pero se convertirá automáticamente en un objeto de promesa resuelto inmediatamente).
(4) El valor de retorno es Promesa.
El valor de retorno de la función asíncrona es un objeto Promesa, que es mucho más conveniente que el valor de retorno de la función Generador es un objeto Iterador. Puede utilizar el método then para especificar la siguiente acción.

Además, la función asíncrona puede considerarse como múltiples operaciones asincrónicas, empaquetadas en un objeto Promise, y el comando de espera es el azúcar sintáctico del comando interno then.

1. Funciones así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. Utilice await para esperar la promesa.

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

// 异步函数中的错误处理
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. Funciones asíncronas encadenadas

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

Cinco, función asíncrona como función de manejo 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

Seis, función asíncrona y 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

Compartir tecnología