1.官方提供的vue 插件【vue-resource】

1. 需要安装vue-resource模块，注意需要加上 --save

npm install vue-resource --save  // cnpm install  vue-resource --save 

2.main.js 引入 vue-resource

import VueResource from 'vue-resource';  //'vue-resource'名字必须和引入的npm 的一致


vue.use(VueResource)

3. 在组件里面直接使用

this.$http.get('api地址').then(function(response){

    conslog.log(response);

},function(err){

    conslog.log(err);

})

 ===>使用vue-resource来实现跨域

//在home.vue

<script>

export default {
    
    data(){

        return{

            list:[]
   
        }

    },

    methods:{
        
        getData(){
            
            var url = "http://157.122.54.189:9093/jsonp";
        
            /在vue-resources中会自动在路径上加入callback的函数名，得到的结果就是result
            this.$http.jsonp(url).then((result)=>{
            
                var res = JSON.parse(JSON.parse(result.body));
          
                console.log(res.message);

            });
        }

    },
    mounted:function(){
        
        this.getData();
    
    };


}



</script>

2.axios 使用

npm地址：https://www.npmjs.com/package/axios

A.安装 npm install axios --save  //cnpm install axios --save

B.哪里用哪里引入 axios  【import Axios from ‘axios’】  注意返回为promise 形式   返回中最好使用箭头函数避免this指向问题

//在home.vue

<script>
 import Axios from 'axios';


export default {
    
    data(){

        return{

            list:[]
   
        }

    },
    methods:{
        
        getData(){
            
          // Make a request for a user with a given ID
            axios.get('/user?ID=12345')
                .then((response)=> {
                    console.log(response);
             })
                .catch((error)=> {
                    console.log(error);
              });
 

          // Optionally the request above could also be done as
            axios.get('/user', {
                params: {
                  ID: 12345
                }
              })
              .then((response)=> {
                    console.log(response);
              })
              .catch((error)=> {
                   console.log(error);
              });

        }

    },
    mounted:function(){
        
        this.getData();
    
    };


}



</script>

===>使用axios发送post或get请求细节处理

<script>

    //细节处理一：可以给axios的ajax请求设置统一的主机和端口号
     axios.defaults.baseURL = "http://157.122.54.189:9093/";

    //细节处理二: 可以将axios这个对象添加到Vue的原型对象中，将来在使用的时候就只需要使用this.对象名就可以了        
     Vue.prototype.$http = axios;


    //get 方式获取 url="api?id='1'" this.$http.get(url).then((res)=>{}).catch((err)=>{})
   
    //get 方式获取 url="api" this.$http.get(url,{id=1}).then((res)=>{}).catch((err)=>{})

    //post 方式获取 url="api" this.$http.post(url,{id=1}).then((res)=>{}).catch((err)=>{})

    export defult{
            data(){
                   return {
                        list:[]
                    }
            },
            methods:{
                getApiData:function() {
                    //设置请求路径
                    var url  = "api/getprodlist";  
                    
                    // 发送请求:将数据返回到一个回到函数中 
                    _this= this;

                    // 并且响应成功以后会执行then方法中的回调函数
                    this.$http.get(url).then((result)=> {
    
                        // result是所有的返回回来的数据
                        // 包括了响应报文行
                        // 响应报文头
                        // 响应报文体

                         _this.name = result.data.message[0].name;

                     }).catch(()=>{

                         alert("出错了");

                    });   
                }
        
            },
            mounted:function(){
        
                this.getApiData();
        
            };
        }

</script>

3.fetch-jsonp使用

npm地址：https://www.npmjs.com/package/fetch-jsonp

A.安装 npm install fetch-jsonp --save  //cnpm install fetch-jsonp --save

npm install fetch-jsonp

Promise Polyfill for IE

IE8/9/10/11 does not support ES6 Promise, run this to polyfill the global environment at the beginning of your application.

require('es6-promise').polyfill();

JSONP only supports GET method, same as fetch-jsonp.

fetchJsonp('/users.jsonp')
  
 .then(function(response) {
  
      return response.json()
 
 }).then(function(json) {
   
     console.log('parsed json', json)
 
 }).catch(function(ex) {
   
     console.log('parsing failed', ex)
 
 })

Set JSONP callback parameter name, default is 'callback'

fetchJsonp('/users.jsonp', {
    jsonpCallback: 'custom_callback',
  })
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })

.... 更多看npm fetch-jsonp 官方文档