vue axios如何把常用的请求独立成service模块

Question

类似问题https://segmentfault.com/q/10...

现在vue推荐使用axios，如何把请求独立成service模块呢，有没有实际案例

Answer 1

局部调用:

//service.js
export default {
   getUserInfo(v){
      v.axios...
   }
}
//component.vue
import service from 'path'
//调用
service.getUserInfo(this)

全局函数:

//service.js
exports.install = function (Vue, options) {
    Vue.prototype.service= {
        getUserInfo(v){
          v.axios...
        }
    }
}

//main.js
import service from 'path'
Vue.use(service)

//components.vue
this.service.getUserInfo(this)

Answer 2

可以这样处理 写一个获取接口的js
//baseJs.js

function xxx(){}

function bbbb(){}
export default {
    xxx,
    bbb
}

//main.js
import utils from './baseJs'

Vue.prototype.utils = utils;

这样在每个页面都可以调用了

this.utils.xxx;

Answer 3

就包装一个模块，把你需要用到的方法，写在模块里，然后暴露接口出来。。然后就import进你需要用的地方，最后调用即可啊。思想大致如此。