Maison > interface Web > js tutoriel > Analyse d'instance de promesse en js

Analyse d'instance de promesse en js

小云云
Libérer: 2018-02-05 10:00:45
original
2201 Les gens l'ont consulté

Tout le monde sait que nodejs est très rapide. Pourquoi est-il si rapide ? La raison est que node utilise des rappels asynchrones pour gérer les événements qui doivent être attendus, afin que le code continue de s'exécuter sans attendre quelque part. Mais il y a aussi un inconvénient. Lorsque nous avons de nombreux rappels, par exemple, après avoir exécuté ce rappel, nous devons exécuter le prochain rappel, puis exécuter le prochain rappel. Cela entraînera des couches d'imbrication et un code peu clair, ce qui est très difficile. . Il est facile d'entrer dans la « prison de rappel », ce qui peut facilement conduire à l'exemple suivant :

async(1, function(value){
 async(value, function(value){
 async(value, function(value){
  async(value, function(value){
  async(value, function(value){
   async(value, final);
  });
  });
 });
 });
});
Copier après la connexion

Cette façon d'écrire fera s'effondrer les gens, alors y a-t-il un moyen de résoudre ce problème. problème, ou y a-t-il une autre façon d'écrire ? La réponse est oui. Le nouvel objet de promesse d'es6 et l'attente asynchrone d'es7 peuvent résoudre ce problème. Bien sûr, l'objet de promesse sera présenté ici en premier, et l'attente asynchrone d'es7 sera partagée dans les articles suivants. L'objet Promise sera présenté ci-dessous.

2. Introduction

Promise est un objet utilisé pour gérer les opérations asynchrones. Il nous permet d'écrire des appels asynchrones de manière plus élégante, plus belle et plus facile à lire. Comme son nom l'indique, cela signifie promesse, ce qui signifie qu'après avoir utilisé Promise, il nous donnera certainement une réponse, peu importe si cela réussit ou échoue, il nous donnera une réponse, nous n'avons donc pas à nous soucier de sa fuite. loin, haha. Par conséquent, Promise a trois états : en attente (en cours), résolu (terminé) et rejeté (échec). Seules les structures renvoyées de manière asynchrone peuvent changer d'état. Par conséquent, il n’existe généralement que deux processus de promesse : en attente-> résolu ou en attente-> rejeté.

L'objet promise a également une méthode then plus couramment utilisée, qui est utilisée pour exécuter la fonction de rappel. La méthode then accepte deux paramètres, le premier est un rappel résolu avec succès, l'autre est un rappel rejeté qui a échoué. et le deuxième paramètres de rappel facultatifs en cas d'échec. Et la méthode then peut également renvoyer un objet de promesse, afin qu'il puisse être appelé dans une chaîne. Ensuite, le code :

var Pro = function (time) {
   //返回一个Promise对象
   return new Promise(function (resolve, reject) {
    console.log('123');
    //模拟接口调用
    setTimeout(function () {
     //这里告诉Promise 成功了,然后去执行then方法的第一个函数
     resolve('成功返回');
    }, time);
   })
  };
  (function(){
   console.log('start');
   Pro(3000)
   .then(function(data){
    console.log(data);
    return Pro(5000);})
   .then(function(data){
    console.log(data);
    console.log('end');
   })
  })();
Copier après la connexion

Dans le code ci-dessus, une variable Pro est définie, puis une fonction anonyme lui est assignée. La fonction renvoie un objet Promise, puis l'objet reçoit une fonction, et résoudre et suivre respectivement Lorsque la méthode de rejet est passée en paramètres, setTimeOut est utilisé pour simuler une requête asynchrone. Lorsque la méthode de résolution est exécutée, une fonction de la méthode then sera appelée. Les résultats sont les suivants :

3. API Promise 

1, Promise.resolve()
2, Promise.reject()
3 , Promise.prototype.then()
4, Promise.prototype.catch()
5, Promise.all() // Tous sont terminés, équivalent à
6, Promise.race( ) // Complétez-en simplement un, ce qui équivaut à ou

1. La fonction de Promise.resolve() est de convertir l'objet existant en un objet Promise résolul;Promise.resolve('test')==new. Promise(resolve =>resolve('test'))

2. Promise.reject() renvoie également un objet Promise, le statut est rejeté

3. introduit ci-dessus, le voici Plus d'introduction.

4. catch() : fonction de rappel lorsqu'une erreur se produit.

5. Promise.all() convient pour exécuter then() avec succès une fois que tous les résultats sont terminés. Par exemple :

let p1 =new Promise(function(resolve,reject){
   resolve(1);
  });
  let p2 = new Promise(function(resolve,reject){
   resolve(2);
  });
  let p3 = new Promise(function(resolve,reject){
   resolve(3);
  });
  Promise.all([p1, p2, p3]).then(function (results) {
   console.log('success:'+results);
  }).catch(function(r){
   console.log("error");
   console.log(r);
  });
Copier après la connexion

Sortie finale :

6. La fonction de Promise.race() est d'exécuter plusieurs instances en même temps, tant qu'il y en a un. Lorsqu'une instance change d'état, la promesse est remplacée par l'état modifié de cette instance

IV Exemple

var Pro = function () {
   //返回一个Promise对象
   return new Promise(function (resolve, reject) {
    //模拟接口调用
    setTimeout(function () {
     resolve(true);
    }, 1000);
   })
  };
  var Pro2 = function () {
   //返回一个Promise对象
   return new Promise(function (resolve, reject) {
    //模拟接口调用
    setTimeout(function () {
     resolve('Pro2成功执行');
    }, 1000);
   })
  };
  
  Pro().then(function(data){
   var val = data;
   console.log(val)
   if (val) {
    console.log(1111)
    return Pro2()
   }
   
  }).then(function(data1){
   console.log(data1)
  })
Copier après la connexion

Sortie :

.

De cette façon, vous pouvez utiliser la méthode then pour implémenter des appels en chaîne.

Recommandations associées :

Explication détaillée de l'extension ES6 Promise toujours instance de méthode

Comment utiliser correctement la promesse de jQuery

Explication détaillée de l'exécution séquentielle de promsie.all et promise

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal