axios 可以挂在Vue原型上 为啥还有个vue-axios?

Question

如题，这个vue-axios有什么其他用途还是多余的？
因为

Vue.prototype.$http = axios
和
import Vueaxios from ‘vue-axios’
Vue.use(VueAxios,axios)

这二者效果都是一致，这样我就感觉vue-axios显得多余。希望知道多一点的朋友，能告诉我vue-axios存在的必要，非常感谢！

Answer 1

何不看看vue-axios的源码，就一个文件：

index.js

(function () {

/**
 * Install plugin
 * @param Vue
 * @param axios
 */

function plugin(Vue, axios) {

  if (plugin.installed) {
    return
  }
  plugin.installed = true

  if (!axios) {
    console.error('You have to install axios')
    return
  }

  Vue.axios = axios

  Object.defineProperties(Vue.prototype, {

    axios: {
      get() {
        return axios
      }
    },

    $http: {
      get() {
        return axios
      }
    }

  })
}

if (typeof exports == "object") {
  module.exports = plugin
} else if (typeof define == "function" && define.amd) {
  define([], function(){ return plugin })
} else if (window.Vue && window.axios) {
  Vue.use(plugin, window.axios)
}

})();

首先是按照Vue的插件文档来写的，直接绑在原型链上不是不可以，如果像楼主你这样注册一个$http，和项目其他成员协作的时候就必须注明你注册的变量名称，而使用vue-axios大家就没有歧义了。

说白了，使用vue-axios更多是为了符合规范，并且方便协作吧。

Answer 2

看你怎么写了， 我们这边是把接口都编上号了，然后在VUE文件里用 get('00011', param)这样去调，所以又给AXIOS多封装了一层。如果没这需求，怎么方便怎么来。

const getUrl = urlId => {
  return (Urls.hasOwnProperty(urlId)) ? Urls[urlId] : ''
}

// 为不同的接口服务器配置不同的axios实例
const axios = Axios.create({
  withCredentials: true,
  timeout: 10000
})

const get = (urlId, params) => {
  try {
    NProgress.start()
    let path = getUrl(urlId)
    if (path) {
      let result = axios.get(path, {params: params})
      return result
    } else {
      Message.error('当前请求的接口不存在' + urlId)
      let error = {
        status: 404,
        statusText: 'Url is undefined',
        message: '当前请求的接口不存在' + urlId
      }
      return Promise.reject(error)
    }
  } finally {
    NProgress.done()
  }
}
const post = (urlId, params) => {
  try {
    NProgress.start()
    let path = getUrl(urlId)
    if (path) {
      let result = axios.post(path, params)
      return result
    } else {
      Message.error('当前请求的接口不存在')
      let error = {
        status: 404,
        statusText: 'Url is undefined',
        message: '当前请求的接口不存在'
      }
      return Promise.reject(error)
    }
  } finally {
    NProgress.done()
  }
}

Answer 3

没必要啊 如下

import axios from 'axios'
Vue.prototype.$http = axios

一般在main.js中这样使用就好了

Answer 4

使用 Vue 的插件写法，更符合 Vue 整体生态环境。
P.S. 直接写原型链，感觉有些粗暴了，毕竟现在 ES8 都出来了。。。除非是很底层的实现，否则不太推荐这样写了