recherche

Maison >interface Web >js tutoriel >Instructions d'utilisation de Promise dans ES6

Instructions d'utilisation de Promise dans ES6

php中世界最好的语言
php中世界最好的语言original
2018-05-12 11:20:291356parcourir

Cette fois, je vais vous apporter des instructions pour utiliser Promise dans ES6. Quelles sont les précautions lors de l'utilisation de Promise dans ES6. Voici un cas pratique, jetons un coup d'oeil.

Bien sûr, cela ne veut pas dire que Burst est devenu un full stack. Les compétences de l'ensemble de la pile sont très concentrées, non seulement le front-end peut écrire du HTML et certaines interactions, mais le back-end est familier avec l'ajout, la suppression, la vérification et la modification de la base de données.

Tous ceux qui sont entrés en contact avec Node doivent savoir que Node est célèbre pour ses rappels asynchrones (Async). Son asynchronicité améliore l'efficacité d'exécution du programme, mais elle réduit également la lisibilité du programme. Si nous avons plusieurs opérations asynchrones et que cette dernière opération nécessite l'exécution des données renvoyées par l'opération précédente, alors selon les règles générales d'exécution de Node, les opérations asynchrones ordonnées sont généralement imbriquées couche par couche.

Afin de résoudre ce problème, ES6 a proposé l'implémentation de Promise.

Signification

Promesse Objet utilisé pour l'achèvement final (ou l'échec) d'une opération asynchrone et sa valeur de résultat exprimer. Pour faire simple, il est utilisé pour traiter les opérations asynchrones. Si le traitement asynchrone réussit, l'opération réussie sera exécutée. Si le traitement asynchrone échoue, l'erreur sera capturée ou les opérations suivantes seront arrêtées.

Sa représentation générale est : 

new Promise(
  /* executor */
  function(resolve, reject) {
    if (/* success */) {
      // ...执行代码
      resolve();
    } else { /* fail */
      // ...执行代码
      reject();
    }
  }
);

Parmi eux, le paramètre exécuteur dans Promise est une fonction d'exécuteur, qui a deux paramètres, résoudre et rejeter. Il contient généralement des opérations asynchrones. Si l'opération asynchrone réussit, vous pouvez appeler solve() pour définir le statut de l'instance sur accompli, c'est-à-dire terminé. Si elle échoue, vous pouvez appeler le rejet. () pour définir le statut de l'instance sur rejeté, c'est-à-dire échoué.

Nous pouvons considérer l'objet Promise comme une chaîne de montage en usine. Pour la chaîne de montage, du point de vue de ses fonctions, il n'a que trois états, l'un étant l'état initial (lorsqu'il vient d'être allumé). ), et l'autre est l'état initial. L'un est que le produit traité réussit, et l'autre est que le produit traité échoue (un échec s'est produit). De même pour l'objet Promise, il possède également trois états :

  1. en attente : L'état initial, également appelé état indécis, est l'état après avoir appelé la fonction exécuteur exécuteur lors de l'initialisation de la Promesse.

  2. réalisé : état d'achèvement, ce qui signifie que l'opération asynchrone est réussie.

  3. rejeté : statut d'échec, ce qui signifie que l'opération asynchrone a échoué.

Il n'y a que deux états pouvant être convertis, à savoir

  1. L'opération est réussie : en attente -> >

    2. Échec de l'opération : en attente -> rejeté en attente).

    3. Méthodes

Promise.prototype.then()L'objet Promise contient le then méthode, Then() renvoie un objet Promise après avoir été appelé, ce qui signifie que l'objet Promise instancié peut être appelé dans une chaîne, et cette méthode then() peut recevoir deux fonctions, l'une est la fonction après un traitement réussi et l'autre est la fonction de résultat d’erreur.

est le suivant :

Ici, nous nous concentrons principalement sur le statut de l'objet Promise renvoyé après l'appel de la méthode promise1.then(). Est-il en attente, rempli ou rejeté. ?

Le statut de l'objet Promise renvoyé est principalement basé sur la valeur renvoyée par la méthode promise1.then(), qui est grossièrement divisée dans les situations suivantes : 

var promise1 = new Promise(function(resolve, reject) {
 // 2秒后置为接收状态
 setTimeout(function() {
  resolve('success');
 }, 2000);
});
promise1.then(function(data) {
 console.log(data); // success
}, function(err) {
 console.log(err); // 不执行
}).then(function(data) {
 // 上一步的then()方法没有返回值
 console.log('链式调用：' + data); // 链式调用：undefined 
}).then(function(data) {
 // ....
});

Si la méthode then() renvoie une valeur de paramètre, alors la promesse renvoyée deviendra l'état de réception.

    Si une exception est levée dans la méthode then(), la promesse renvoyée sera rejetée.

    2. Si la méthode then() appelle la méthode solve(), la promesse renvoyée deviendra l'état de réception.

    3. Si la méthode then() appelle la méthode rejet(), la promesse renvoyée sera rejetée.

    4. Si la méthode then() renvoie une nouvelle instance de Promise avec un état inconnu (en attente), alors la nouvelle Promise renvoyée est dans un état inconnu.

    5. Si la méthode then() ne spécifie pas explicitement solve(data)/reject(data)/return data, alors la nouvelle promesse renvoyée est l'état de réception, qui peut être exécuté en couche par couche Transmettez-le.

    6. Les exemples de conversion sont les suivants : 
  6. var promise2 = new Promise(function(resolve, reject) {
 // 2秒后置为接收状态
 setTimeout(function() {
  resolve('success');
 }, 2000);
});
promise2
 .then(function(data) {
  // 上一个then()调用了resolve，置为fulfilled态
  console.log('第一个then');
  console.log(data);
  return '2';
 })
 .then(function(data) {
  // 此时这里的状态也是fulfilled, 因为上一步返回了2
  console.log('第二个then');
  console.log(data); // 2
  return new Promise(function(resolve, reject) {
   reject('把状态置为rejected error'); // 返回一个rejected的Promise实例
  });
 }, function(err) {
  // error
 })
 .then(function(data) {
  /* 这里不运行 */
  console.log('第三个then');
  console.log(data);
  // ....
 }, function(err) {
  // error回调
  // 此时这里的状态也是fulfilled, 因为上一步使用了reject()来返回值
  console.log('出错：' + err); // 出错：把状态置为rejected error
 })
 .then(function(data) {
  // 没有明确指定返回值，默认返回fulfilled
  console.log('这里是fulfilled态');
});

    Promise.prototype.catch()

    catch()方法和then()方法一样，都会返回一个新的Promise对象，它主要用于捕获异步操作时出现的异常。因此，我们通常省略then()方法的第二个参数，把错误处理控制权转交给其后面的catch()函数，如下：

    var promise3 = new Promise(function(resolve, reject) {
 setTimeout(function() {
  reject('reject');
 }, 2000);
});
promise3.then(function(data) {
 console.log('这里是fulfilled状态'); // 这里不会触发
 // ...
}).catch(function(err) {
 // 最后的catch()方法可以捕获在这一条Promise链上的异常
 console.log('出错：' + err); // 出错：reject
});

    Promise.all()

    Promise.all()接收一个参数，它必须是可以迭代的，比如数组。

    它通常用来处理一些并发的异步操作，即它们的结果互不干扰，但是又需要异步执行。它最终只有两种状态：成功或者失败。

    它的状态受参数内各个值的状态影响，即里面状态全部为fulfilled时，它才会变成fulfilled，否则变成rejected。

    成功调用后返回一个数组，数组的值是有序的，即按照传入参数的数组的值操作后返回的结果。如下：

    // 置为fulfilled状态的情况
var arr = [1, 2, 3];
var promises = arr.map(function(e) {
 return new Promise(function(resolve, reject) {
  resolve(e * 5);
 });
});
Promise.all(promises).then(function(data) {
  // 有序输出
 console.log(data); // [5, 10, 15]
 console.log(arr); // [1, 2, 3]
});
    // 置为rejected状态的情况
var arr = [1, 2, 3];
var promises2 = arr.map(function(e) {
 return new Promise(function(resolve, reject) {
  if (e === 3) {
   reject('rejected');
  }
  resolve(e * 5);
 });
});
Promise.all(promises2).then(function(data) {
 // 这里不会执行
 console.log(data);
 console.log(arr);
}).catch(function(err) {
 console.log(err); // rejected
});

    Promise.race()

    Promise.race()和Promise.all()类似，都接收一个可以迭代的参数，但是不同之处是Promise.race()的状态变化不是全部受参数内的状态影响，一旦参数内有一个值的状态发生的改变，那么该Promise的状态就是改变的状态。就跟race单词的字面意思一样，谁跑的快谁赢。如下：

    var p1 = new Promise(function(resolve, reject) {
 setTimeout(resolve, 300, 'p1 doned');
});
var p2 = new Promise(function(resolve, reject) {
 setTimeout(resolve, 50, 'p2 doned');
});
var p3 = new Promise(function(resolve, reject) {
 setTimeout(reject, 100, 'p3 rejected');
});
Promise.race([p1, p2, p3]).then(function(data) {
 // 显然p2更快，所以状态变成了fulfilled
 // 如果p3更快，那么状态就会变成rejected
 console.log(data); // p2 doned
}).catch(function(err) {
 console.log(err); // 不执行
});

    Promise.resolve()

    Promise.resolve()接受一个参数值，可以是普通的值，具有then()方法的对象和Promise实例。正常情况下，它返回一个Promise对象，状态为fulfilled。但是，当解析时发生错误时，返回的Promise对象将会置为rejected态。如下：

    // 参数为普通值
var p4 = Promise.resolve(5);
p4.then(function(data) {
 console.log(data); // 5
});
// 参数为含有then()方法的对象
var obj = {
 then: function() {
  console.log('obj 里面的then()方法');
 }
};
var p5 = Promise.resolve(obj);
p5.then(function(data) {
 // 这里的值时obj方法里面返回的值
 console.log(data); // obj 里面的then()方法
});
// 参数为Promise实例
var p6 = Promise.resolve(7);
var p7 = Promise.resolve(p6);
p7.then(function(data) {
 // 这里的值时Promise实例返回的值
 console.log(data); // 7
});
// 参数为Promise实例,但参数是rejected态
var p8 = Promise.reject(8);
var p9 = Promise.resolve(p8);
p9.then(function(data) {
 // 这里的值时Promise实例返回的值
 console.log('fulfilled:'+ data); // 不执行
}).catch(function(err) {
 console.log('rejected:' + err); // rejected: 8
});

    Promise.reject()

    Promise.reject()和Promise.resolve()正好相反，它接收一个参数值reason，即发生异常的原因。此时返回的Promise对象将会置为rejected态。如下：

    var p10 = Promise.reject('手动拒绝');
p10.then(function(data) {
 console.log(data); // 这里不会执行，因为是rejected态
}).catch(function(err) {
 console.log(err); // 手动拒绝
}).then(function(data) {
 // 不受上一级影响
 console.log('状态：fulfilled'); // 状态：fulfilled
});

    总之，除非Promise.then()方法内部抛出异常或者是明确置为rejected态，否则它返回的Promise的状态都是fulfilled态，即完成态，并且它的状态不受它的上一级的状态的影响。

    总结

    大概常用的方法就写那么多，剩下的看自己实际需要再去了解。

    解决Node回调地狱的不止有Promise，还有Generator和ES7提出的Async实现。

    相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

    推荐阅读：

    JS callback回调函数使用案例详解

    JS DOM元素常见增删改查操作详解

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!

Déclaration：
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
Article précédent：Explication détaillée des étapes de mise en œuvre du POST inter-domaines JSArticle suivant：Explication détaillée des étapes de mise en œuvre du POST inter-domaines JS

Articles Liés

Voir plus