Abstract
When we use Vue axios to initiate a request, we may need to do some global configuration. This post will introduce : ① How to add timeout to axios request? ② How to add request header to axios?
Keywords: Vue , axios , timeout , header.
Axios Timeout
The default timeout of axios is too short. Sometimes some time-consuming operations may cause an error response because no results are returned within 10 seconds. We need to increase the timeout to 60 seconds, of course, it can be longer, but if there is any request required more than 60 seconds to process, it is necessary to change the request.
import axios from 'axios';
axios.interceptors.request.use(config => {
config.timeout = 60000;
return config;
})
Axios Header
Many times when we initiate a request, we need to add some data such as user information, timestamp, verification signature, etc. All these information need to be set in headers when initiating a request.
import axios from 'axios';
axios.interceptors.request.use(config => {
config.timeout = 60000;
return config;
})
var base_url = "http://127.0.0.1:8199/api";
export default class NetWorkService {
getTimeStamp() {
return new Date().getTime().toString();
}
getSign() {
return 'https://www.libertynlp.com';
}
//post method
postService(url, data) {
var posturl = base_url + url;
var time_stamp = this.getTimeStamp();
var sign = this.getSign(time_stamp);
//carry user infomation, time stamp and signature
var this_header = {
'Authorization': '1234',
'TimeStamp': time_stamp,
'Sign': sign,
}
//set headers
return axios.post(posturl, data, {
'headers': this_header
}).then(res => {
if (res.data.code == 429) {
alert('error code 429')
return {}
}
return res.data;
}).catch(function(err) {
alert('error'+err);
});
}
}
Summarize
In Vue axios, you can easily set global parameters, such as timeout, timestamp, user authentication and signature. User authentication and signature are commonly used in anti-crawlers. It should be noted that the request header should be set when requesting, and the above code is placed in the axios.post() function.
Related articles
Coming soon
If yuo have any question or need any help
you can leave a comment or connect me with weichaoxu1998@gmail.com
