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

先说统一

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

javascript 复制代码
// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
const axiosInstance = axios.create()

// 覆写库的超时默认值
// 现在,在超时前,所有请求时间统一控制在10秒
axiosInstance.defaults.timeout = 1000 * 10

单独控制

上传文件的时候,文件一旦大一些,就会超过设置的时间,出现接口连接超时的问题,所以我们需要单独为上传接口设置一个请求超时时间

在instance.interceptors.request.use() 下的config中 添加上一个判断后请求时间赋值即可

javascript 复制代码
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 debug
    return Promise.reject(err)
  }
)

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


补充(非上传接口等写法):

javascript 复制代码
// 统一配置默认超时时间:
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
  })
}
相关推荐
伍哥的传说15 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783817 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊28 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿1 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为