Vue+iView LoadingBar封装Axios请求

痛定思痛。 2022-01-31 20:01 347阅读 0赞

import Axios from 'axios'
    import qs from 'qs'
    import iView from 'iview'
    
    
    Axios.defaults.timeout = 60000
    Axios.defaults.baseURL = ''
    
    
    //http request 拦截器
    Axios.interceptors.request.use(
      config => {
        if(config.method === 'post') {
          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'
          }
        }
    
        //开始显示LoadingBar
        iView.LoadingBar.start();
        return config
      },
      error => {
        //失败显示LoadingBar
        iView.LoadingBar.error();
        return Promise.reject(error)
      }
    )
    
    //http response 拦截器
    Axios.interceptors.response.use(
      response => {
        let data = response.data
        if(data.successFlag === 1) {
          //关闭显示LoadingBar
          iView.LoadingBar.finish();
          return Promise.resolve(data)
        } else {
          iView.LoadingBar.error();
          return Promise.reject(data)
        }
      },
      error => {
        iView.LoadingBar.error();
        return Promise.reject(error)
      }
    )
    
    /**
     * 封装get方法
     * @param url
     * @param data
     * @returns {Promise}
     */
    
    const get = function get(url, params = {}) {
      return new Promise((resolve, reject) => {
        Axios.get(url, {
            params: params
          })
          .then(response => {
            resolve(response);
          })
          .catch(err => {
            reject(err)
          })
      })
    }
    
    
    /**
     * 封装post请求
     * @param url
     * @param params
     * @returns {Promise}
     */
    
    const post = function post(url, params = {}) {
      return new Promise((resolve, reject) => {
        Axios.post(url, params)
          .then(response => {
            resolve(response);
          }, err => {
            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
    }