Vue中resource請(qǐng)求格式和萬(wàn)能測(cè)試地址的示例分析

發(fā)布時(shí)間：2021-08-12 10:20:48 來(lái)源：億速云閱讀：115 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了Vue中resource請(qǐng)求格式和萬(wàn)能測(cè)試地址的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

注意：

1.前端服務(wù)器測(cè)試地址的萬(wàn)能地址，太好用了http://jsonplaceholder.typicode.com/users，基本能響應(yīng)各種請(qǐng)求。點(diǎn)擊進(jìn)入官網(wǎng)

2.這里測(cè)試只寫(xiě)了成功的回調(diào)函數(shù)，同時(shí)還要失敗時(shí)的回調(diào)函數(shù)。

HTML代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../lib/vue.js"></script>
 <script src="../lib/vue-resource.js"></script>
 <!--vue-resource是基于vue.js的，要后導(dǎo)入-->
</head>
<body>
  <div id="app">
   <input type="button" value="get方式" v-on:click="getInfo">
   <input type="button" value="post方式" v-on:click="postInfo">
   <input type="button" value="jsonp方式" v-on:click="jsonpInfo">
  </div>
  <script>
   var vm = new Vue({
    el:'#app',
    data:{}, 
    methods:{
     getInfo(){
     this.$http.get('http://jsonplaceholder.typicode.com/users').then(result=> {
      console.log(result.body);
     }) 
     },
     //get請(qǐng)求，通過(guò)function執(zhí)行的成功的回調(diào)函數(shù)，得到body和data等數(shù)據(jù) 
     postInfo(){
      this.$http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(result=>{
       console.log(result.body);
      })
     },
     //post請(qǐng)求，中間花括號(hào)空的部分為提交給服務(wù)器的數(shù)據(jù)這里默認(rèn)，emulateJSON:true,將手動(dòng)提交表單格式設(shè)置為application/x-www-form-urlencoded格式
     jsonpInfo(){
      this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(result=>{
       console.log(result.body)
      })
     }
    } 
   });
  </script>
</body>

效果：依次點(diǎn)擊按鈕得到的結(jié)果

Vue中resource請(qǐng)求格式和萬(wàn)能測(cè)試地址的示例分析

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue中resource請(qǐng)求格式和萬(wàn)能測(cè)試地址的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

Vue中resource請(qǐng)求格式和萬(wàn)能測(cè)試地址的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽