axios请求拦截及请求超时重新请求设置

自从使用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

 

posted @ 2018-07-25 10:11  ESnail  阅读(2129)  评论(0编辑  收藏  举报