1.1 Función de devolución de llamada
Función de devolución de llamada: pase la función A como parámetro para llamar a otra función B, luego A es la función de devolución de llamada. [Recomendado: vídeo tutorial de JavaScript]
Algunos ejemplos llamados devoluciones de llamada
función ¿Cuántos perros tienes (fn){
fn('un perro')
}función contar perros(número){
consola.log(cantidad)
}
¿Cuántos perros tienes (cuenta perros) // un perro?Devolución de llamada anónima
función ¿Cuántos perros tienes (fn){
fn('un perro')
}
¿Cuántos perros tienes (función(número){console.log(número)
}) // un perro Ejemplos comunes
Las funciones de devolución de llamada se utilizan en jQuery y aquí se utilizan devoluciones de llamada anónimas.
$("#btn").hacer clic(función(){
console.log('haz clic en mí')
})1.2 Infierno de devolución de llamada (desventaja 1 de devolución de llamada)
Infierno de devolución de llamada: se refiere a la situación en la que las devoluciones de llamada están demasiado anidadas, lo que hace que el código sea difícil de entender.
let info = []función ¿Cuántos perros tienes (fn){
fn('un perro')
}función ¿Cuántos gatos tienes (fn){
fn('un gato')
}la función sabe (cantidad, devolución de llamada){
info.push(cantidad)
console.log(información) if(devolución de llamada){
llamar de vuelta()
}
}//Comienza a llamar. Si hay algunas capas más que esta, será difícil entender cuántos perros tienes (función (número de perros) {
console.log(número de perros)
Entendido (número de perros, función(){
Cuantos gatos tienes(funcion(cantidad de gatos){
console.log(número de gatos)
Entendido (número de gatos)
})
})
})1.3 Cómo resolver el problema sin usar Promise
Utilice funciones con nombre en lugar de funciones anónimas
let info = []función ¿Cuántos perros tienes (fn){
fn('un perro')
}función ¿Cuántos gatos tienes (fn){
fn('un gato')
}la función sabe (cantidad, devolución de llamada){
info.push(cantidad)
console.log(información) if(devolución de llamada){
llamar de vuelta()
}
}la función te dice la cantidad de gatos (cantidad de gatos){
console.log(número de gatos)
Entendido (número de gatos)
}función seguir contando(){
Cuantos gatos tienes (te digo el número de gatos)
}función te dice el número de perros (cantidad de perros){
console.log(número de perros)
Entendido (número de perros, sigue contando)
}
Cuantos perros tienes (te digo el número de perros) // No parece estar mucho mejor. . .1.4 Los métodos de devolución de llamada son diferentes y deben recordarse por separado (desventaja de devolución de llamada 2)
readFile('C:\1.txt',function (error, data) { // devolución de llamada en node.js lee el método del archivo if(error) {
console.log('éxito')
consola.log(data.toString())
} demás {
console.log('Error al leer el archivo')
}
})
$.ajax({ //URL de devolución de llamada:'/2.txt' en el método ajax en jQuery
éxito: función (respuesta) {
console.log('éxito')
},
error: función(){
console.log('fallo')
}
})Las promesas son una solución para la programación asincrónica que es más razonable y poderosa que las soluciones tradicionales: devoluciones de llamada y eventos. Fue propuesto e implementado por primera vez por la comunidad. ES6 lo escribió en el estándar del lenguaje, unificó su uso y proporcionó objetos Promise de forma nativa.
3.1 Principio de implementación
ES6 estipula que el objeto Promise es un constructor utilizado para generar instancias de Promise. Al devolver una instancia del objeto Promise dentro de la función, puede usar las propiedades y métodos de Promise para el siguiente paso.
función nombre de la función(){ devolver nueva Promesa(función(resolver, rechazar) {
// ... algún código si (/* operación asincrónica exitosa */){
resolve(value); // Se llama cuando la operación asincrónica es exitosa y pasa el resultado como parámetro } else {
rechazar(error); // Se llama cuando ocurre una falla asincrónica, pasando el error como parámetro }
})
}3.2 Lógica de llamada
Ni S1 ni E1 informaron un error, ejecute S2 (resuelva la ejecución, el sistema cree que está hecho y no se informa ningún error)
Si S1 o E1 informan un error, ejecute E2 (rechace la ejecución, el sistema cree que no ha terminado y informa un error)
Curso de entrada al dominio de front-end (vue): ingrese al aprendizaje
4.1 Propiedades y métodos de Promesa
propiedad
Promise.prototype representa el método prototipo del constructor Promise
Promesa.prototipo.entonces()
Devolver una promesa. Requiere como máximo dos parámetros: las funciones de devolución de llamada de éxito y fracaso de la Promesa.
Promesa.prototipo.catch()
Devuelve una promesa y gestiona el rechazo. Equivalente a Promise.prototype.then(indefinido, onRejected)
Promesa.prototipo.finalmente()
El método finalmente () devuelve una Promesa. Después de ejecutar then () y catch (), se ejecutará la función de devolución de llamada especificada por finalmente. Evite la situación en la que la misma declaración deba escribirse una vez en then() y catch().
Promesa.all(iterable)
Devuelve una instancia de Promise. Una vez resueltas todas las promesas en los parámetros iterables, la devolución de llamada completa la resolución.
Promesa.carrera(iterable)
Devuelve una promesa, acompañada del valor de retorno del objeto de promesa o el motivo del error del rechazo, siempre que haya un objeto de promesa en el iterable que "resuelva" o "rechace".
Promesa.resolve()
Devuelve un objeto Promise que se resuelve con el valor dado. Pero si este valor es entonces (es decir, con un método then), la promesa devuelta "seguirá" al objeto entonces y adoptará su estado final (refiriéndose a resuelto/rechazado/pendiente/resuelto si el valor entrante en sí lo es); un objeto de promesa, entonces el objeto se devuelve como el valor de retorno del método Promise.resolve; de lo contrario, el objeto de promesa se devuelve con este valor como estado de éxito;
Promesa.rechazar()
Devuelve un objeto Promise con el parámetro de motivo del rechazo.
4.2 Reescribir el ejemplo en el infierno de devolución de llamada en forma de Promesa
Puede ver que después de usar Promise, la lógica se vuelve muy intuitiva y está escrita de manera más completa.
Cuando Promise está anidado en Promise, es decir, cuando Promise está encadenado, preste atención a la falla en la transmisión de información. Cuando usamos la cadena Promise, si cada paso requiere datos del paso anterior, los parámetros deben pasarse con éxito a través de la resolución. Los parámetros, si fallan, páselos mediante rechazo. Si olvida pasar los parámetros, no obtendrá el resultado deseado.
resolver devuelve datos exitosos a la siguiente devolución de llamada
Rechazar devuelve datos fallidos a la siguiente devolución de llamada.
Pase un parámetro para resolver aquí y cámbielo a un ejemplo de falla. No pase parámetros para rechazar primero. Si falla, la siguiente devolución de llamada no obtendrá los datos.
Pasar parámetros para rechazar
Podemos ver que incluso si se pasa la devolución de llamada fallida, la siguiente devolución de llamada exitosa aún se ejecuta. Dado que no se sabe () devuelve indefinido de forma predeterminada, es equivalente a que se haya procesado la falla. se implementará la próxima devolución de llamada.
Cámbielo a lo esperado, es decir, no se llamará si falla.
Forma breve para no invocar el fracaso
Después de ejecutar la situación anterior, la devolución de llamada exitosa en .then (excepto para perros) no se ejecuta. Agreguemos una devolución de llamada fallida para ver.
También puede devolver la resolución para que se puedan ejecutar devoluciones de llamada exitosas posteriores.
4.3 Aplicación
Cargar la imagen escribe la carga de la imagen como una Promesa. Una vez que se completa la carga, el estado de la Promesa cambia.
const preloadImage = función (ruta) {
devolver nueva Promesa (función (resolver, rechazar) {
imagen constante = nueva imagen();
imagen.onload = resolver;
image.onerror = rechazar;
imagen.src = ruta;
});
};La combinación de la función Generador y Promesa (para más detalles, consulte el enlace de referencia, el tutorial de Ruan Yifeng)
5.1 esperar
caso exitoso 
Utilice try catch en caso de fallo
Utilice await con try catch, que es más completo.
Los objetos de promesa se pueden utilizar para cambiar funciones ordinarias a formas que devuelven promesas para resolver el problema del infierno de devolución de llamadas.
Comprenda la lógica de llamadas de éxito y fracaso de Promise y pueda ajustarla de manera flexible.
Comprenda el conocimiento básico, utilícelo primero e integre y absorba el conocimiento lentamente.
¡Lo anterior es el contenido detallado del análisis de ejemplo del principio y uso de ES6 Promise!
