封裝axios，並實現全局請求loading（配合ElementUI）、攔截請求參數實現Unicode加密、攔截響應數據

1、封裝的axios文件代碼如下

import axios from 'axios'
import { apiDataServer } from '../config'
import { Loading } from 'element-ui'

let loading

function startLoading () { // 使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '加載中……',
    background: 'rgba(0, 0, 0, 0.7)'
  })
}
function endLoading () { // 使用Element loading-close 方法
  loading.close()
}

// 那麼 showFullScreenLoading() tryHideFullScreenLoading() 要乾的事兒就是將同一時刻的請求合併。
// 聲明一個變量 needLoadingRequestCount，每次調用showFullScreenLoading方法 needLoadingRequestCount + 1。
// 調用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount爲 0 時，結束 loading。
let needLoadingRequestCount = 0
export function showFullScreenLoading () {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}

export function tryHideFullScreenLoading () {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}

class HttpRequest {
  constructor (url = apiDataServer) {
    this.baseUrl = url
  }
  getInsideConfig () {
    return {
      baseURL: this.baseUrl
      // 處理headers
      // headers: {}
    }
  }
  interceptors (instance) {
    instance.interceptors.request.use(config => {
      // 請求攔截處理
      showFullScreenLoading() // 開始加載loading
      // 給所有請求參數都進行Unicode加密
      if (config.params) {
        config.params.jsonData = encodeURIComponent(JSON.stringify(config.params.jsonData))
      }
      return config
    }, error => {
      return Promise.reject(error)
    })
    instance.interceptors.response.use(res => {
      tryHideFullScreenLoading() // 結束加載loading
      return res.data
    }, error => {
      return Promise.reject(error)
    })
  }
  request (options) {
    const instance = axios.create()
    options = Object.assign(this.getInsideConfig(), options) // 合併對象
    this.interceptors(instance)
    return instance(options)
  }
}

export default HttpRequest

注：這裏importzhong 的config文件是根據全局的開發環境還是生產環境，設置請求接口的地址

export let apiDataServer = process.env.NODE_ENV === 'production'
  ? 'http://localhost:63342/test-web/dist/' : 'http://60.191.73.154:11006'

2、使用自己封裝好的axios文件

import HttpRequest from './axios' // 引入咱們剛剛封裝好的axios
const axios = new HttpRequest()

export getAreaInfo = () => { // 獲取區縣信息
      return axios.request({
        url: '/abc/bcd/mn.json',
        method: 'get'
      })
},
export getSearchResultData = (data) => { // 獲取查詢結果
  return axios.request({
    url: '/abc/bcd/mnxyz.json',
    method: 'get',
    params: { jsonData: data }
  })
}

注：這裏分別展示了沒有請求參數的get請求和帶有請求參數的get請求，帶有參數的請求，會自動在請求攔截中進行Unicode加密