引语:当网路慢的时候。又或者公司服务器不在内地的时候,接口数据请求不回来超时报错的情况相信大家肯定遇到过的,这里我把我公司项目请求超时的处理方法分享下,希望看过后有帮助。

axios基本用法就不多说了,详情直戳 : https://www.kancloud.cn/yunye/axios/234845

主要是思路: 对 axios 请求拦截器下功夫

解决方案一:(缺点:只重新请求1次,如果再超时的话,它就停止了,不会再请求) 后台只允许你重新发起一次请求(不能给服务器增压、浪费带宽无限请求,)下的情况推荐;

看了看axios的源代码,超时后, 会在拦截器那里 axios.interceptors.response 捕抓到错误信息, 且 error.code = "ECONNABORTED",

 // 请求超时
request.ontimeout = function handleTimeout() {
reject(createError('timeout of ' + config.timeout + 'ms exceeded', config, 'ECONNABORTED', request));
// 取消请求
request = null;
};
全局超时处理方案:
// 请求拦截器
axios.interceptors.response.use(function(response){
// 请求成功处理回调
}, function(error){
// 请求失败、错误处理回调
var originalRequest = error.config;
if(error.code == 'ECONNABORTED' && error.message.indexOf('timeout')!=- && !originalRequest._retry){
originalRequest._retry = true
return axios.request(originalRequest);
}
});

解决方法二:推荐

//在main.js设置全局的请求次数,请求的间隙
axios.defaults.retry = ;
axios.defaults.retryDelay = ;
axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
var config = err.config;
// 如果config不存在或未设置重试选项,请拒绝
if(!config || !config.retry) return Promise.reject(err);
// 设置变量跟踪重试次数
config.__retryCount = config.__retryCount || ;
// 检查是否已经达到最大重试总次数
if(config.__retryCount >= config.retry) {
// 抛出错误信息
return Promise.reject(err);
}
// 增加请求重试次数
config.__retryCount += ;
// 创建新的异步请求
var backoff = new Promise(function(resolve) {
setTimeout(function() {
resolve();
}, config.retryDelay || );
});
// 返回axios信息,重新请求
return backoff.then(function() {
return axios(config);
});
});

使用:

axios.get('/some/endpoint', { retry: , retryDelay:  })
.then(function(res) {
console.log('success', res.data);
})
.catch(function(err) {
console.log('failed', err);
});

配置参数:

retry :第一次失败请求后重试请求的次数。
retryDelay: 失败请求之间等待的毫秒数(默认为1)。上述就是请求超时处理的的方案了。

扩展 axios 自定义配置新建一个 axios 实例  请求配置信息   Requst Config   以下是开发常用的一些配置选项

axios.create([config])
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: ,
headers: {'X-Custom-Header': 'foobar'}
});

config配置:

//新建 config.js
import Qs from 'qs'
{
//请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url
url: '/user',
// 请求方法同上
method: 'get', // default
// 基础url前缀
baseURL: 'https://some-domain.com/api/',   
transformRequest: [function (data) {
// 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装)
  data = Qs.stringify({});
return data;
}],
transformResponse: [function (data) {
// 这里提前处理返回的数据
return data;
}],
// 请求头信息
headers: {'X-Requested-With': 'XMLHttpRequest'},
//parameter参数
params: {
ID:
},
//post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错
data: {
firstName: 'Fred'
},
//设置超时时间
timeout: ,
//返回数据类型
responseType: 'json', // default
}

结语: 有不对或有疑问之处,欢迎留言。

Vue 结合 Axios 接口超时统一处理的更多相关文章

  1. 解决在vue中axios请求超时的问题

    查看更多精彩内容请访问我的新博客:https://www.cssge.com/ 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们 ...

  2. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  3. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  4. 【Vue】axios封装,更好的管理api接口和使用

    在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...

  5. 【vue】axios二次封装,更好的管理api接口和使用

    在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...

  6. 基于vue配置axios

    转载地址:https://juejin.im/post/5a02a898f265da43052e0c85 1.背景 在项目开发中ajax请求是必不可缺少 一部分ajax请求不需要loading或则请求 ...

  7. vue 使用axios 数据请求第三方插件的使用

    axios 基于http客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 监听请求和返回 ...

  8. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  9. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

随机推荐

  1. PHP环境安全加固

    随着使用 PHP 环境的用户越来越多,相关的安全问题也变得越来越重要.PHP 环境提供的安全模式是一个非常重要的内嵌安全机制,PHP 安全模式能有效控制一些 PHP 环境中的函数(例如system() ...

  2. Linux更新时,出现无法更新锁

    1.查看软件中心是否有更新 2.重启 3.rm/var/lib/dpkg/lock 4.sudo apt-get update 5.sudo dpkg --configure -a

  3. 152. Maximum Product Subarray(动态规划)

    Given an integer array nums, find the contiguous subarray within an array (containing at least one n ...

  4. Eclipse Decompiler不生效解决办法

    如下图,解决方案,Preferences->General->Editors->File Associations->*.class->Decompiler->De ...

  5. Linux进程相关命令使用场景

    Linux进程相关命令使用场景 在Linux系统上工作时,我们常常会碰到很多和进程相关的查询场景,今天在这里进行详细的讲解,进程相关的对象包括以下几个: 端口:Port 进程号:PId 执行文件所在路 ...

  6. springMVC学习之路2-文件上传

    springMVC的上传文件方式一共有两种,下面听我简单介绍一下: 1.1 首先配置springAnnotation-servlet.xml,新增一个multipartResolver处理器,并定义默 ...

  7. Django之天天生鲜项目

    准备工作 1.配置settings.py内置文件 注意: AUTH_USER_MODEL配置参数要在第一次迁移数据库之前配置,否则可能django的认证系统工作不正常 2.创建应用 3.配置主路由 一 ...

  8. PHP实现简单发红包(随机分配,平均分配)

    最近碰到一些情况,把思路重新整理了一下,敲出代码.记下来,以后可以借鉴,进一步优化等. 大致的思路:红包主要分两种,一种是平均分配,一种是随机分配. 1.平均分配 平均分配相对好理解,只要把钱平均分给 ...

  9. rman实验——测试备份压缩

    oracle rman自带的备份压缩机制,可以有效的压缩备份的大小,降低磁盘的占用率.但是也会因为压缩而消耗更多的系统性能,和增加备份时间.现在就通过实验来看压缩和不压缩的区别. 进行不压缩全备 RM ...

  10. VC++ 异常处理 __try __except的用法

    转载:https://blog.csdn.net/jiaxiaokai/article/details/50983867 __try __except的用法: __try __except是windo ...