封装axios，并实现全局请求loading（配合ElementUI）、拦截请求参数实现Unicode加密、拦截响应数据

野性酷女 2024-04-19 11:18 51阅读 0赞

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加密**