current position:Home>Do you know how to implement concurrency control and failure retry of front-end requests?
Do you know how to implement concurrency control and failure retry of front-end requests?
2021-08-27 03:18:31 【Jiaxin cansiny】
This is my participation 8 The fourth of the yuegengwen challenge 3 God , Check out the activity details :8 Yuegengwen challenge
When brushing the surface , I see a problem that requires the concurrency control of requests and failure retry , Just my own project ( One Novel crawler , If you are interested, you can have a look at ) These two technologies are also used in , So sort out the implementation methods here
concurrency control
In some scenes , The front end needs to send a large number of network requests in a short time , At the same time, it can't occupy too much system resources , This requires concurrency control for requests . The request here may be the same interface , It can also be multiple interfaces , Generally, we have to wait for all interfaces to return before unified processing . In order to improve efficiency , We want to empty the position as soon as a request is completed , Then launch a new request . Here we can make comprehensive use of Promise
Two tools and methods to achieve the goal , Namely race
and all
.
In all promise None reject Under the circumstances :
Promise.all
Will be in all promise all resolve Return with all promise resolve An array of results
Promise.race
Will return fastest resolve Of promise Value
The code implementation is as follows :
/** * * @param {number} limit Concurrency limit * @param {(() => Promise<any>)[]} requests An array containing all requests * @returns {Promise<any[]>} Result array */
async function concurrentControl(limit, requests) {
// Store all asynchronous tasks
const res = []
// Store asynchronous tasks in progress
const executing = []
for (const request of requests) {
const p = Promise.resolve().then(() => request())
// Save the new asynchronous task
res.push(p)
// When limit When the value is less than or equal to the total number of tasks , Concurrent control
if (limit <= requests.length) {
// When the task is done , Remove completed tasks from the executing tasks array
const e = p.then(() => executing.splice(executing.indexOf(e), 1))
// Save the executing asynchronous task
executing.push(e)
if (executing.length >= limit) {
// Waiting for faster tasks to complete
await Promise.race(executing)
}
}
}
return Promise.all(res)
}
Copy code
Simply analyze the process ,
First, traverse all of the requests
, Join in res
in , When limit <= requests.length
,limit When the value is less than or equal to the total number of tasks , Concurrent control
Here's a piece of code to understand
p.then(() => executing.splice(executing.indexOf(e), 1))
In fact, it is equivalent to the following
const e = p.then(fn);
executing.push(e);
// p resolve After execution fn
() => executing.splice(executing.indexOf(e), 1)
Copy code
Next, when the request being executed is greater than limit
when , You need to call await Promise.race(executing)
Wait for a request to complete , Last use Promise.all(res)
Return all results
Test code
let i = 0
function generateRequest() {
const j = ++i
return function request() {
return new Promise(resolve => {
console.log(`r${j}...`)
setTimeout(() => {
resolve(`r${j}`)
}, 1000 * j)
})
}
}
const requests = new Array(4).fill('').map(() => generateRequest())
async function main() {
const results = await concurrentControl(2, requests)
console.log(results)
}
main()
Copy code
Request to retry
In some scenarios where you need to ensure the success of the request , We may also need the ability to request a retry , For example, the request section in my project failed , Need to ask again
Next, let's look at the implementation of request retry
Compared with the implementation of request retry, concurrency control is much simpler
async function retry(request, limit, times = 1) {
try {
const value = await request()
console.log(' To be successful ')
return value
} catch (err) {
if (times > limit) {
return err
}
console.log(` request was aborted , The first ${times} Retries ...`)
return retry(request, limit, ++times)
}
}
Copy code
Just when you catch an error , Recursively call retry
Function is OK , When the maximum number of retries is exceeded , Just return the error
Test code
let i = 0
function generateRequest() {
const j = ++i
return function request() {
return new Promise((resolve, reject) => {
setTimeout(() => {
Math.random() > 0.5 ? reject(`err`) : resolve('success')
}, 1000 * j)
})
}
}
async function retry(request, limit, times = 1) {
try {
const value = await request()
console.log(' To be successful ')
return value
} catch (err) {
if (times > limit) {
return err
}
console.log(` request was aborted , The first ${times} Retries ...`)
return retry(request, limit, ++times)
}
}
retry(generateRequest(), 3).then(console.log)
Copy code
Reference article
copyright notice
author[Jiaxin cansiny],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827031828549G.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich