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

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

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

基本語法

必須引入一個(gè)庫：vue-resource github地址

// 基于全局Vue對象使用http 
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一個(gè)Vue實(shí)例內(nèi)使用$http 
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

vue-resource的請求API是按照REST風(fēng)格設(shè)計(jì)的，它提供了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	單位為毫秒的請求超時(shí)時(shí)間 (0 表示無超時(shí)時(shí)間)
before	function(request)	請求發(fā)送前的處理函數(shù)，類似于jQuery的beforeSend函數(shù)
progress	function(event)	ProgressEvent回調(diào)處理函數(shù)
credentials	boolean	表示跨域請求時(shí)是否需要使用憑證
emulateHTTP	boolean	發(fā)送PUT, PATCH, DELETE請求時(shí)以HTTP POST的方式發(fā)送，并設(shè)置請求頭的X-HTTP-Method-Override
emulateJSON	boolean	將request body以application/x-www-form-urlencoded content type發(fā)送

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

準(zhǔn)備一個(gè)1.txt 的文本數(shù)據(jù)，時(shí)面的內(nèi)容是：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>

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

2. 關(guān)于向后端請求，并帶參數(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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: