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))
        })