Rumah hujung hadapan web tutorial js Penjelasan terperinci tentang penggunaan Promise dalam pengetahuan JavaScript_Basic

Penjelasan terperinci tentang penggunaan Promise dalam pengetahuan JavaScript_Basic

May 16, 2016 pm 03:53 PM
javascript promise

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();
Salin selepas log masuk

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();
Salin selepas log masuk

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
$
Salin selepas log masuk

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();
Salin selepas log masuk

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
$
Salin selepas log masuk

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

服务器 或 浏览器

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

2015624113608681.jpg (572×265)

并行 Promises

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

2015624113731418.jpg (454×366)

我们怎么会模拟那些在该图中心行的并行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( . . .
Salin selepas log masuk

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

孕育 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 开始。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript Dec 17, 2023 pm 02:54 PM

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.

WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata Dec 17, 2023 pm 05:30 PM

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata Dec 17, 2023 pm 12:09 PM

Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan

Menepati janji anda: Kebaikan dan keburukan menunaikan janji anda Menepati janji anda: Kebaikan dan keburukan menunaikan janji anda Feb 18, 2024 pm 08:06 PM

Dalam kehidupan seharian, kita sering menghadapi masalah antara janji dan menunaikan. Sama ada dalam hubungan peribadi atau transaksi perniagaan, menunaikan janji adalah kunci untuk membina kepercayaan. Walau bagaimanapun, kebaikan dan keburukan komitmen sering menjadi kontroversi. Artikel ini akan meneroka kebaikan dan keburukan komitmen dan memberi beberapa nasihat tentang cara untuk mengekalkan kata-kata anda. Faedah yang dijanjikan adalah jelas. Pertama, komitmen membina kepercayaan. Apabila seseorang menepati kata-katanya, dia membuat orang lain percaya bahawa dia seorang yang boleh dipercayai. Kepercayaan adalah ikatan yang terjalin antara orang, yang boleh menjadikan orang lebih banyak

Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript Dec 17, 2023 am 09:39 AM

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Dec 17, 2023 pm 05:13 PM

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Ketahui lebih lanjut tentang Promise.resolve() Ketahui lebih lanjut tentang Promise.resolve() Feb 18, 2024 pm 07:13 PM

Penjelasan terperinci Promise.resolve() memerlukan contoh kod khusus Promise ialah mekanisme dalam JavaScript untuk mengendalikan operasi tak segerak. Dalam pembangunan sebenar, selalunya perlu untuk memproses beberapa tugas tak segerak yang perlu dilaksanakan mengikut turutan, dan kaedah Promise.resolve() digunakan untuk mengembalikan objek Promise yang telah dipenuhi. Promise.resolve() ialah kaedah statik kelas Promise, yang menerima a

See all articles