Promise在JS中可以說有着舉足輕重的地位,很早之前就看了很多Promise的文章和書籍,記得在一篇文章中看到過Promise的list方法(作用下邊有詳細介紹)還做了筆記,但是,在使用的時候卻發現現在的JS標準(ES6)不支持list方法,所以,就自己寫一個吧!哈哈哈哈哈
Promise.list():
作用:將多個Promise對象包裝成一個新的Promise對象,並行運行多個Promise對象,所有Promise對象結束觸發then事件。主要功能:若有Promise對象出錯(list方法的重點),則包裝爲
{ error: "error msg" } // 錯誤信息
正確則返回結果。
示例:
var p = Promise.list([p1,p2,p3]);
p.then(function(values) {
// values爲[{p1的結果},{p2的結果},{p3的結果}]
})
接受參數:一個數組,數組每一項爲Promise對象,如p1、p2、p3。
返回結果:一個數組,順序排列每一項的結果。
實現:
// 原始版
if (!Promise.list) {
Promise.list = function (jobArr) {
let jobsResult = [];
jobArr.forEach(function (job) {
// 運行數組內的Promise對象,出現錯誤包裝爲{"error": reason}
jobsResult.push(job.then(function (value) {
return value;
}).catch(function (reason) {
return {"error": reason};
}));
})
// 用Promise.all包裝爲一個新的Promise對象
return Promise.all(jobsResult);
}
}
// 精簡版
if (!Promise.list) {
Promise.list = list => Promise.all( list.map( item => item.then(val => ({val})).catch(err => ({err}))));
}
使用示例:
// 添加Promise.list方法
if (!Promise.list) {
Promise.list = function (jobArr) {
let jobsResult = [];
jobArr.forEach(function (job) {
jobsResult.push(job.then(function (value) {
return value;
}).catch(function (reason) {
return {"error": reason};
}));
})
return Promise.all(jobsResult);
}
}
// 創建一個數組,每一項爲Promise對象
var pArr = [1, 2, 3, 4].map(function (value) {
if (value == 3) { // 第三個設置爲會出錯的Promise對象
return createPromise(0);
} else {
return createPromise(1);
}
})
// 創建Promise對象的方法,returnStatus爲1返回正確的Promise對象,其他則返回錯誤的Promise對象
function createPromise(returnStatus) {
return new Promise(function (reslove, reject) {
if (returnStatus == 1) {
reslove({data: "success"});
} else {
reject("failed");
}
});
}
// 調用Promise.list()方法
Promise.list(pArr).then(function (value) {
console.log("value:", value); // 第三個會返回錯誤信息:[ { data: 'success' },{ data: 'success' },{ error: 'failed' },{ data: 'success' } ]
}).catch(function (reason) {
console.log("error:", reason);
})
總結:歡迎指教。哈哈哈哈哈