vue-resource 常用的请求代码段如何独立成service模块?

Question

• 我们都知道，vue-resouce的请求是要通过Vue实例来调用的

import VueResource from 'vue-resource'
//常量：获取用户数据
const URL_GET_USER_INFO = '/json/getUserInfo';
//请求
var promise = this.$http.get(URL_GET_USER_INFO);
promise.then(function (res) {  
  // 处理成功的结果  
  console.log('this.$http 的請求')  
}).catch(function(res)){
  // 处理失败的结果  
  console.error('this.$http 的請求');
}

---

• 需求 ：由于获取用户信息的请求很常用，我希望将该代码段封装到一个模块，哪里用到就调用。

service/api.js

//常量：获取用户数据
const URL_GET_USER_INFO = '/json/getUserInfo';
//发送请求
export function getUserInfo(){
  return this.$http.post(URL_GET_USER_INFO);
}

home.vue

//引入模块
import { getUserInfo } from '../service/api.js'
//调用方法
getUserInfo().then(function(){
  console.log('this.$http 的請求') 
}).catch(function(){
  console.error('this.$http 的請求');
});

• 问题 ：提示找不到$htpp对象，难道vue-resource必须要通过Vue实例调用，不能独立成模块吗？

Uncaught TypeError: Cannot read property '$http' of undefined

Answer 1

问题解决

service/api.js 传入this执行环境来调用$http即可

//常量：获取用户数据
const URL_GET_USER_INFO = '/json/getUserInfo';
//发送请求
export function getUserInfo(context){
  return context.$http.post(URL_GET_USER_INFO);
}

home.vue

//引入模块
import { getUserInfo } from '../service/api.js'
//调用方法
getUserInfo(this).then(function(){
  //...
}).catch(function(){
  //...
});

Answer 2

this指向不一样了，所以会报错，不能那样封装。

简单的满足你的需求可以用Vue.http而不是用this.$http

Answer 3

VueResource.post也是可以调用的.
vue只是把vueResource绑定到$http上.

Answer 4

只要你已经vue实例之前use了vue-resource, 那么
Vue.http 和 组件里 this.$http是一样的

https://github.com/pagekit/vu...