1. 程式人生 > >Vue之vue-resource外掛使用

Vue之vue-resource外掛使用

vue-resource 是實現Vue非同步載入的庫
vue-resource特點

  1. 體積小
    vue-resource非常小巧,在壓縮以後只有大約12KB,服務端啟用gzip壓縮後只有4.5KB大小,這遠比jQuery的體積要小得多。vue-resource非常小巧,在壓縮以後只有大約12KB,服務端啟用gzip壓縮後只有4.5KB大小,這遠比jQuery的體積要小得多。

  2. 支援主流的瀏覽器
    和Vue.js一樣,vue-resource除了不支援IE 9以下的瀏覽器,其他主流的瀏覽器都支援。

  3. 支援Promise API和URI Templates
    Promise是ES6的特性,Promise的中文含義為“先知”,Promise物件用於非同步計算。
    URI Templates表示URI模板,

    有些類似於ASP.NET MVC的路由模板。

  4. 支援攔截器
    攔截器是全域性的,攔截器可以在請求傳送前和傳送請求後做一些處理。
    攔截器在一些場景下會非常有用,比如請求傳送前在headers中設定access_token,或者在請求失敗時,提供共通的處理方式。

下載

npm install vue-resource –save-dev

載入
在main.js 中新增

import VueResource from 'vue-resource' 
Vue.use(VueResource)

Get 請求(如果需要傳遞資料,可以使用 this.$http.get(url,jsonData) 格式,第二個引數 jsonData 就是傳到後端的資料。)

this.$http.get(url).then(function(res){
                    console.log(res.data);    
                },function(){
                    console.log('請求失敗處理');
                });

Post 請求
post 傳送資料到後端,需要第三個引數 {emulateJSON:true}。
emulateJSON 的作用: 如果Web伺服器無法處理編碼為 application/json 的請求,你可以啟用 emulateJSON 選項。

post(url,{key1:value1,key2:value2},{emulateJSON:true}).then(function(res){
                    document.write(res.body);    
                },function(res){
                    console.log(res.status);
                });
            }
    

vue-resource 提供了 7 種請求 API(REST 風格):

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])