vue数据请求

1.axios(建议使用)

功能特性

• 在浏览器中发送 XMLHttpRequests 请求
• 在 node.js 中发送 http请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 自动转换 JSON 数据
• 客户端支持保护安全免受 XSRF 攻击

vue中axios的用法

• 不能通过Vue.use()来注册公共组件，必须使用Vue.prototype.$ajax=axios；但是不必要注册为公共组件，只需要使用时import引入即可。

    this.$ajax.get();
    this.$ajax.post();
    不支持jsonp，但可以用其他方式进行跨域请求数据cors或原生jsonp或nginx代理。

• 改写原型链

1. 首先在 main.js 中引入 axios
   import axios from 'axios'
2. 将 axios 改写为 Vue 的原型属性
   Vue.prototype.$ajax = axios
3. 在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $ajax 命令

methods: {
  submitForm () {
    this.$ajax({
      method: 'post',
      url: '/user',
      data: {
        name: 'wise',
        info: 'wrong'
      }
   }).then(function(response){
        console.info(response)
    })
}

2.vue-resource(官方已经不再维护)

• 通过Vue.use(VueResource) 注册为公共组件
  • this.$http.get();
  • this.$http.post();
  • this.$http.jsonp();
• 用法

1. 安装
   $ npm install vue-resource
2. 使用VueResource插件
   Vue.use(VueResource)
3. 引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。

// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);