快捷導(dǎo)航

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

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

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

基本語(yǔ)法

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

// 基于全局Vue對(duì)象使用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的請(qǐng)求API是按照REST風(fēng)格設(shè)計(jì)的，它提供了7種請(qǐng)求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	請(qǐng)求的UR
body	Object, FormData, string	request body
headers	Object	request header
params	Object	請(qǐng)求的URL參數(shù)對(duì)象
method	string	請(qǐng)求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
timeout	number	單位為毫秒的請(qǐng)求超時(shí)時(shí)間 (0 表示無(wú)超時(shí)時(shí)間)
before	function(request)	請(qǐng)求發(fā)送前的處理函數(shù)，類(lèi)似于jQuery的beforeSend函數(shù)
progress	function(event)	ProgressEvent回調(diào)處理函數(shù)
credentials	boolean	表示跨域請(qǐng)求時(shí)是否需要使用憑證
emulateHTTP	boolean	發(fā)送PUT, PATCH, DELETE請(qǐng)求時(shí)以HTTP POST的方式發(fā)送，并設(shè)置請(qǐng)求頭的X-HTTP-Method-Override
emulateJSON	boolean	將request body以application/x-www-form-urlencoded content type發(fā)送

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

準(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請(qǐng)求
      this.$http.get('1.txt').then(function(res){
       alert(res.body); 
      },function(){
       alert('請(qǐng)求失敗處理'); //失敗處理
      });
     }
    }
   });
  }
 </script>
</head>
<body> 
 <div id="box">
  <input type="button" @click="get()" value="按鈕">
 </div>
</body>
</html>

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

2. 關(guān)于向后端請(qǐng)求，并帶參數(shù)的寫(xiě)法

<!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請(qǐng)求
      this.$http.get('get.do',{a:1,b:2}).then(function(res){
       alert(res.body); 
      },function(){
       alert('請(qǐng)求失敗處理'); //失敗處理
      });
     },

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

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

您可能感興趣的文章: