微信小程序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函数
Apr 09 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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小教程之实现链表
2014/06/09 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
DOM 事件流详解
2015/01/20 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
pip安装python库的方法总结
2019/08/02 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
承诺书怎么写
2014/03/26 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
作风建设年活动总结
2014/08/27 职场文书
好媳妇事迹材料
2014/12/24 职场文书
党校毕业个人总结
2015/02/28 职场文书
2019广播稿怎么写
2019/04/17 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python