Cómo utilizar la función asíncrona en js

Esta vez te mostraré cómo usar la función asíncrona en js y cuáles son las precauciones para usar la función asíncrona en js. El siguiente es un caso práctico, echemos un vistazo.

1. La solución definitiva

La operación asincrónica es un problema problemático en la programación JavaScript. Es tan problemático que algunas personas han propuesto varias soluciones para intentar resolverlo.

Desde la primera función de devolución de llamada, hasta el objeto Promesa y luego hasta la función Generador, ha habido mejoras cada vez, pero se siente incompleto. Todos tienen complejidades adicionales y requieren una comprensión de los mecanismos operativos subyacentes de la abstracción.

¿La E/S asincrónica no es solo leer un archivo? ¿Por qué tiene que ser tan complicado? El estado más alto de la programación asincrónica es que no tiene que preocuparse en absoluto si es asincrónica.

Las funciones asíncronas son la luz al final del túnel y muchos las consideran la solución definitiva para operaciones asincrónicas.

2. ¿Qué es la función asíncrona?

En una palabra, la función asíncrona es el azúcar sintáctico de la función Generador.

Hay una función Generador en el artículo anterior que lee dos archivos en secuencia.

var fs = require('fs');

var readFile = función (nombre de archivo){

devolver nueva Promesa(función (resolver, rechazar){

fs.readFile(nombredearchivo, función(error, datos){

if (error) rechazar(error);

resolver(datos);

p>

});

});

};

var gen = función* (){

var f1 = rendimiento readFile('/etc/fstab');

var f2 = rendimiento readFile('/etc/shells');

console.log( f1.toString() );

console.log(f2.toString());

};Escrito como una función asíncrona, es el siguiente.

var asyncReadFile = función asíncrona (){

var f1 = esperar readFile('/etc/fstab');

var f2 = esperar readFile(' /etc/shells');

console.log(f1.toString());

console.log(f2.toString());

}; Al comparar, encontrará que la función asíncrona reemplaza el asterisco (*) de la función Generador con async y reemplaza el rendimiento con await, y eso es todo.

3. Ventajas de la función asíncrona La mejora de la función asíncrona a la función Generador se refleja en los siguientes tres puntos.

(1) Actuador incorporado. La ejecución de la función Generador debe depender del ejecutor, por lo que existe la biblioteca de funciones 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.

var result = asyncReadFile();

(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 de la biblioteca de funciones 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 valores de tipo primitivo (valores numéricos , cadenas y valores booleanos, pero esto equivale a una operación síncrona).

4. Implementación de la función asíncrona La implementación de la función asíncrona consiste en envolver la función Generador y el ejecutor automático en una función.

función asíncrona fn(args){

// ...

}

// Equivalente a

función fn(args){

return spawn(function*() {

// ...

}); p>}Todas las funciones asíncronas se pueden escribir en la segunda forma anterior, en la que la función de generación es el ejecutor automático.

La implementación de la función spawn se detalla a continuación, que es básicamente una réplica del ejecutor automático anterior.

función spawn(genF) {

return new Promise(función(resolver, rechazar) {

var gen = genF();

paso de función (siguienteF) {

prueba {

var siguiente = siguienteF();

} captura(e) {

devolver rechazar(e);

}

if(next.done) {

devolver resolver(next.value);

}

Promise.resolve(siguiente.valor).luego(función(v) {

paso(función() { return gen.next(v); });

}, función(e) {

paso(función() { return gen.throw(e); });

});

}

step(function() { return gen.next(undefinido); });

});

}la función asíncrona es Funciones de sintaxis muy nuevas, tan nuevas que no pertenecen a ES6, sino a ES7. Actualmente, todavía se encuentra en la etapa de propuesta, pero los transcodificadores Babel y regenerator ya lo admiten y pueden usarse después de la transcodificación.

5. El uso de la función asíncrona es el mismo que el de la función Generador. La función asíncrona devuelve un objeto Promise y puede usar el método then para agregar una función de devolución de llamada. Cuando se ejecuta la función, una vez que encuentra la espera, regresará primero, esperará hasta que se complete la operación asincrónica activada y luego ejecutará las declaraciones posteriores en el cuerpo de la función.

Aquí tienes un ejemplo.

función asíncrona getStockPriceByName(nombre) {

var símbolo = esperar getStockSymbol(nombre);

var stockPrice = esperar getStockPrice(símbolo);

devolver precio de stock;

}

getStockPriceByName('goog').then(function (resultado){

console.log(resultado);

}); El código anterior es una función para obtener cotizaciones de acciones. La palabra clave async delante de la función indica que hay operaciones asincrónicas dentro de la función. Cuando se llama a esta función, se devolverá un objeto Promise inmediatamente.

El siguiente ejemplo genera un valor después de especificar el número de milisegundos.

función timeout(ms) {

return new Promise((resolve) => {

setTimeout(resolve, ms);

});

}

función asíncrona asyncPrint(valor, ms) {

tiempo de espera de espera (ms);

consola. log(value)

}

asyncPrint('hello world', 50); El código anterior especifica que "hello world" se generará después de 50 milisegundos.

6. Preste atención al objeto Promise detrás del comando de espera. El resultado de la ejecución puede ser rechazado, por lo que es mejor colocar el comando de espera en el bloque de código try...catch.

función asíncrona myFunction() {

prueba {

espera algo queReturnsAPromise();

} captura (err) {

console.log(err);

}

}

// Otra forma de escribir

función asíncrona myFunction () {

espera algo que regrese una promesa().catch(función (err){

consola.log(err);

});

}El comando de espera solo se puede usar en funciones asíncronas. Si se usa en funciones normales, se informará un error.

función asíncrona dbFuc(db) {

let docs = [{}, {}, {}];

// Informar un error

docs.forEach(function (doc) {

await db.post(doc);

});

}El código anterior informa un error porque await se usa en funciones ordinarias. Sin embargo, también existe un problema si los parámetros del método forEach se cambian a funciones asíncronas.

función asíncrona dbFuc(db) {

let docs = [{}, {}, {}];

// Puede obtener resultados incorrectos

docs.forEach(async function (doc) {

await db.post(doc);

});

}Lo anterior code Es posible que no funcione correctamente porque las tres operaciones db.post se ejecutarán al mismo tiempo, es decir, al mismo tiempo, en lugar de secuencialmente. La forma correcta de escribirlo es utilizar un bucle for.

función asíncrona dbFuc(db) {

let docs = [{}, {}, {}];

for (let doc of docs) {

await db.post(doc);

}

}Si realmente desea que se ejecuten varias solicitudes al mismo tiempo, puede utilizar el método Promise.all.

función asíncrona dbFuc(db) {

let docs = [{}, {}, {}];

let promesas = docs.map(( doc) => db.post(doc));

let results = await Promise.all(promises);

console.log(resultados);

}

// O utilice el siguiente método de escritura

async function dbFuc(db) {

let docs = [{}, {}, {} ] ;

let promesas = docs.map((doc) => db.post(doc));

let resultados = [];

para (dejar promesa de promesas) {

resultados.push(esperar promesa);

}

console.log(resultados);

} Creo que domina el método después de leer el caso de este artículo. Para obtener más información interesante, preste atención a otros artículos relacionados en Gxl.com.

Lectura recomendada:

Cómo usar la administración de memoria de Nodejs

Cómo usar la inyección de pantalla de esqueleto de página de Vue

Cómo usar la basura coleccionista