Vue中axios与vue-axios的区别

axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行绑定。

Vue.prototype.$axios = axios

vue-axios是将axios集成到Vuejs的小包装器，可以像插件一样进行安装

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

虽然在实际使用上没有差别，但推荐使用vue-axios，因为直接安装的方式更符合Vue的使用规范，绑定方式命名的变量名($axios)因人而异，辨识度不高。

axios封装

在文件app.js中简单封装axios请求函数

import Vue from 'vue'
import qs from 'qs'
 
export default {
  // 请求函数
  request (url, params = {}) {
    return new Promise((resolve, reject) => {
      Vue.axios.post(url, qs.stringify(params))
        .then((res) => {
          resolve(res.data)
        })
    })
  },
}

注意：qs模块是防止跨域时，post请求转变成options请求

另外： qs.stringify(params)使用时需要注意图片上传的情况，上传以formData形式上传，不能使用qs.stringify(params)，应该直接传params

import Vue from 'vue'
import qs from 'qs'
 
export default {
  // 请求函数
  request (url, params = {}) {
    let _params = null
 
    if (params instanceof FormData) {
      _params = params
    }
    else {
      _params = qs.stringify(params)
    }
 
    return new Promise((resolve, reject) => {
      Vue.axios.post(url, _params )
        .then((res) => {
          resolve(res.data)
        })
    })
  },
}