微信小程序promsie.all和promise的顺序执行-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

微信小程序promsie.all和promise的顺序执行

这篇文章主要介绍了微信小程序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对象加入到promiseArrfor (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());}

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐