zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    线性变换 矩阵
    【安全】安全测试基本切入点
    【产品】汉语言基础对产品经理的重要性
    【Selenium】自动化调试后C盘越来越大
    【记录】让人淡疼的BUG之参数传送错误
    【转载】Java 升级到jdk7后DbVisualizer 6 启动空指针的处理方案
    cocoapods 报错
    mac 版 Pycharm 激活
    Foxmail添加gmail密码错误
    Apple 相关官方地址
  • 原文地址:https://www.cnblogs.com/EnSnail/p/9364379.html
Copyright © 2011-2022 走看看