封装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加密