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


Posted in Javascript onOctober 27, 2017

微信小程序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”。

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

四、顺序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());
}

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
js打造数组转json函数
Jan 14 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 #Javascript
vue-resource拦截器设置头信息的实例
Oct 27 #Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 #Javascript
vue2里面ref的具体使用方法
Oct 27 #Javascript
初学者AngularJS的环境搭建过程
Oct 27 #Javascript
JavaScript中Require调用js的实例分享
Oct 27 #Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 #jQuery
You might like
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
Python 字典中的所有方法及用法
2020/06/10 Python
Python 解析简单的XML数据
2020/07/24 Python
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
电气自动化个人求职信范文
2014/02/03 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
日化店促销方案
2014/03/26 职场文书
经管应届生求职信范文
2014/05/18 职场文书
科学育儿宣传标语
2014/10/08 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
师范生小学见习总结
2015/06/23 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers