JavaScript - Promise對象
阿新 • • 發佈:2018-05-02
分享圖片 test cal one lock err result reat AS
優點:
- 在異步執行的流程中,把執行代碼和處理結果的代碼清晰地分離(因為Promise對象有鏈式寫法,有then和catch)
- 組合使用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對象