1. 程式人生 > >JavaScript - Promise對象

JavaScript - Promise對象

分享圖片 test cal one lock err result reat AS

優點:

  1. 在異步執行的流程中,把執行代碼和處理結果的代碼清晰地分離(因為Promise對象有鏈式寫法,有then和catch)
  2. 組合使用Promise,就可以把很多異步任務以並行和串行的方式組合起來執行。

例子1. 生成一個0-2之間的隨機數,如果小於1,則等待一段時間後返回成功,否則返回失敗:

‘use strict‘;

// 清除log:
var logging = document.getElementById(‘test-promise-log‘);
while (logging.children.length > 1) {
    logging.removeChild(logging
.children[logging.children.length - 1]); } // 輸出log到頁面: function log(s) { var p = document.createElement(‘p‘); p.innerHTML = s; logging.appendChild(p); } new Promise(function (resolve, reject) { log(‘start new Promise...‘); var timeOut = Math.random() * 2; log(‘set timeout to: ‘
+ timeOut + ‘ seconds.‘); setTimeout(function () { if (timeOut < 1) { log(‘call resolve()...‘); resolve(‘200 OK‘); } else { log(‘call reject()...‘); reject(‘timeout in ‘ + timeOut + ‘ seconds.‘); } }, timeOut *
1000); }).then(function (r) { log(‘Done: ‘ + r); }).catch(function (reason) { log(‘Failed: ‘ + reason); });

技術分享圖片

例子2. 串行執行若幹個異步任務,需要先做任務1,如果成功後再做任務2,以此類推,任何任務失敗則不再繼續並執行錯誤處理函數。(鏈式寫法)

job1.then(job2).then(job3).catch(handleError);

其中,job1、job2和job3都是Promise對象。

例子3. 並行執行,同時執行p1和p2,並在它們都完成後執行then:

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, ‘P1‘);
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, ‘P2‘);
});
// 同時執行p1和p2,並在它們都完成後執行then:
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 獲得一個Array: [‘P1‘, ‘P2‘]
});

例子4. 並行執行,獲得先返回的結果即可

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, ‘P1‘);
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, ‘P2‘);
});
Promise.race([p1, p2]).then(function (result) {
    console.log(result); // ‘P1‘
});

JavaScript - Promise對象