H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

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

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

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

回答:

何不看看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更多是为了符合规范,并且方便协作吧。

回答:

看你怎么写了, 我们这边是把接口都编上号了,然后在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()
  }
}

回答:

没必要啊 如下

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

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

回答:

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

本文地址:H5W3 » axios 可以挂在Vue原型上 为啥还有个vue-axios?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址