微信小程序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 相关文章推荐
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 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
改造一台复古桌面收音机
2021/03/02 无线电
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
php实现简易计算器
2020/08/28 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
javascript 构建模块化开发过程解析
2019/09/11 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
Python如何实现守护进程的方法示例
2017/02/08 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python 异常处理的实例详解
2017/09/11 Python
python中字符串的操作方法大全
2018/06/03 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
大学生学习党课思想汇报
2014/01/03 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
布达拉宫的导游词
2015/02/02 职场文书
幼儿教师个人总结
2015/02/05 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
Redis高并发缓存架构性能优化
2022/05/15 Redis