Vue+Element UI封装Axios请求，支持PayLoad、Form Data两种方式

川长思鸟来 2022-02-01 11:09 636阅读 0赞

由于Element的Loading是全局等待条，每次请求都需要显示，有时候不太方便。

下面做了一个处理，根据情况，在请求参数中添加showLoading=true，自行显示全局等待条。

import Axios from 'axios'
    import qs from 'qs'
    import { Message, Loading } from 'element-ui';
    
    let loading;        //定义loading变量
    
    function startLoading() {    //使用Element loading-start 方法
        loading = Loading.service({
            lock: true,
            text: '加载数据中……',
            background: 'rgba(0, 0, 0, 0.3)'
        })
    }
    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()
        }
    }
    
    Axios.defaults.timeout = 60000
    Axios.defaults.baseURL = ''
    
    
    //http request 拦截器
    Axios.interceptors.request.use(
      config => {
        if(config.method === 'post') { //支持2种方法，默认使用Form Data
          if(config.data.useRequestBody) {
            //参数需要带上useRequestBody
            //如果useRequestBody=true, 支持Request Payload，
            //SpringMVC Controller 中需要使用@RequestBody
            delete config.data.useRequestBody;
            config.headers = {
              'Content-Type': 'application/json;charset=UTF-8'
            }
          } else { 
            //如果useRequestBody=false, 默认支持Form Data
            //SpringMVC Controller 中不需要使用@RequestBody，默认使用@RequestParam
            config.data = qs.stringify(config.data); 
            config.headers = {
              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            }
          }
          
        } else if(config.method === 'get') {
          let newParams = {}
          for(let key in config.params) {
            newParams[key] = encodeURIComponent(config.params[key])
          }
          config.params = newParams
     
          config.headers = {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }
    
        //显示等待框
        showFullScreenLoading();
    
        return config
      },
      error => {
        return Promise.reject(error)
      }
    )
    
    //http response 拦截器
    Axios.interceptors.response.use(
      response => {
        let data = response.data
        
        //隐藏等待框
        //tryHideFullScreenLoading()
    
        if(data.successFlag === 1) {
          return Promise.resolve(data)
        } else {
          return Promise.reject(data)
        }
      },
      error => {
        return Promise.reject(error)
      }
    )
    
    /**
     * 封装get方法
     * @param url
     * @param data
     * @returns {Promise}
     */
    
    const get = function get(url, params = {}) {
      return new Promise((resolve, reject) => {
        params.showLoading && showFullScreenLoading() //显示等待框
    
        Axios.get(url, {
            params: params
          })
          .then(response => {
            params.showLoading && tryHideFullScreenLoading() //隐藏等待框
    
            resolve(response);
          })
          .catch(err => {
            params.showLoading && tryHideFullScreenLoading() //隐藏等待框
    
            reject(err)
          })
      })
    }
    
    
    /**
     * 封装post请求
     * @param url
     * @param params
     * @returns {Promise}
     */
    
    const post = function post(url, params = {}) {
      return new Promise((resolve, reject) => {
        params.showLoading && showFullScreenLoading() //显示等待框
    
        Axios.post(url, params)
          .then(response => {
            params.showLoading && tryHideFullScreenLoading() //隐藏等待框
    
            resolve(response);
          }, err => {
            params.showLoading && tryHideFullScreenLoading() //隐藏等待框
    
            reject(err)
          })
      })
    }
    
    /**
     * 封装patch请求
     * @param url
     * @param data
     * @returns {Promise}
     */
    
    const patch = function patch(url, data = {}) {
      return new Promise((resolve, reject) => {
        Axios.patch(url, data)
          .then(response => {
            resolve(response);
          }, err => {
            reject(err)
          })
      })
    }
    
    /**
     * 封装put请求
     * @param url
     * @param data
     * @returns {Promise}
     */
    
    const put = function put(url, data = {}) {
      return new Promise((resolve, reject) => {
        Axios.put(url, data)
          .then(response => {
            resolve(response);
          }, err => {
            reject(err)
          })
      })
    }
    
    
    export default {
      post,
      get,
      patch,
      put
    }