vue-resource 實現 get, post, jsonp請求 --Y.
阿新 • • 發佈:2019-01-31
除了 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');
});
1.vue-resource 的配置步驟:
- 直接在頁面中,通過script標籤,引入 vue-resource 的指令碼檔案;
- 注意:引用的先後順序是:先引用 Vue 的指令碼檔案,再引用 vue-resource 的指令碼檔案;
2.傳送get請求:
getInfo() { // get 方式獲取資料
this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
console.log(res.body);
})
}
3.傳送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);
});
}
4.傳送JSONP請求獲取資料:
jsonpInfo() { // JSONP形式從伺服器獲取資料
var url = 'http://127.0.0.1:8899/api/jsonp';
this.$http.jsonp(url).then(res => {
console.log(res.body);
});
}