当前位置：首页 > news >正文

vue项目中axios统一或单独控制接口请求时间

news 来源：原创 2025/4/25 18:29:57

先说统一

这里将请求时间统一控制在12秒

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
const axiosInstance = axios.create()// 覆写库的超时默认值
// 现在，在超时前，所有请求时间统一控制在10秒
axiosInstance.defaults.timeout = 1000 * 10

单独控制

上传文件的时候，文件一旦大一些，就会超过设置的时间，出现接口连接超时的问题，所以我们需要单独为上传接口设置一个请求超时时间
在instance.interceptors.request.use() 下的config中添加上一个判断后请求时间赋值即可

axiosInstance.interceptors.request.use(config => {config.headers.common['Authorization'] = localStorage.getItem('token')if(config.url.indexOf('upload/file') > -1){ config.timeout = 1000 * 1800}return config},err => {console.log(err) // for debugreturn Promise.reject(err)}
)

以上就可以满足使用默认上传时单独配置请求时间

-----------------------------------------------------------------------------------------------------

补充（非上传接口等写法）：

// 统一配置默认超时时间：
const axiosInstance = axios.create();//创建实例
let Config = {TIMEOUT: 6000,//设置超时时间为6秒
};
axiosInstance .defaults.timeout = Config.TIMEOUT;// 默认请求时间接口请求：
export function newTaskAdd(data) {return request({url: '/api/taskPlan/add',method: 'post',data})
}// 重设超时时间的接口请求：
export function newTaskAdd(data) {return request({url: '/api/taskPlan/add',method: 'post',timeout: 60 * 60 * 1000,data})
}