Vue里边接口访问Post、Get

原文地址：

http://www.cnblogs.com/JimmyBright/p/7356502.html 

通常js里面都用ajax来和服务器交换数据，Vue里边当然也可以用ajax，ajax是基于jquery的扩展插件，Vue的架构已经摒弃了Jquery，为了用一下ajax，还去引用jquery，显得太笨重了，而且，也会显得比较low了。

Vue里边自然有Vue的方法去发送你的Post、Get请求。之前有一个基于Vue的插件Vue-resource，现在一般推荐axios了，Vue-resource已经不更新了。下面分别看下他们怎么用的。

Vue-resource:

控制台进入当前项目，允许 npm install Vue-resource

aindex文件写一些全局方法库，网络请求是使用频次非常多的方法，所以写到这个文件里

由于resource是Vue的插件，所以在开始的时候需要引用进来

import Vue from 'vue';
import VueResource from 'vue-resource'
Vue.use(VueResource);
主要Vue.use,通常Vue插件都要这样引用

其他文件需要post参数的时候只要调用service_jz这个方法就可以了。

在单页面.vue文件里，先导入这个方法

  import {service_jz} from "@/lib/utils/aindex";

调用的地方：

  var url='open/age';
        service_jz(url,{idno:"34234134134134143"},function(result){
          console.log('eee:'+JSON.stringify(result.data))
        },function(error){
          console.log(JSON.stringify(error))
        })

axios:

axios使用方法和vue-resouce类似，axios是一个独立的代码库，不需要基于Vue，所以引用的时候更方便一些。

首先npm安装：npm install axios

然后在utils文件里是这样的。

在Vue文件导入：

 import utils from "@/lib/utils"; 

        var url='open/age';
        utils.service_jz(url,{idno:"34234134134134143"},function(result){
          console.log('eee:'+JSON.stringify(result.data))
        },function(error){
          console.log(JSON.stringify(error))
        })