這篇文章將為大家詳細(xì)講解有關(guān)微信小程序中promsie.all和promise的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為吳興等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及吳興網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站制作、成都做網(wǎng)站、吳興網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

微信小程序promsie.all和promise順序執(zhí)行

一、前言

最近在做小程序的開發(fā)，碰到的一個(gè)需求就是表單提交，提交的表單中包含有圖片，微信這邊的做法是先上傳圖片，后臺把圖片名稱和地址返回給你，然后你把圖片信息插入到表單的相應(yīng)位置再提交表單，這里就涉及到如何上傳完圖片的請求再上傳表單，而且微信小程序里面如果圖片是多個(gè)的話，也只能一張張上傳。簡單來說就是上傳完圖片（多個(gè)請求），拿到返回值，再上傳表單，該如何做？

二、Promise.all和Promise.race

先來介紹Promise.all和Promise.race方法的不同點(diǎn)Promise.all(iterable) 方法指當(dāng)所有在可迭代參數(shù)中的 promises 已完成，或者第一個(gè)傳遞的 promise（指 reject）失敗時(shí)，返回 promise。iterable為可迭代對象，但是一般為數(shù)組。返回值也是一個(gè)Promise對象。

需要明確的幾點(diǎn)，Promise.all是并發(fā)執(zhí)行的同時(shí)運(yùn)行多個(gè)Promise對象，而且返回的Promise對象的參數(shù)是一個(gè)數(shù)組，數(shù)組中的各項(xiàng)也是可迭代對象執(zhí)行的順序返回。

Promise.race(iterable) 方法返回一個(gè)新的 promise，參數(shù)iterable中只要有一個(gè)promise對象”完成（resolve）”或”失?。╮eject）”，新的promise就會立刻”完成（resolve）”或者”失?。╮eject）”，并獲得之前那個(gè)promise對象的返回值或者錯誤原因。所以只要iterable中有一個(gè)完成或者失敗就立即返回一個(gè)promise對象。根據(jù)race這個(gè)單詞為賽跑也能得出，最先到達(dá)的立即返回一個(gè)promise對象。

根據(jù)上面的定義，我們采用的Promise.all方法來完成我們的需求。

//存儲promise對象的數(shù)組
let promiseArr = [];
//圖片地址數(shù)組
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進(jìn)行處理，然后resolve返回
        resolve(res);
      },
      fail: function (error) {
        reject(error);
      },
      complete: function (res) {
      },
    })
  });
  promiseArr.push(promise)
}
//Promise.all處理promiseArr數(shù)組中的每一個(gè)promise對象
Promise.all(promiseArr).then((result) => {
  //對返回的result數(shù)組進(jìn)行處理
})

三、微信小程序的問題

在做微信小程序的圖片上傳功能，這邊只能先上傳圖片，然后將圖片名和地址以response返回。

這里面我們就是用了promise.all方法但是有一個(gè)問題就是，promise.all是并發(fā)執(zhí)行的，但是微信小程序一次只能并發(fā)10個(gè)請求。

對于圖片上傳，可能需要一次上傳超過10張圖片，也就是一次并發(fā)超過10個(gè)請求，這樣的話微信就會報(bào)錯

“WAService.js:4 uploadFile:fail createUploadTask:fail exceed max upload connection count 10”。

四、順序Promise執(zhí)行處理

因?yàn)镻romise.all是同時(shí)運(yùn)行多個(gè)promsie對象，所以對于這種并發(fā)的數(shù)量，小程序是有限制的，一次只能并發(fā)10個(gè)，所以如果想突破這種限制，可以進(jìn)行順序執(zhí)行每個(gè)Promise。

代碼如下：

//順序處理函數(shù)
function sequenceTasks(tasks) {
  //記錄返回值
  function recordValue(results, value) {
    results.push(value);
    return results;
  }
  let pushValue = recordValue.bind(null, []);
  let promise = Promise.resolve();
  // 處理tasks數(shù)組中的每個(gè)函數(shù)對象
  for (let i = 0; i < tasks.length; i++) {
    let task = tasks[i];
    promise = promise.then(task).then(pushValue);
  }
  return promise;
}

//函數(shù)數(shù)組，每個(gè)函數(shù)的返回值是一個(gè)promise對象
let promiseFuncArr = [];
//圖片地址數(shù)組
let imageList = [];
//將圖片地址的上傳的函數(shù)加入到promiseFuncArr數(shù)組中
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進(jìn)行處理，然后resolve返回
          resolve(res);
        },
        fail: function (error) {
          reject(error);
        },
        complete: function (res) {
        },
      })
    });
  };
  promiseFuncArr.push(promiseTemp)
}

sequenceTasks(promiseFuncArr).then((result) => {
  //對返回的result數(shù)組進(jìn)行處理
});

1.這里解釋一下sequenceTasks函數(shù)的作用

首先recordValue函數(shù)傳入兩個(gè)值，一個(gè)是results是返回的數(shù)組，另一個(gè)是value，value是傳入的值，results.push(value);將每一個(gè)值push到results數(shù)組，然后再返回results數(shù)組。

let pushValue = recordValue.bind(null, []);

pushValue也是一個(gè)函數(shù)對象，將recordValue bind到一個(gè)[ ]數(shù)組中，第一個(gè)參數(shù)傳null代表，不改變函數(shù)this的指向，所以pushValue得到就是一個(gè)function (value)的函數(shù)，參數(shù)傳入value。

promise = promise.then(task).then(pushValue);

task是函數(shù)，函數(shù)返回promise對象，在我們這里就是上傳圖片函數(shù)，每一張圖片上傳都創(chuàng)建一個(gè)函數(shù)，then(pushValue)，pushValue是function (value)的函數(shù)，value代表的就是圖片上傳之后的返回值，pushValue將返回值push到result數(shù)組中，依次執(zhí)行，依次加入到result數(shù)組中，最后返回。就可以得到一個(gè)對象數(shù)組，數(shù)組中就是依次執(zhí)行返回的結(jié)果。

2. sequenceTasks也里面的for循環(huán)，也可以寫成如下的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());
}

關(guān)于“微信小程序中promsie.all和promise的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

分享標(biāo)題：微信小程序中promsie.all和promise的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://weahome.cn/article/pjoic.html