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

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

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

1. 之前的學習中，如何發起數據請求？
2. 常見的數據請求類型？ get post jsonp
3. 測試的URL請求資源地址：

• get請求地址： http://vue.studyit.io/api/getlunbo
• post請求地址：http://vue.studyit.io/api/post
• jsonp請求地址：http://vue.studyit.io/api/jsonp

1. 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 的腳本文件；

1. 發送get請求：

   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);
   });
   }

配置本地數據庫和數據接口API