Web Front-end
JS Tutorial
Detailed explanation of the sequential execution of WeChat applet promsie.all and promise
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Develop WeChat applet using Python
Jun 17, 2023 pm 06:34 PM
With the popularity of mobile Internet technology and smartphones, WeChat has become an indispensable application in people's lives. WeChat mini programs allow people to directly use mini programs to solve some simple needs without downloading and installing applications. This article will introduce how to use Python to develop WeChat applet. 1. Preparation Before using Python to develop WeChat applet, you need to install the relevant Python library. It is recommended to use the two libraries wxpy and itchat here. wxpy is a WeChat machine
Implement card flipping effects in WeChat mini programs
Nov 21, 2023 am 10:55 AM
Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: <!--index.wxml-->&l
Keeping your word: The pros and cons of delivering on your promises
Feb 18, 2024 pm 08:06 PM
In daily life, we often encounter problems between promises and fulfillment. Whether in a personal relationship or a business transaction, delivering on promises is key to building trust. However, the pros and cons of commitment are often controversial. This article will explore the pros and cons of commitments and give some advice on how to keep your word. The promised benefits are obvious. First, commitment builds trust. When a person keeps his word, he makes others believe that he is a trustworthy person. Trust is the bond established between people, which can make people more
Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library
Oct 31, 2023 pm 09:25 PM
According to news from this site on October 31, on May 27 this year, Ant Group announced the launch of the "Chinese Character Picking Project", and recently ushered in new progress: Alipay launched the "Chinese Character Picking-Uncommon Characters" mini program to collect collections from the society Rare characters supplement the rare character library and provide different input experiences for rare characters to help improve the rare character input method in Alipay. Currently, users can enter the "Uncommon Characters" applet by searching for keywords such as "Chinese character pick-up" and "rare characters". In the mini program, users can submit pictures of rare characters that have not been recognized and entered by the system. After confirmation, Alipay engineers will make additional entries into the font library. This website noticed that users can also experience the latest word-splitting input method in the mini program. This input method is designed for rare words with unclear pronunciation. User dismantling
What should I do if I encounter Uncaught (in promise) TypeError in a Vue application?
Jun 25, 2023 pm 06:39 PM
Vue is a popular front-end framework, and you often encounter various errors and problems when developing applications. Among them, Uncaught(inpromise)TypeError is a common error type. In this article, we will discuss its causes and solutions. What is Uncaught(inpromise)TypeError? Uncaught(inpromise)TypeError error usually appears in
How uniapp achieves rapid conversion between mini programs and H5
Oct 20, 2023 pm 02:12 PM
How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia
Learn more about Promise.resolve()
Feb 18, 2024 pm 07:13 PM
Detailed explanation of Promise.resolve() requires specific code examples. Promise is a mechanism in JavaScript for handling asynchronous operations. In actual development, it is often necessary to handle some asynchronous tasks that need to be executed in sequence, and the Promise.resolve() method is used to return a Promise object that has been fulfilled. Promise.resolve() is a static method of the Promise class, which accepts a
How to get membership in WeChat mini program
May 07, 2024 am 10:24 AM
1. Open the WeChat mini program and enter the corresponding mini program page. 2. Find the member-related entrance on the mini program page. Usually the member entrance is in the bottom navigation bar or personal center. 3. Click the membership portal to enter the membership application page. 4. On the membership application page, fill in relevant information, such as mobile phone number, name, etc. After completing the information, submit the application. 5. The mini program will review the membership application. After passing the review, the user can become a member of the WeChat mini program. 6. As a member, users will enjoy more membership rights, such as points, coupons, member-exclusive activities, etc.
