Before entering the topic, click on the blackboard. Different browsers have different limits on the number of concurrent connections in the same domain. This is why big manufacturers have many different domain names to load resources.
Take chrome browser as an example.
This picture should be clear at a glance, the resources of the same domain can request a certain amount at the same time at most (6). Knowing this premise, start to enter the topic
As a front-end member, SPA should be familiar with it, and it has great significance for the separation of front-end and back-end.
What I want to say here, when there are too many routes in your pwa project
, there will be more data queried under each route. When you switch routes quickly, the above-mentioned problems may occur, which will block your connection.
Of course, if your service responds quickly, there is no problem in obtaining results from users
. If you have a route with 5 interfaces, I clicked on five routes within 1 second. In fact, the final useful data is the last route. Data, other redundant requested resources are virtually wasted.
Need to cancel unnecessary interface requests when switching to be considered here,
This is the cancel method of axios
const axios = require('axios');
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('http://localhost:4000/test/ax', {
cancelToken: source.token
}).catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
// cancel the request (the message parameter is optional)
setTimeout(() => {
source.cancel('Operation canceled by the user.');
}, 4000)
The solution here is to get the pending interface of the page. When switching the route, cancel the pending interface. Let’s stop here,
code the code~~, and you will be more precise about the details. . . .
If the front end has a cancel server, is it necessary to cancel the thread or process to reduce performance consumption?
You can see https://blog.csdn.net/ihtml5/article/details/106478880