Vue+iView LoadingBar封装Axios请求

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sunct/article/details/90202621

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
}