Vue2學習筆記之請求數(shù)據(jù)交互vue-resource

更新時間：2017年02月23日 15:07:41 作者：＜/script＞

本篇文章主要介紹了Vue2學習筆記之數(shù)據(jù)交互vue-resource ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

基本語法

必須引入一個庫：vue-resource github地址

// 基于全局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);

vue-resource的請求API是按照REST風格設計的，它提供了7種請求API：

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

Options

Parameter	Type	Description
url	string	請求的UR
body	Object, FormData, string	request body
headers	Object	request header
params	Object	請求的URL參數(shù)對象
method	string	請求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
timeout	number	單位為毫秒的請求超時時間 (0 表示無超時時間)
before	function(request)	請求發(fā)送前的處理函數(shù)，類似于jQuery的beforeSend函數(shù)
progress	function(event)	ProgressEvent回調處理函數(shù)
credentials	boolean	表示跨域請求時是否需要使用憑證
emulateHTTP	boolean	發(fā)送PUT, PATCH, DELETE請求時以HTTP POST的方式發(fā)送，并設置請求頭的X-HTTP-Method-Override
emulateJSON	boolean	將request body以application/x-www-form-urlencoded content type發(fā)送

1. 向文本發(fā)出get請求

準備一個1.txt 的文本數(shù)據(jù)，時面的內容是：welcomet to vue!!!

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <script src="http://unpkg.com/vue/dist/vue.js"></script>
 <script src="http://files.cnblogs.com/files/zycbloger/vue-resource.min.js"></script>
 <script type="text/javascript">
  window.onload = function(){
   var vm = new Vue({
    el:'#box',
    data:{
     msg:'Hello World!',
    },
    methods:{
     get:function(){
      //發(fā)送get請求
      this.$http.get('1.txt').then(function(res){
       alert(res.body); 
      },function(){
       alert('請求失敗處理'); //失敗處理
      });
     }
    }
   });
  }
 </script>
</head>
<body> 
 <div id="box">
  <input type="button" @click="get()" value="按鈕">
 </div>
</body>
</html>

上面代碼實現(xiàn)了，點擊按鈕，就發(fā)送get請求，成功就會執(zhí)行彈窗 welcomet to vue!!!

2. 關于向后端請求，并帶參數(shù)的寫法

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <script src="http://unpkg.com/vue/dist/vue.js"></script>
 <script src="http://files.cnblogs.com/files/zycbloger/vue-resource.min.js"></script>
 <script type="text/javascript">
  window.onload = function(){
   var vm = new Vue({
    el:'#box',
    data:{
     msg:'Hello World!',
    },
    methods:{
     get:function(){
      //發(fā)送get請求
      this.$http.get('get.do',{a:1,b:2}).then(function(res){
       alert(res.body); 
      },function(){
       alert('請求失敗處理'); //失敗處理
      });
     },

     post:function(){
      //發(fā)送post請求
      this.$http.post('post.do',{a:1,b:2}).then(function(res){
       alert(res.body); 
      },function(){
       alert('請求失敗處理'); //失敗處理
      });
     }
    }
   });
  }
 </script>
</head>
<body> 
 <div id="box">
  <input type="button" @click="get()" value="按鈕get">
  <input type="button" @click="post()" value="按鈕post">
 </div>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: