本文主要介紹了微信小程式promsie.all和promise順序執行的相關資料,希望透過本文能幫助到大家,需要的朋友可以參考下,希望能幫助到大家。
微信小程式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()); }
相關推薦:
webpack+babel+transform-runtime, IE下方提示Promise未定義的解決方法
#Promise,Generator(生成器),async(非同步)函數的用法
#以上是微信小程式promsie.all和promise順序執行詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!