axios的二次封裝

• 1、請求攔截（往請求頭部加公共部分參數）
• 2、響應攔截（正常訪問、登錄掉線、異常等處理）
• 3、錯誤統一處理
• 4、可取消網絡請求(如：切換頁面，取消原頁面上未完成的網絡請求)

一、axios封裝如下：

// request.js文件
import axios from 'axios'
import qs from 'qs'
import router from '../router'

// 定義全局變量clearRequest，在route.js中要用到
export const clearRequest = {
  source: {
    token: null,
    cancel: null
  }
}
const cancelToken = axios.CancelToken
const source = cancelToken.source()

const service = axios.create({
  // process.env.NODE_ENV === 'development' 來判斷是否開發環境
  // baseURL: 'https://www.xyz.com/api/',
  baseURL: process.env.NODE_ENV === 'development' ? '/api' : '/',
  timeout: 12000
})

// 請求攔截器
service.interceptors.request.use(
  config => {
    if (config.method === 'post' || config.method === 'put') {
      config.data = qs.stringify(config.data)
    }
    // 頭部加入公共信息
    if (!config.headers.Authorization) {
      config.headers['Authorization'] = `Bearer ${getLocalStorage(
        'token'
      ) || ''}`
      config.headers['OS'] = 'android' // android端
      config.headers['Source'] = '1' // 渠道包編號
    }
    // 在發送請求設置cancel token
    config.cancelToken = clearRequest.source.token // 這句很重要
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    // 此次可以統一處理返回邏輯，如：關閉請求網絡頁面上的加載彈框等
    if (response.status === 200) {
      return response.data
    } else if (response.status === 400) { // 未登錄
      removeLocalStorage('token') // 清除原來的token的值
      const curRouter = window.location.hash.substring(1) // 截取hash的路由
	  router.replace({ path: '/login', query: { redirect: curRouter } })
    } else {
      Promise.reject(response)
    }
  },
  error => {
    let errMsg = '請重試~'
    if (error.message && error.message.indexOf('timeout') > -1) {
      errMsg = '網絡請求超時，請重試~'
    } else if (error.message && error.message.indexOf('Network') > -1) {
      errMsg = '網絡異常，請重試~'
    }
    if (error.message && error.message.indexOf('Cancel') < 0) { // cancel的取消請求不作處理
      // Dialog.alert({ // error.message
      //   title: '提示',
      //   message: errMsg
      // })
    }
    console.log(error + errMsg)
    return Promise.reject(error)
  }
)

const post = (url, data, config = {}) => service.post(url, data,
  {
    ...config, cancelToken: source.token // 這句很重要
  })

const get = (url, params, config = {}) =>
  service.get(url, {
    params,
    ...config,
    cancelToken: source.token // 這句很重要
  })

export default {
  install (Vue) {
    Vue.prototype.$reqGet = get
    Vue.prototype.$reqPost = post
  }
}

二、取消未完成的網絡請求

使用場景：切換頁面，取消原頁面上未完成的網絡請求
在router路由beforeEach 加入如下代碼即可：

import { clearRequest } from '@utils/request'

// 切換路由時清空上個路由未完成的所有請求
const CancelToken = axios.CancelToken
clearRequest.source.cancel && clearRequest.source.cancel()
clearRequest.source = CancelToken.source()