Sequential execution of WeChat applet promsie.all and promise

This article mainly introduces the relevant information about the WeChat mini program promsie.all and the sequential execution of promises. I hope this article can help everyone. Friends in need can refer to

WeChat mini program promsie .all and promise are executed sequentially

1. Preface

Recently I am developing a small program, and one of the requirements I encountered is form submission. The submitted form contains pictures. What WeChat does here is to upload the picture first, and the background will return the picture name and address to you. Then you insert the picture information into the corresponding position of the form and then submit the form. Here is how to complete the upload. The picture request is uploaded through the form, and if there are multiple pictures in the WeChat applet, they can only be uploaded one by one. To put it simply, after uploading the image (multiple requests), get the return value, and then upload the form, what should I do?

2. Promise.all and Promise.race

Let’s first introduce the differences between Promise.all and Promise.race methods Promise.all (iterable) The method returns a promise when all promises in the iterable parameters have been completed, or when the first passed promise (referring to reject) fails. iterable is an iterable object, but is generally an array. The return value is also a Promise object.

Some points need to be made clear. Promise.all runs multiple Promise objects concurrently, and the parameters of the returned Promise object are an array, and the items in the array are also iterable objects for execution. The order is returned.

The Promise.race(iterable) method returns a new promise. As long as there is a promise object "resolve" or "reject" in the parameter iterable, the new promise will be completed immediately ( resolve)" or "reject", and obtain the return value or error reason of the previous promise object. So as long as one of the iterables completes or fails, a promise object is returned immediately. According to the word race, it can also be concluded that the first arrival returns a promise object immediately.

According to the above definition, we use the Promise.all method to complete our needs.

//存储promise对象的数组
let promiseArr = [];
//图片地址数组
let imageList = [];
//将图片地址的上传的promise对象加入到promiseArr
for (let i = 0; i < imageList.length; i++) {
  let promise = new Promise((resolve, reject) => {
    //微信图片上传
    wx.uploadFile({
      url: &#39;https://xxx.xxx.xxx/api/uploadImage&#39;,
      filePath: imageList[i],
      name: &#39;file&#39;,
      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数组进行处理
})

3. Problems with WeChat Mini Program

Working on the image upload function of WeChat Mini Program , here you can only upload the image first, and then return the image name and address in response.

Here we use the promise.all method, but there is a problem. Promise.all is executed concurrently, but the WeChat applet can only make 10 concurrent requests at a time.

For image upload, you may need to upload more than 10 images at a time, that is, more than 10 concurrent requests at a time. In this case, WeChat will report an error

"WAService.js:4 uploadFile :fail createUploadTask:fail exceed max upload connection count 10".

4. Sequential Promise execution processing

Because Promise.all runs multiple promsie objects at the same time , so there is a limit to the number of such concurrencies. Mini programs can only be concurrently 10 at a time, so if you want to break through this limit, you can execute each Promise sequentially.

The code is as follows:

//顺序处理函数
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: &#39;https://xxx.xxx.xxx/api/uploadImage&#39;,
        filePath: imageList[i],
        name: &#39;file&#39;,
        success: function(res) {
          //可以对res进行处理，然后resolve返回
          resolve(res);
        },
        fail: function (error) {
          reject(error);
        },
        complete: function (res) {
        },
      })
    });
  };
  promiseFuncArr.push(promiseTemp)
}

sequenceTasks(promiseFuncArr).then((result) => {
  //对返回的result数组进行处理
});

1. Here is an explanation of the role of the sequenceTasks function

First The recordValue function passes in two values, one is the results array, the other is the value, value is the value passed in, results.push(value); push each value to the results array, and then return the results array.

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

pushValue is also a function object. Bind recordValue to a [ ] array. The first parameter is passed as null, and the point of the function this is not changed. So pushValue is a function (value), and the parameters are passed in value.

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

task is a function, and the function returns a promise object. In our case, it is the upload image function. A function is created for each image upload, then(pushValue) , pushValue is a function of function (value), and value represents the return value after the image is uploaded. pushValue pushes the return value into the result array, executes it in sequence, adds it to the result array in sequence, and finally returns. You can get an array of objects, and the array contains the results returned by sequential execution.

2. The for loop in sequenceTasks can also be written in the following reduce method:

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());
}

The above is the entire article Content, I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to building a node.js interface server for WeChat applet access

WeChat applet network request Introduction to wx.request

WeChat applet implements the ScrollTab component in YDUI

The above is the detailed content of Sequential execution of WeChat applet promsie.all and promise. For more information, please follow other related articles on the PHP Chinese website!