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

 

版权声明:本文为EnSnail原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/EnSnail/p/9364379.html