How to set request timeout and header for Vue axios?


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 = "";
export default class NetWorkService {
	getTimeStamp() {
		return new Date().getTime().toString();
	getSign() {
		return '';
	//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, data, {
			'headers': this_header
		}).then(res => {
			if ( == 429) {
				alert('error code 429')
				return {}
		}).catch(function(err) {



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 function.

Related articles

Coming soon

If yuo have any question or need any help 

you can leave a comment or connect me with

Edit Template

Leave a Reply

Your email address will not be published. Required fields are marked *

Chaoxu Wei

Master student at Tongji University (Writer & Blogger)

Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me, thank you very much!


Edit Template

“There are many people in the world who want to work hard but can’t, and people who work too hard and are exhausted. Please don’t use your efforts only to chase your own victory, please use them to help others.”




Yangpu District, Shanghai