Detailed explanation of the sequential execution of WeChat applet promsie.all and promise

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

WeChat applet promsie.all and promise are executed sequentially

1. Foreword

I am working on a small project recently When developing the program, one of the requirements encountered is form submission. The submitted form contains pictures. WeChat's approach is to upload the picture first, and the background will return the picture name and address to you, and then you insert the picture information into the form. Submit the form at the corresponding location. This involves how to upload the image request before uploading the form. Moreover, if there are multiple images 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: '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数组进行处理
})

3. Problems with the WeChat applet

I am working on the image upload function of the WeChat applet, 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: '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. Here is an explanation of the role of the sequenceTasks function

First the recordValue function passes Enter two values, one is results array, the other is 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, which does not change the pointer of the function this, so pushValue gets It 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 function (value), 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());
}

Related recommendations:

The specific method of using jQuery's Promise

webpack+babel+transform-runtime, IE prompts that Promise is not defined, the solution is

Promise, Generator (generator), async (asynchronous) function usage

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