Penjelasan terperinci tentang penggunaan Promise dalam pengetahuan JavaScript_Basic

Banyak bahasa, untuk mengendalikan corak tak segerak lebih seperti jujukan biasa, menyertakan perpustakaan penyelesaian yang menarik, dipanggil janji, tertunda atau niaga hadapan. Janji JavaScript boleh menggalakkan pengasingan kebimbangan menggantikan antara muka yang digandingkan rapat. Artikel ini membincangkan tentang janji JavaScript berdasarkan standard Promises/A. [http://wiki.commonjs.org/wiki/Promises/A]

Kes penggunaan janji:

• Peraturan pelaksanaan
• Berbilang pengesahan jauh
• Pemprosesan tamat masa
• Permintaan data jauh
• Animasi
• Asingkan logik peristiwa daripada logik aplikasi
• Hapuskan segi tiga seram fungsi panggil balik
• Kawal operasi tak segerak selari

Janji JavaScript ialah objek yang menjanjikan untuk mengembalikan nilai pada masa hadapan. Merupakan objek data dengan tingkah laku yang jelas. Janji mempunyai tiga keadaan yang mungkin:

1. Belum selesai (untuk ditentukan)
2. Ditolak
3. Selesai

Janji yang telah ditolak atau diselesaikan dianggap telah diselesaikan. Janji hanya boleh beralih daripada belum selesai kepada diselesaikan. Selepas itu, keadaan janji tidak berubah. Janji boleh wujud lama selepas pemprosesan yang sepadan selesai. Dengan kata lain, kita boleh mendapatkan hasil pemprosesan beberapa kali. Kami mendapat keputusan dengan memanggil promise.then(). Fungsi ini tidak akan kembali sehingga pemprosesan yang sepadan dengan janji selesai. Kita boleh menyusun sekumpulan janji secara fleksibel. Fungsi "kemudian" yang digabungkan ini harus mengembalikan janji baharu atau yang paling awal.
Dengan gaya ini, kita boleh menulis kod tak segerak sama seperti kita menulis kod segerak. Terutamanya dicapai dengan menggabungkan janji:

• Tugas bertindan: berbilang tugas bertaburan dalam kod, sepadan dengan janji yang sama.
• Tugasan selari: Berbilang janji mengembalikan janji yang sama.
• Tugasan bersiri: satu janji, dan kemudian laksanakan janji lain.
• Gabungan di atas.

Kenapa perlu bersusah payah? Tidak bolehkah kita hanya menggunakan fungsi panggil balik asas?

Masalah dengan fungsi panggil balik

Fungsi panggil balik sesuai untuk acara berulang yang mudah, seperti mengesahkan borang berdasarkan klik atau menyimpan hasil panggilan REST. Fungsi panggil balik juga mencipta rantaian kod, dengan satu fungsi panggil balik memanggil fungsi REST, menyediakan fungsi panggil balik baharu untuk fungsi REST, dan fungsi panggil balik baharu ini memanggil fungsi REST yang lain, dan seterusnya. Pertumbuhan mendatar kod adalah lebih besar daripada pertumbuhan menegak. Fungsi panggil balik kelihatan mudah, sehingga kita memerlukan hasil, dan kita memerlukannya dengan segera, serta-merta untuk digunakan dalam pengiraan baris seterusnya.

'use strict';
var i = 0;
function log(data) {console.log('%d %s', ++i, data); };
 
function validate() {
  log("Wait for it ...");
  // Sequence of four Long-running async activities
  setTimeout(function () {
   log('result first');
   setTimeout(function () {
     log('result second');
     setTimeout(function () {
      log('result third');
      setTimeout(function () {
        log('result fourth')
      }, 1000);
     }, 1000);
   }, 1000);
  }, 1000);
 
};
validate();

Saya menggunakan tamat masa untuk mensimulasikan operasi tak segerak. Kaedah mengurus pengecualian adalah menyakitkan dan boleh mengeksploitasi tingkah laku hiliran dengan mudah. Apabila kita menulis panggilan balik, maka organisasi kod menjadi mengelirukan. Rajah 2 menunjukkan aliran pengesahan olok-olok yang boleh dijalankan pada REPL NodeJS. Dalam bahagian seterusnya, kita akan beralih daripada pola piramid azab kepada janji berterusan.

Rajah

'use strict';
var i = 0;
function log(data) {console.log('%d %s', ++i, data); };
 
// Asynchronous fn executes a callback result fn
function async(arg, callBack) {
  setTimeout(function(){
   log('result ' + arg);
   callBack();
  }, 1000);
};
 
function validate() {
  log("Wait for it ...");
  // Sequence of four Long-running async activities
  async('first', function () {
   async('second',function () {
     async('third', function () {
      async('fourth', function () {});
     });
   });
  });
};
validate();

Hasil pelaksanaan dalam NodeJS REPL

$ node scripts/examp2b.js
1 Wait for it ...
2 result first
3 result second
4 result third
5 result fourth
$

Saya pernah menghadapi situasi di mana pengesahan dinamik AngularJS mengehadkan nilai item borang secara dinamik berdasarkan nilai jadual yang sepadan. Julat nilai yang sah bagi item had ditakrifkan pada perkhidmatan REST.

Saya menulis penjadual untuk mengendalikan timbunan fungsi mengikut nilai yang diminta untuk mengelakkan sarang panggilan balik. Penjadual memaparkan fungsi dari timbunan dan melaksanakannya. Panggilan balik fungsi akan memanggil penjadual sekali lagi pada penghujung sehingga tindanan dikosongkan. Setiap panggilan balik merekodkan semua ralat pengesahan yang dikembalikan daripada panggilan pengesahan jauh.

Saya rasa apa yang saya tulis adalah anti-corak. Jika saya menggunakan janji yang diberikan oleh panggilan $http Angular, pemikiran saya semasa keseluruhan proses pengesahan akan menjadi lebih linear, seperti pengaturcaraan segerak. Rantai janji yang diratakan boleh dibaca. Teruskan...

Gunakan Janji

Perpustakaan janji kew digunakan. Perkara yang sama berlaku untuk perpustakaan Q. Untuk menggunakan perpustakaan, mula-mula import perpustakaan kew ke NodeJS menggunakan npm, kemudian muatkan kod ke dalam REPL NodeJS.

Rajah

'use strict';
var Q = require('kew');
var i = 0;
 
function log(data) {console.log('%d %s', ++i, data); };
 
// Asynchronous fn returns a promise
function async(arg) {
  var deferred = Q.defer();
  setTimeout(function () {
    deferred.resolve('result ' + arg);\
  }, 1000);
  return deferred.promise;
};
 
// Flattened promise chain
function validate() {
  log("Wait for it ...");
  async('first').then(function(resp){
    log(resp);
    return async('second');
  })
  .then(function(resp){
    log(resp);
    return async('third')
  })
  .then(function(resp){
    log(resp);
    return async('fourth');
  })
  .then(function(resp){
    log(resp);
  }).fail(log);
};
validate();

Output adalah sama seperti semasa menggunakan panggilan balik bersarang:

$ node scripts/examp2-pflat.js
1 Wait for it ...
2 result first
3 result second
4 result third
5 result fourth
$

该代码稍微“长高”了，但我认为更易于理解和修改。更易于加上适当的错误处理。在链的末尾调用fail用于捕获链中错误，但我也可以在任何一个then里面提供一个reject的处理函数做相应的处理。

服务器 或 浏览器

Promises在浏览器中就像在NodeJS服务器中一样有效。下面的地址， http://jsfiddle.net/mauget/DnQDx/，指向JSFiddle的一个展示如何使用一个promise的web页面。 JSFiddle所有的代码是可修改的。我故意操作随意动作。你可以试几次得到相反的结果。它是可以直接扩展到多个promise链, 就像前面NodeJS例子。

并行 Promises

考虑一个异步操作喂养另一个异步操作。让后者包括三个并行异步行为,反过来,喂最后一个行动。只有当所有平行的子请求通过才能通过。这是灵感来自偶遇一打MongoDB操作。有些是合格的并行操作。我实现了promises的流流程图。

我们怎么会模拟那些在该图中心行的并行promises？关键是，最大的promise库有一个全功能，它产生一个包含一组子promises的父promie。当所有的子promises通过，父promise通过。如果有一个子promise拒绝，父promise拒绝。
 

让十个并行的promises每个都包含一个文字promise。只有当十个子类通过或如果任何子类拒绝，最后的then方法才能完成。

Figure
 

var promiseVals = ['To ', 'be, ', 'or ',
  'not ', 'to ', 'be, ', 'that ',
  'is ', 'the ', 'question.'];
 
var startParallelActions = function (){
  var promises = [];
 
  // Make an asynchronous action from each literal
  promiseVals.forEach(function(value){
    promises.push(makeAPromise(value));
  });
 
  // Consolidate all promises into a promise of promises
  return Q.all(promises);
};
 
startParallelActions ().then( . . .

下面的地址， http://jsfiddle.net/mauget/XKCy2/，针对JSFiddle在浏览器中运行十个并行promises,随机的拒绝或通过。这里有完整的代码用于检查和变化if条件。重新运行,直到你得到一个相反的完成。

孕育 Promise

许多api返回的promise都有一个then函数——他们是thenable。通常我只是通过then处理thenable函数的结果。然而，$q，mpromise，和kew库拥有同样的API用于创建，拒绝，或者通过promise。这里有API文档链接到每个库的引用部分。我通常不需要构造一个promise,除了本文中的包装promise的未知描述和timeout函数。请参考哪些我创建的promises。

Promise库互操作

大多数JavaScript promise库在then级别进行互操作。你可以从一个外部的promise创建一个promise，因为promise可以包装任何类型的值。then可以支持跨库工作。除了then，其他的promise函数则可能不同。如果你需要一个你的库不包含的函数，你可以将一个基于你的库的promise包装到一个新的，基于含有你所需函数的库创建的promise里面。例如，JQuery的promise有时为人所诟病。那么你可以将其包装到Q，$q，mpromise，或者kew库的promise中进行操作。
 
结语

现在我写了这篇文章，而一年前我却是犹豫要不要拥抱promise的那个。我只是单纯地想完成一项工作。 我不想学习新的API，或是打破我原来的代码（因为误解了promise）。我曾经如此错误地认为！当我下了一点注时，就轻易就赢得了可喜的成果。

在这篇文章中，我已经简单给出了一个单一的promise，promise链，和一个并行的promise的promise的的例子。 Promises不难使用。如果我可以使用它们，任何人都可以。 要查看完整的概念，我支持你点击专家写的参考指南。从Promises/A 的参考开始，从事实上的标准JavaScript的Promise 开始。