Introduction détaillée aux points de connaissance sur les promesses en js

Je vais maintenant partager avec vous une brève discussion sur l'utilisation des promesses js. Il a une très bonne valeur de référence et vous le comprendrez après avoir lu cet article. J'espère que cela aide tout le monde.

1. Contexte

Tout le monde sait que nodejs est très rapide. Pourquoi est-il si rapide ? process Les événements qui doivent être attendus permettent au code de continuer à 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);
  });
  });
 });
 });
});

Cette façon d'écrire fera s'effondrer les gens, alors y a-t-il un moyen de résoudre ce 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 qui est utilisé pour gérer les opérations asynchrones et nous permet d'écrire des appels asynchrones. à écrire, plus beau 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');
   })
  })();

Dans le code ci-dessus, une variable Pro est définie, puis une fonction anonyme lui est affectée. La fonction renvoie un objet Promise, puis reçoit une fonction dans l'objet. , et respectivement résout et 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.
2. Promise.reject()
3. Promise.prototype.then()
4. Promise.prototype.catch()
5. Équivalent à et
6. Promise.race() // Complétez-en un, équivalent à ou

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

2. Promise.reject() renvoie également un objet Promise avec un statut rejeté <🎜 ; >

3. La méthode then a été présentée ci-dessus et ne sera pas présentée ici.

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);
  });

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

4. Exemple <🎜 ; >

Sortie :

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)
  })

De cette façon, la méthode then peut être utilisée pour implémenter des appels en chaîne.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Modèle de médiateur JavaScript (tutoriel détaillé)

Comment utiliser les éléments Dom dans jQuery ?

Comment implémenter un composant de barre de progression sensible aux événements dans Vue

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!