Vue裡邊介面訪問Post、Get

流火行者發表於2017-08-14
Vue

原文地址：

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檔案裡，先匯入這個方法

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

呼叫的地方：

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

axios:

axios使用方法和vue-resouce類似，axios是一個獨立的程式碼庫，不需要基於Vue，所以引用的時候更方便一些。

首先npm安裝：npm install axios

然後在utils檔案裡是這樣的。

在Vue檔案匯入：

 1 import utils from "@/lib/utils"; 

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

相關文章