Présentation de Promise et introduction aux méthodes courantes-js tutoriel-php.cn

Présentation de Promise et introduction aux méthodes courantes

零下一度

Libérer： 2017-07-16 14:46:23

original

2164 Les gens l'ont consulté

Présentation de Promise

L'objet Promise est une spécification proposée par le groupe de travail CommonJS pour fournir une interface unifiée pour les opérations asynchrones.

Alors, que sont les promesses ?

Tout d'abord, c'est un objet, ce qui signifie qu'il n'est pas utilisé différemment des autres Objets JavaScript et deuxièmement, il agit comme un proxy, agissant comme une opération asynchrone et Intermédiaire entre les fonctions de rappel . Il permet aux opérations asynchrones d'avoir une interface pour les opérations synchrones, de sorte que le programme ait un processus d'exécution synchrone normal et que les fonctions de rappel n'aient pas besoin d'être imbriquées couche par couche.

Pour faire simple, l'idée est que chaque tâche asynchrone renvoie immédiatement un objet Promise puisqu'elle revient immédiatement, le processus d'opération synchrone peut être utilisé. Cet objet Promises possède une méthode then qui vous permet de spécifier une fonction de rappel à appeler une fois la tâche asynchrone terminée.

Par exemple, l'opération asynchrone f1 renvoie un objet Promise et sa fonction de rappel f2 s'écrit comme suit.

(new Promise(f1)).then(f2);

Préface

La promesse est JavaScript En tant que solution d'opération asynchrone, j'ai récemment vu de nombreuses personnes dans le projet utiliser des classes de bibliothèque Promise, telles que bluebird, q,

jQuery.Deffered et d'autres méthodes de promesse polyfill. Lorsque je l'utilise, j'ai lu le long document. .Je l'apprécie sincèrement. Fatigué de dormir et de ne pas aimer.

Avec le développement d'es5 maintenant, node a pris en charge les promesses dans la version 0.12. Côté client, la plupart des navigateurs prennent également en charge Promise. Si vous souhaitez être compatible avec les navigateurs de version inférieure, vous pouvez ajouter es5. -shim et autres promesses de polyfill. Sans plus tarder, jetons un œil à l'introduction détaillée :

Utilisation

Promesse de scénarios courants.

Gestion des rappels asynchrones
Traitement synchrone de plusieurs fonctions asynchrones
Dépendances asynchrones sur les rappels asynchrones
Encapsuler une méthode de saisie unifiée ou
gestion des erreurs

1. Gestion Rappel asynchrone

Utilisation de base de Promise pour gérer les rappels asynchrones.

function Pro1(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve(&#39;pro1&#39;)
  }, 300)
 })
}
//调用
Pro1()
.then(function(data){
 console.log(data) //pro1
})
.catch(function(err){
 throw new Error(err)
})

Copier après la connexion

2. Traitement synchrone de plusieurs fonctions asynchrones

Parfois, nous devons envoyer deux ajax, j'espère qu'ils le pourront. Pour renvoyer les données ensemble, vous pouvez utiliser la méthode suivante.

function Pro1(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve(&#39;pro1&#39;)
  }, 300)
 })
}
function Pro2(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve(&#39;pro2&#39;)
  }, 300)
 })
}
//调用
var Pro = Promise.all([Pro1(), Pro2()]);
Pro
.then(function(data){
 console.log(data[0], data[1]) //Pro1 Pro2
})
.catch(function(err){
 throw new Error(err)
})

Copier après la connexion

3. Dépendances asynchrones Rappels asynchrones

Certains scénarios sont asynchrones Si vous comptez sur une autre valeur de retour asynchrone, vous pouvez utiliser l'utilisation suivante.

Par exemple : utilisez un numéro de commande pour obtenir de manière asynchrone les détails de la commande, puis utilisez l'ID du produit dans les détails de la commande pour obtenir les

détails du produit.

function Pro1(orderId){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   var orderInfo = {
    orderId: orderId,
    productIds: [&#39;123&#39;, &#39;456&#39;]
   }
   resolve(orderInfo.productIds)
  }, 300)
 })
}
function Pro2(productIds){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   var products = productIds.map(function(productId){
    return {
     productId: productId,
     name: &#39;衣服&#39;
    }
   })
   resolve(products)
  }, 300)
 })
}
//调用

Pro1(&#39;abc123&#39;)
.then(function(productIds){
 console.log(&#39;商品id&#39;,productIds) 
 return Pro2(productIds)
})
.then(function(products){
 console.log(&#39;商品详情&#39;,products) 
})
.catch(function(err){
 throw new Error(err)
})

Copier après la connexion

4. Encapsuler la méthode de saisie unifiée ou la gestion des erreurs

Gestion des erreurs

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!