Callback and Promise, encapsulez setTimeout dans Promise
- Pourquoi l'enfer du rappel se produit-il?
- Quel genre de voile porte Promise?
Tout d'abord, l'émergence de Promise est de sauver toutes les personnes piégées dans l'enfer des rappels.Je crois que l'enfer des rappels est l'un des problèmes les plus gênants pour les développeurs JavaScript! Surtout quand j'ai repris le code des prédécesseurs, je l'ai ouvert et j'ai vu le rappel imbriqué plein, est-ce que je veux vraiment distribuer la lettre de démission; alors comment la Promesse sauve-t-elle tout le monde dans la douleur?
table des matières
1. L'ordre des fonctions de rappel et l'enfer des rappels
2. Minuterie
3. Demande de réseau
4. promettre
5. fonction de sommeil
L'ordre des fonctions de rappel et l'enfer des rappels
Notre exemple de Naruto (je crois que la plupart d'entre vous l'ont vu): Si vous êtes Kakashi, quand il y a trop d'ennemis, vous ouvrirez la roue d'écriture. Une fois la roue d'écriture ouverte, vous devez utiliser Chidori et Chidori avant de roter. Une fois l'oiseau épuisé, vous devez faire attention au clone de l'ombre;
Ce qui suit est exprimé en pseudo-code:
卡卡西.addEventListener('敌人太多', function(){
卡卡西.addEventListener('快嗝屁了',function(){
写轮眼();
卡卡西.addEventListener('写轮眼开完了',function(){
跑路();
})
})
})
L'exemple ci-dessus est un enfer commun des rappels, c'est pourquoi de nombreuses personnes le font souvent lorsqu'elles traitent trop de choses au bureau et ne savent pas ce qu'elles font.
Afin de ne pas trop imbriquer trop d'événements d'enregistrement et de fonctions de rappel, les développeurs ont ensuite pensé à divers modèles, et finalement la promesse a été incorporée dans la norme ES6;
Minuteur
Timer est une méthode très courante en JavaScript, et sa syntaxe est assez similaire à l'événement d'inscription précédent
var timeoutID = scope.setTimeout(code[, delay]);
Le premier paramètre est la fonction de rappel (Callback) mentionnée ci-dessus et le deuxième paramètre est le nombre de microsecondes;
Par exemple:
Supposons que votre colocataire soit une grosse maison qui aime faire fonctionner plusieurs séances en même temps. Un jour cette grosse maison vous a dit: "Hé, aidez-moi à allumer l'ordinateur dans dix minutes. Je veux y retourner, s'il vous plaît!"
setTimeout(() => 开电脑， 10*60*1000)；
La minuterie intégrée déclenchera cet événement après dix minutes;
Remarque:clearSetTimeout(timerId) vous pouvez arrêter l'événement du minuteur
Habituellement, cette grosse maison ne vous laissera pas partir si facilement, il vous dira aussi: "Aidez-moi à me connecter à Steam deux minutes après l'ouverture, puis aidez-moi avec le prochain match."
setTimeout(()=>{
打开电脑();
you.addEventListener('opened',()=>{
setTimeout(()=>{
连上steam();
},2*60*1000)
})
},10*60*1000)
Demande de réseau
En JavaScript, nous ne voulons pas qu'une opération prenne trop de temps, tout comme si un client prend dix minutes pour commander un repas, le serveur ne peut pas servir d'autres clients pendant cette période. Par conséquent, de nombreuses opérations à long terme, telles que les demandes d'E / S et de réseau, utilisent généralement un traitement asynchrone.
Il existe deux types principaux de requêtes réseau: XMLHTTPRequest (le fameux ajax est encapsulé pour cela), et plus tard fetch. XHR enregistre principalement les loadévénements pour l' événement demandé afin de surveiller la réponse (réponse). Le moyen le plus simple estaddEventListener
function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();
Plus tard, le standard fetch a utilisé l'appel en chaîne de la méthode then.
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
Ceci est alors fourni par le prototype de la promesse, et fetch est l'entité de la promesse;
Promettre
Promesse (promesse), promesse peut tenir la promesse (résolution), promesse d'échec (rejet). Avant que le résultat de la promesse n'apparaisse, il entrera dans un état (En attente) dans lequel vous ne savez pas s'il s'agit d'un succès ou d'un échec.
Promesse -> en attente -> (résoudre / rejeter)
Heureusement, l'API Promise est très conviviale.Vous pouvez utiliser les deux méthodes then et catch pour insérer la fonction de rappel afin de traiter les deux structures finales;
function success(){
// do something when success
}
function fail(){
// do something when fail
}
(Statement will pending)
.then(success)
.catch(fail)
Enfin, que ce soit alors ou attraper, Callback sera Promise.
fetch('https://your-domain/api.json')
.then(res=>res.json()) /* 这也是异步 */
.then(j=>console.log(j.id)) /* json() resolve 之后 */
.catch(()=>alert('fail'))
fonction de sommeil (encapsuler setTimeout)
Ensemble traditionnel
setTimeout( ()=>{
} , 1000)
Nous espérons que cela peut faire une pause pendant un certain temps et effectuer certaines opérations connexes, mais nous ne voulons pas écrire des fonctions de rappel trop imbriquées
/* 最终希望的函数 sleep */
sleep(5).then(()=>console.log('5秒过去'))
Modification supplémentaire
function sleep(sec){
setTimeout(()=>{
},sec*1000)
}
Cela devrait être le cas au départ, mais la méthode then ne peut pas être utilisée sans Promise
function sleep(sec){
return new Promise((resolve,reject)=>{
setTimeout(()=>resolve(),sec*1000)
})
Avant le déclenchement de setTimeout, la fonction de veille sera dans l'état en attente, mais le rejet n'est toujours pas utile, donc une fonctionnalité est ajoutée ici, si elle dépasse dix secondes, elle sera rejetée;
/* 想象中的sleep */
sleep(5).then(()=>{
})
sleep(11).then(()=>{
}).catch(e=>console.log(e)) // Error:睡太久了八？
La combinaison des modifications ci-dessus est:
function sleep(sec){
return new Promise((resolve,reject)=>{
if(sec > 10) reject(new Error('睡太久了八！'));
setTimeout(()=>resolve(),sec*1000)
})
}
sleep(11).catch(e=>console.log(e)) // Error: 睡太久了八！
Fin
Cet article est un petit enregistrement réalisé lorsque j'ai rencontré le point de connaissance promis lorsque j'apprenais Vue;