1.1 Fonction de rappel
Fonction de rappel : Passez la fonction A en paramètre pour appeler une autre fonction B, alors A est la fonction de rappel. [Recommandé : tutoriel vidéo JavaScript]
Quelques exemples nommés rappels
function Combien de chiens avez-vous(fn){
fn('un chien')
}fonction compter les chiens(nombre){
console.log (quantité)
}
Combien de chiens avez-vous (compter les chiens) // un chienRappel anonyme
function Combien de chiens avez-vous(fn){
fn('un chien')
}
Combien de chiens avez-vous (function(number){console.log(number)
}) // un chien Exemples courants
Les fonctions de rappel sont utilisées dans jQuery et les rappels anonymes sont utilisés ici.
$("#btn").click(function(){
console.log('cliquez sur moi')
})1.2 L'enfer du rappel (Inconvénient du rappel 1)
L’enfer des rappels : fait référence à la situation où les rappels sont trop imbriqués, rendant le code difficile à comprendre.
let info = []function Combien de chiens avez-vous (fn){
fn('un chien')
}function Combien de chats avez-vous(fn){
fn('un chat')
}la fonction sait (quantité, rappel){
info.push (quantité)
console.log(info) if(rappel){
rappel()
}
}//Commencez à appeler S'il y a quelques couches de plus, il sera difficile de comprendre combien de chiens vous avez (fonction(nombre de chiens){
console.log(nombre de chiens)
Compris (nombre de chiens, fonction(){
Combien de chats avez-vous(fonction(nombre de chats){
console.log(nombre de chats)
Compris (nombre de chats)
})
})
})1.3 Comment résoudre le problème sans utiliser Promise
Utilisez des fonctions nommées au lieu de fonctions anonymes
let info = []function Combien de chiens avez-vous (fn){
fn('un chien')
}function Combien de chats avez-vous(fn){
fn('un chat')
}la fonction sait (quantité, rappel){
info.push (quantité)
console.log(info) if(rappel){
rappel()
}
}la fonction vous indique le nombre de chats (nombre de chats){
console.log(nombre de chats)
Compris (nombre de chats)
}fonction continue à compter(){
Combien de chats avez-vous (dites-vous le nombre de chats)
}la fonction vous indique le nombre de chiens (nombre de chiens){
console.log(nombre de chiens)
Compris (nombre de chiens, continuez à compter)
}
Combien de chiens avez-vous (dites-vous le nombre de chiens) // Cela ne semble pas être beaucoup mieux. . .1.4 Les méthodes de rappel sont différentes et doivent être mémorisées séparément (inconvénient du rappel 2)
readFile('C:\1.txt',function (erreur, données) { // rappel dans la méthode de lecture du fichier node.js if(error) {
console.log('succès')
console.log(data.toString())
} autre {
console.log('Échec de la lecture du fichier')
}
})
$.ajax({ //URL de rappel : '/2.txt' dans la méthode ajax dans jQuery
succès : fonction (réponse) {
console.log('succès')
},
erreur : fonction(){
console.log('échec')
}
})Les promesses sont une solution de programmation asynchrone plus raisonnable et plus puissante que les solutions traditionnelles - rappels et événements. Il a d'abord été proposé et implémenté par la communauté ES6 l'a écrit dans le standard de langage, a unifié son utilisation et a fourni les objets Promise de manière native.
3.1 Principe de mise en œuvre
ES6 stipule que l'objet Promise est un constructeur utilisé pour générer des instances Promise. En renvoyant une instance de l'objet Promise à l'intérieur de la fonction, vous pouvez utiliser les propriétés et les méthodes de Promise pour l'étape suivante.
function nom de la fonction(){ return new Promise(function(resolve, rejet) {
// ... du code si (/* opération asynchrone réussie */){
solve(value); // Appelé lorsque l'opération asynchrone réussit et transmet le résultat en paramètre } else {
rejet(erreur); // Appelé lorsqu'une défaillance asynchrone se produit, en passant l'erreur en paramètre }
})
}3.2 Logique d'appel
Ni S1 ni E1 n'ont signalé d'erreur, exécutez S2 (résoudre l'exécution, le système pense que c'est terminé et aucune erreur n'est signalée)
Si S1 ou E1 signale une erreur, exécutez E2 (rejetez l'exécution, le système pense que ce n'est pas fait et signale une erreur)
Entrée front-end (vue) au cours de maîtrise : entrez dans l'apprentissage
4.1 Propriétés et méthodes de Promesse
propriété
Promise.prototype représente la méthode prototype du constructeur Promise
Promesse.prototype.then()
Renvoyez une promesse. Il nécessite au plus deux paramètres : les fonctions de rappel de réussite et d'échec de la promesse.
Promesse.prototype.catch()
Renvoyez une promesse et gérez le rejet. Équivalent à Promise.prototype.then (non défini, onRejected)
Promesse.prototype.finally()
La méthode enfin() renvoie une promesse. Après avoir exécuté then() et catch(), la fonction de rappel spécifiée par enfin sera exécutée. Évitez la situation où la même instruction doit être écrite une fois dans then() et catch().
Promesse.all (itérable)
Renvoie une instance Promise. Une fois que toutes les promesses dans les paramètres itérables sont résolues, le rappel termine la résolution.
Promesse.race (itérable)
Renvoie une promesse, accompagnée de la valeur de retour de l'objet de promesse ou du motif de l'erreur de rejet, tant qu'il existe un objet de promesse dans l'itérable qui « résout » ou « rejette ».
Promesse.resolve()
Renvoie un objet Promise qui se résout avec la valeur donnée. Mais si cette valeur est un thenable (c'est-à-dire avec une méthode then), la promesse renvoyée "suivra" l'objet thenable et adoptera son état final (faisant référence à résolu/rejeté/en attente/réglé si la valeur entrante elle-même est) ; un objet de promesse, l'objet est renvoyé comme valeur de retour de la méthode Promise.resolve ; sinon, l'objet de promesse est renvoyé avec cette valeur comme statut de réussite.
Promesse.rejeter()
Renvoie un objet Promise avec le paramètre de raison du rejet.
4.2 Réécrire l'exemple de l'enfer de rappel sous forme de promesse
Vous pouvez voir qu'après avoir utilisé Promise, la logique devient très intuitive et écrite de manière plus complète.
Lorsque Promise est imbriquée dans Promise, c'est-à-dire lorsque Promise est chaînée, faites attention à l'échec de la transmission des informations. Lorsque nous utilisons la chaîne Promise, si chaque étape nécessite des données de l'étape précédente, les paramètres doivent être transmis avec succès par la résolution. . Les paramètres, en cas d'échec, transmettent les paramètres via le rejet. Si vous oubliez de transmettre les paramètres, vous n'obtiendrez pas le résultat souhaité.
solve renvoie les données réussies au prochain rappel
Reject renvoie les données ayant échoué au prochain rappel.
Transmettez un paramètre à résoudre ici et remplacez-le par un exemple d'échec. Ne transmettez pas les paramètres à rejeter en premier. En cas d'échec, le prochain rappel n'obtiendra pas les données.
Passer les paramètres à rejeter
Nous pouvons voir que même si le rappel d'échec est passé, le prochain rappel de succès est toujours exécuté. Puisqu'il n'est pas connu () renvoie undefined par défaut, cela équivaut à un échec traité. le prochain rappel sera implémenté.
Modifiez-le comme prévu, c'est-à-dire qu'il ne sera pas appelé en cas d'échec.
Forme abrégée pour ne pas faire appel à l'échec
Une fois la situation ci-dessus exécutée, le rappel de réussite dans .then (sauf pour les chiens) n'est pas exécuté. Ajoutons un rappel d'échec pour voir.
Vous pouvez également renvoyer une résolution afin que les rappels ultérieurs réussis puissent être exécutés.
4.3 Demande
Le chargement de l'image écrit le chargement de l'image sous forme de promesse. Une fois le chargement terminé, l'état de la promesse change.
const preloadImage = fonction (chemin) {
retourner une nouvelle promesse (fonction (résoudre, rejeter) {
const image = nouvelle image ();
image.onload = résoudre ;
image.onerror = rejeter ;
image.src = chemin ;
});
} ;La combinaison de la fonction Générateur et de la Promesse (pour plus de détails, voir le lien de référence, le tutoriel de Ruan Yifeng)
5.1 attendre
cas réussi 
Utilisez try catch en cas d'échec
Utilisez wait avec try catch, qui est plus complet.
Les objets Promise peuvent être utilisés pour transformer des fonctions ordinaires en formes renvoyant une promesse afin de résoudre le problème de l'enfer des rappels.
Comprendre la logique d'appel du succès et de l'échec de Promise et pouvoir l'ajuster de manière flexible.
Comprenez les connaissances de base, utilisez-les en premier, puis intégrez et absorbez lentement les connaissances.
Ce qui précède est le contenu détaillé de l'exemple d'analyse du principe et de l'utilisation d'ES6 Promise !
