axios 预配置

最新推荐文章于 2022-06-21 18:34:15 发布

大海的前端博客

最新推荐文章于 2022-06-21 18:34:15 发布

阅读量326

点赞数 1

分类专栏： vue axios

本文链接：https://blog.csdn.net/github_36673034/article/details/89147254

版权

vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

axios

1 篇文章 0 订阅

订阅专栏

大家都知道，axios预配置不外乎三件事

第一处理post请求，以及参数为数组的处理
第二增加loading配置
第三异常情况处理，公共参数处理

下边我一一细说下

post处理，业界公认三种方式

使用axios自带的 transformRequest，在请求发送前将请求数据进行转换

 // global set axios
  axios.defaults.headers = {
    'Content-Type': 'application/x-www-form-urlencoded',
  };
  // eslint-disable-next-line
  axios.defaults.transformRequest = [function (data) {
    // 对post传参进行处理，Object，Array 会被 JSON.stringify 处理
    let newData = '';
    // eslint-disable-next-line
    for (let k in data) {
      newData += `&${encodeURIComponent(k)}=${encodeURIComponent((typeOf(data[k]) === 'object') ? JSON.stringify(data[k]) : data[k])}`;
    }
    if (newData.indexOf('&') === 0) {
      newData = newData.substring(1);
    }
    return newData;
  }];

这个需要手动处理对象数组，否则后端不识别

如果使用模块化开发，可以使用qs模块进行转换

if (config.method === 'post') {
	config.data = qs.stringify(config.data)
 }

new URLSearchParams()

var params = new URLSearchParams();
params.append('a', 'value1');
params.append('b', 'value2');
axios.post('/url', params);

loading配置

axios.interceptors.request.use(config => {
    if (!config.noloading) {//考虑到有些情况不需要loading，自定义loading配置
      Indicator.open()
    }
 }
axios.interceptors.response.use(response => {
    Indicator.close()
}

异常处理

axios.interceptors.response.use(response => {
    Indicator.close()
    if (response.data.errno === 0 || response.data.errno === 140002) {
      return response
    } else {
      Toast(response.data.errmsg)
    }
  }, error => {
    Toast('系统错误')
    return Promise.resolve(error.response)
  })

公共处理

	let commonParams = {}
    let datas = config.data || {}
    Object.assign(datas, commonParams)
    config.data = datas

完整代码

import qs from 'qs'
import {Toast, Indicator} from 'mint-ui'
const plugin = {}

plugin.install = (Vue, axios) => {
  if (plugin.installed || !axios) {
    return
  }
  plugin.installed = true
  // bind axios to Vue
  Vue.axios = axios
  Object.defineProperties(Vue.prototype, {
    axios: {
      get () {
        return axios
      }
    },
    $http: {
      get () {
        return axios
      }
    }
  })

  axios.interceptors.request.use(config => {
    if (!config.noloading) {
      Indicator.open()
    }
    let commonParams = {}
    let datas = config.data || {}
    Object.assign(datas, commonParams)
    config.data = datas
    if (config.method === 'post') {
      config.data = qs.stringify(config.data)
    }
    return config
  }, error => {
    return Promise.reject(error)
  })

  axios.interceptors.response.use(response => {
    Indicator.close()
    if (response.data.errno === 0) {
      return response
    } else {
      Toast(response.data.errmsg)
    }
  }, error => {
    Toast('系统错误')
    return Promise.resolve(error.response)
  })
}
export default plugin