[Vue] : vue-resource 實現 get, post, jsonp請求

vue-resource 實現 get, post, jsonp請求

常見的數據請求類型：get，post，jsonp

除了vue-resource之外，還可以使用axios的第三方包實現實現數據的請求

vue-resource官方文檔

vue-resource 的配置步驟：

• 直接在頁面中，通過script標簽，引入 vue-resource 的腳本文件；

<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-resource-1.3.4.js"></script>

• 注意：引用的先后順序是：先引用 Vue 的腳本文件，再引用 vue-resource 的腳本文件；

1. 發送get請求：
   • 當發起get請求之后， 通過.then來設置成功的回調函數

getInfo() { // get 方式獲取數據
  this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
    console.log(res.body);
  })
}

2. 發送post請求：

postInfo() {
  var url = 'http://127.0.0.1:8899/api/post';
  // post 方法接收三個參數：
  // 參數1： 要請求的URL地址
  // 參數2： 要發送的數據對象
  // 參數3： 指定post提交的編碼類型為 application/x-www-form-urlencoded
  this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
    console.log(res.body);
  });
}

3. 發送JSONP請求獲取數據：

jsonpInfo() { // JSONP形式從服務器獲取數據
  var url = 'http://127.0.0.1:8899/api/jsonp';
  this.$http.jsonp(url).then(res => {
    console.log(res.body);
  });
}

可以通過全局配置，設置BaseURL等參數，例如：

Vue.http.options.root = 'http://vue.studyit.io/'
// 全局啟用 emulateJSON 選項
Vue.http.options.emulateJSON = true

注意：如果我們通過全局配置了，請求的數據接口根域名，則在每次單獨發起 http 請求的時候，請求的 url 路徑，應該以相對路徑開頭，前面不能帶/，否則不會啟用根路徑做拼接。