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