Vue-resource三種請求格式和萬能測試地址
阿新 • • 發佈：2018-12-11
注意：
1.前端伺服器測試地址的萬能地址，太好用了http://jsonplaceholder.typicode.com/users，基本能響應各種請求。
2.這裡測試只寫了成功的回撥函式，同時還要失敗時的回撥函式。
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的，要後匯入--> </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請求，通過function執行的成功的回撥函式，得到body和data等資料 postInfo(){ this.$http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(result=>{ console.log(result.body); }) }, //post請求，中間花括號空的部分為提交給伺服器的資料這裡預設，emulateJSON:true,將手動提交表單格式設定為application/x-www-form-urlencoded格式 jsonpInfo(){ this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(result=>{ console.log(result.body) }) } } }); </script> </body>
效果：依次點選按鈕得到的結果
