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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM