自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,需要解决问题:

1. 请求带token校验

2. post请求请求体处理

3. 响应未登录跳转登录页处理

4. 响应错误提示

5. 响应超时,重新请求处理

由于接口调用,基本每个页面都有,这些问题,也都可以全局处理,因此抽离了出来,保存为api/axios.js, 在main.js中引入。

处理过程中,借鉴了很多文章。借鉴的文章较多,就不一一列举了。

如有更好的建议,可以留言告诉我。谢谢^_^

// axios全局配置,包括验证检验及错误处理
import axios from 'axios'
import qs from 'qs'
import store from 'store'
import {code} from 'api/config'
import {Message} from 'element-ui' // 超时设置
const service = axios.create({
timeout: 10000
}) // 请求超时重新请求次数,请求间隙
axios.defaults.retry = 3
axios.defaults.retryDelay = 1000 // http request 拦截器
service.interceptors.request.use(
config => {
// 每次请求都为http头增加Authorization字段,其内容为token
if (store.state.user.token) {
config.headers['X-LMP-Auth-Token'] = store.state.user.token
}
// post请求参数处理
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
if (config.method === 'post') {
if (!config.__retryCount || config.__retryCount === 0) { // 只处理第一次请求数据,保证后面请求超时请求数据正常
config.data = qs.stringify({...config.data})
}
}
return config
},
err => {
return Promise.reject(err)
}
) service.interceptors.response.use(
response => {
const data = response.data
if (data.code === code.errNotLogin) {
store.commit('user/setToken', '')
location.replace('/login')
} else {
return response
}
},
err => { // 请求超时,设置重新请求及错误提示
let config = err.config
if (!config || !config.retry) {
Message.error((err && err.data && err.data.msg) || '接口异常')
return Promise.reject(err)
}
// 设置请求超时次数
config.__retryCount = config.__retryCount || 0
if (config.__retryCount >= config.retry) {
Message.error((err && err.data && err.data.msg) || '接口异常')
return Promise.reject(err)
}
config.__retryCount += 1
let backoff = new Promise((resolve) => {
setTimeout(() => {
resolve()
}, config.retryDelay || 1)
})
return backoff.then(() => {
return service(config)
})
}
) export default service

axios请求拦截及请求超时重新请求设置的更多相关文章

  1. Feign 请求拦截器和日志

    Feign 支持请求拦截器,在发送请求前,可以对发送的模板进行操作,例如设置请求头等属性,自定请求拦截器需要实现 feign.RequestInterceptor 接口,该接口的方法 apply 有参 ...

  2. axios设置请求拦截和响应拦截

    首先我们先创建axios实例 const service = axios.create({ baseURL: url, //是用于请求的服务器 URL timeout: 5000, // 请求超时时间 ...

  3. axios请求,拦截器的使用

    1. axios 创建请求 import axios from 'axios' import {Message} from 'element-ui' import router from " ...

  4. Axios使用拦截器全局处理请求重试

    Axios拦截器 Axios提供了拦截器的接口,让我们能够全局处理请求和响应.Axios拦截器会在Promise的then和catch调用前拦截到. 请求拦截示例 axios.interceptors ...

  5. 细说vue axios登录请求拦截器

    当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cn ...

  6. vue中前端处理token过期的方法与axios请求拦截处理

    在处理token过期的这个问题上困扰了我很久,现在终于解决的了,所以分享出来给大家,希望能够对大家有所帮助. 首先,当然是路由进行拦截,路由拦截当然是在beforeEach中了: router.bef ...

  7. token回话保持,axios请求拦截和导航守卫以及token过期处理

    1:了解token:有时候大家又说token令牌.整个机制是前端第一次登陆发送请求,后端会根据前端的用户名和密码, 通过一些列的算法的到一个token令牌, 这个令牌是独一无二的,前端每次发送请求都需 ...

  8. vue 路由拦截、axios请求拦截

    路由拦截 项目中,有些页面需要登录后才能进入,例如,在某页面A,用户在操作前需要先进入登录页(此时需要将上一页的地址(/survey/start)作为query存入login页面的地址中,如: htt ...

  9. axios请求拦截器(修改Data上的参数 ==>把data上的参数转为FormData)

    let instance = axios.create({ baseURL: 'http://msmtest.ishare-go.com', //请求基地址 // timeout: 3000,//请求 ...

随机推荐

  1. 2018.06.26 NOIP模拟 号码(数位dp)

    题目背景 SOURCE:NOIP2015-GDZSJNZX(难) 题目描述 Mike 正在在忙碌地发着各种各样的的短信.旁边的同学 Tom 注意到,Mike 发出短信的接收方手机号码似乎都满足着特别的 ...

  2. 使用hibernate从一方获取多方信息时报错:org.hibernate.LazyInitializationException: failed to lazily initialize a collection of role

    引起原因:hibernate加载关联对象的方式有懒加载方式和立即加载方式. 如果在多对一的配置中没有指定加载方式,而一对多的配置中指定了懒加载方式,因此在获取一方是可获取到值,而获取多方时sessio ...

  3. c# devexpress绘图 三角函数

    加标题: using System; using System.Windows.Forms; using DevExpress.XtraCharts; // ... namespace SideByS ...

  4. 第19章:MongoDB-聚合操作--聚合管道--$limit+$skip

    ①$limit “$limit”:负责数据的取出个数: “$skip”:数据的跨过个数. ②范例:使用“$limit”设置取出的个数

  5. 整合Spring+Struts2+Mybatis加spring单元测试等

    前言 自己是在CentOS7的IntelliJ IDEA里开发的,里面中文输入法有问题经常用不了,所以这里用了很多chinglish,希望不要介意: 一:pom依赖 <?xml version= ...

  6. 1.4isAlive()方法

    方法isAlive()的功能是判断当前线程是否处于活动状态 活动状态是线程已经启动且尚未终止,线程处于正在运行或准备开始运行的状态,就认为线程是存活的. 测试如下 package com.cky.th ...

  7. Web结构组件

    一.Web结构组件 1.代理 位于客户端和服务器之间的HTTP实体,接收客户端的所有HTTP请求,并将这些请求转发给HTTP服务器. 2.缓存 HTTP的仓库,使常用的页面的副本可以保存在离客户端更近 ...

  8. 改Android手机定位位置

    手机定位方法 1,gps等卫星定位,如美国的gps,欧洲的伽利略,中国的北斗等,通过至少三颗卫星,用三角定位和时间等算法,计算出设备的经纬度,到地图上找到这个经纬度的地名 2,移动运营商基站定位,通过 ...

  9. bzoj2004(矩阵快速幂,状压DP)

    每个长度为p的区间都必须出现k次1,数据又很小,我们使用状压. dp[i][j]->dp[i+1][j'],dp[i][j]表示当前考虑到了第i个车站,包括第i个其后的p个的状态(有车停或没车停 ...

  10. mysql 中 datetime和 timestamp的区别

    DATETIME日期和时间的组合.支持的范围是'1000-01-01 00:00:00'到'9999-12-31 23:59:59'.MySQL以'YYYY-MM-DD HH:MM:SS'格式显示DA ...