程式碼格式很簡單：如下

導包

注意：vue-resource依賴於vue，要先導vue

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

    <script>
        var vm=new Vue({
            el:'#app',
            data:{},
            methods:{
                getInfo
 
(){//發起get請求
                    this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result){
                        console.log(result.body)
                    },function () {
                        console.log('請求失敗')
                    })
                },
                postInfo()
 
{//發起post請求
                     //  手動發起的 Post 請求，預設沒有表單格式，所以，有的伺服器處理不了
                     //  通過 post 方法的第三個引數， { emulateJSON: true } 設定 提交的內容型別 為 普通表單資料格式
                    this.$http.post('http://vue.studyit.io/api/post',{},{emulateJSON:true}).then(result=>{
                        console.log(result.
 
body)
                    })
                },
                jsonpInfo(){
                    this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result=>{
                        console.log(result.body)
                    })
                }
            }
        });
    </script>

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