溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
微信小程序promsie.all和promise順序執行
一、前言
最近在做小程序的開發，碰到的一個需求就是表單提交，提交的表單中包含有圖片，微信這邊的做法是先上傳圖片，后臺把圖片名稱和地址返回給你，然后你把圖片信息插入到表單的相應位置再提交表單，這里就涉及到如何上傳完圖片的請求再上傳表單，而且微信小程序里面如果圖片是多個的話，也只能一張張上傳。簡單來說就是上傳完圖片（多個請求），拿到返回值，再上傳表單，該如何做？
二、Promise.all和Promise.race
先來介紹Promise.all和Promise.race方法的不同點Promise.all(iterable) 方法指當所有在可迭代參數中的 promises 已完成，或者第一個傳遞的 promise（指 reject）失敗時，返回 promise。iterable為可迭代對象，但是一般為數組。返回值也是一個Promise對象。
需要明確的幾點，Promise.all是并發執行的同時運行多個Promise對象，而且返回的Promise對象的參數是一個數組，數組中的各項也是可迭代對象執行的順序返回。
Promise.race(iterable) 方法返回一個新的 promise，參數iterable中只要有一個promise對象”完成（resolve）”或”失敗（reject）”，新的promise就會立刻”完成（resolve）”或者”失敗（reject）”，并獲得之前那個promise對象的返回值或者錯誤原因。所以只要iterable中有一個完成或者失敗就立即返回一個promise對象。根據race這個單詞為賽跑也能得出，最先到達的立即返回一個promise對象。
根據上面的定義，我們采用的Promise.all方法來完成我們的需求。
//存儲promise對象的數組
let promiseArr = [];
//圖片地址數組
let imageList = [];
//將圖片地址的上傳的promise對象加入到promiseArr
for (let i = 0; i < imageList.length; i++) {
let promise = new Promise((resolve, reject) => {
//微信圖片上傳
wx.uploadFile({
url: 'https://xxx.xxx.xxx/api/uploadImage',
filePath: imageList[i],
name: 'file',
success: function(res) {
//可以對res進行處理，然后resolve返回
resolve(res);
},
fail: function (error) {
reject(error);
},
complete: function (res) {
},
})
});
promiseArr.push(promise)
}
//Promise.all處理promiseArr數組中的每一個promise對象
Promise.all(promiseArr).then((result) => {
//對返回的result數組進行處理
})
三、微信小程序的問題
在做微信小程序的圖片上傳功能，這邊只能先上傳圖片，然后將圖片名和地址以response返回。
這里面我們就是用了promise.all方法但是有一個問題就是，promise.all是并發執行的，但是微信小程序一次只能并發10個請求。
對于圖片上傳，可能需要一次上傳超過10張圖片，也就是一次并發超過10個請求，這樣的話微信就會報錯
“WAService.js:4 uploadFile:fail createUploadTask:fail exceed max upload connection count 10”。
四、順序Promise執行處理
因為Promise.all是同時運行多個promsie對象，所以對于這種并發的數量，小程序是有限制的，一次只能并發10個，所以如果想突破這種限制，可以進行順序執行每個Promise。
代碼如下：
//順序處理函數
function sequenceTasks(tasks) {
//記錄返回值
function recordValue(results, value) {
results.push(value);
return results;
}
let pushValue = recordValue.bind(null, []);
let promise = Promise.resolve();
// 處理tasks數組中的每個函數對象
for (let i = 0; i < tasks.length; i++) {
let task = tasks[i];
promise = promise.then(task).then(pushValue);
}
return promise;
}
//函數數組，每個函數的返回值是一個promise對象
let promiseFuncArr = [];
//圖片地址數組
let imageList = [];
//將圖片地址的上傳的函數加入到promiseFuncArr數組中
for (let i = 0; i < imageList.length; i++) {
let promiseTemp = function(){
return new Promise((resolve, reject) => {
//微信圖片上傳
wx.uploadFile({
url: 'https://xxx.xxx.xxx/api/uploadImage',
filePath: imageList[i],
name: 'file',
success: function(res) {
//可以對res進行處理，然后resolve返回
resolve(res);
},
fail: function (error) {
reject(error);
},
complete: function (res) {
},
})
});
};
promiseFuncArr.push(promiseTemp)
}
sequenceTasks(promiseFuncArr).then((result) => {
//對返回的result數組進行處理
});
1.這里解釋一下sequenceTasks函數的作用
首先recordValue函數傳入兩個值，一個是results是返回的數組，另一個是value，value是傳入的值，results.push(value);將每一個值push到results數組，然后再返回results數組。
let pushValue = recordValue.bind(null, []);
pushValue也是一個函數對象，將recordValue bind到一個[ ]數組中，第一個參數傳null代表，不改變函數this的指向，所以pushValue得到就是一個function (value)的函數，參數傳入value。
promise = promise.then(task).then(pushValue);
task是函數，函數返回promise對象，在我們這里就是上傳圖片函數，每一張圖片上傳都創建一個函數，then(pushValue)，pushValue是function (value)的函數，value代表的就是圖片上傳之后的返回值，pushValue將返回值push到result數組中，依次執行，依次加入到result數組中，最后返回。就可以得到一個對象數組，數組中就是依次執行返回的結果。
2. sequenceTasks也里面的for循環，也可以寫成如下的reduce方式：
function sequenceTasks(tasks) {
//記錄返回值
function recordValue(results, value) {
results.push(value);
return results;
}
let pushValue = recordValue.bind(null, []);
return tasks.reduce(function (promise, task) {
return promise.then(task).then(pushValue);
}, Promise.resolve());
}
如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
