vue 基于axios 封装的插件 ajaxPlus 使用心得

在网上找了一个封装好的axios 插件，根据自己的需要做了一部分调整，

引用在main.js 中引入ajaxPlus插件，设置baseURL，以及超时响应

import ajaxPlus from './ajax'
Vue.use(ajaxPlus, {
  baseURL: '请求地址',
  timeout: 45000
})

因为插件的loading好像没有起作用，于是根据使用的element框架自己加了一个，在ajax.js中引入element 的loading组件

import {Loading} from 'element-ui'

在请求发起之前显示loading动画

let loadingInstance = Loading.service({
      text: '正在加载中...',
      background: 'rgba(0, 0, 0, 0.5)'
    })

请求结束后关闭loading

loadingInstance.close()

另外，在使用过程中发现了一个问题，ajaxPlus在发送post请求时会遇到问题，无法将数据发送至后台，在问过度娘之后找到了解决方法，使用qs将数据转换，引入qs组件后，在请求中转换数据

post请求时转换数据，这时后台就能够接收到数据了

let obj = method.toLowerCase() === 'post' ? qs.stringify(_data) : _data
    // let obj = _data
    // eslint-disable-next-line no-unused-expressions
    typeof _data === 'function' && ((obj = {}), (cb = _data))
    const param = method.toLowerCase() === 'post' ? 'data' : 'params'
    console.log(method.toLowerCase(), url)
    const opt = {
      url,
      method,
      [param]: obj
    }