vue–vue-resource實現 get, post, jsonp請求
- 2019 年 12 月 16 日
- 筆記
vue-resource 實現 get, post, jsonp請求
除了 vue-resource 之外，還可以使用 axios 的第三方包實現實現數據的請求
- 之前的學習中，如何發起數據請求？
- 常見的數據請求類型？ get post jsonp
- 測試的URL請求資源地址：
- get請求地址： http://vue.studyit.io/api/getlunbo
- post請求地址：http://vue.studyit.io/api/post
- jsonp請求地址：http://vue.studyit.io/api/jsonp
- JSONP的實現原理
- 由於瀏覽器的安全性限制，不允許AJAX訪問 協議不同、域名不同、埠號不同的 數據介面，瀏覽器認為這種訪問不安全；
- 可以通過動態創建script標籤的形式，把script標籤的src屬性，指向數據介面的地址，因為script標籤不存在跨域限制，這種數據獲取方式，稱作JSONP（注意：根據JSONP的實現原理，知曉，JSONP只支援Get請求）；
- 具體實現過程：
- 先在客戶端定義一個回調方法，預定義對數據的操作；
- 再把這個回調方法的名稱，通過URL傳參的形式，提交到伺服器的數據介面；
- 伺服器數據介面組織好要發送給客戶端的數據，再拿著客戶端傳遞過來的回調方法名稱，拼接出一個調用這個方法的字元串，發送給客戶端去解析執行；
- 客戶端拿到伺服器返回的字元串之後，當作Script腳本去解析執行，這樣就能夠拿到JSONP的數據了；
- 帶大家通過 Node.js ，來手動實現一個JSONP的請求例子；
const http = require('http'); // 導入解析 URL 地址的核心模組 const urlModule = require('url'); const server = http.createServer(); // 監聽 伺服器的 request 請求事件，處理每個請求 server.on('request', (req, res) => { const url = req.url; // 解析客戶端請求的URL地址 var info = urlModule.parse(url, true); // 如果請求的 URL 地址是 /getjsonp ，則表示要獲取JSONP類型的數據 if (info.pathname === '/getjsonp') { // 獲取客戶端指定的回調函數的名稱 var cbName = info.query.callback; // 手動拼接要返回給客戶端的數據對象 var data = { name: 'zs', age: 22, gender: '男', hobby: ['吃飯', '睡覺', '運動'] } // 拼接出一個方法的調用，在調用這個方法的時候，把要發送給客戶端的數據，序列化為字元串，作為參數傳遞給這個調用的方法： var result = `${cbName}(${JSON.stringify(data)})`; // 將拼接好的方法的調用，返回給客戶端去解析執行 res.end(result); } else { res.end('404'); } }); server.listen(3000, () => { console.log('server running at http://127.0.0.1:3000'); });
- vue-resource 的配置步驟：
- 直接在頁面中，通過
script標籤，引入vue-resource的腳本文件； - 注意：引用的先後順序是：先引用
Vue的腳本文件，再引用vue-resource的腳本文件；
- 發送get請求：
getInfo() { // get 方式獲取數據 this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => { console.log(res.body); }) }
- 發送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); }); }
- 發送JSONP請求獲取數據：
jsonpInfo() { // JSONP形式從伺服器獲取數據 var url = 'http://127.0.0.1:8899/api/jsonp'; this.$http.jsonp(url).then(res => { console.log(res.body); }); }
