vue中请求的几种方式

一个不错的项目

https://blog.csdn.net/wdlhao/article/details/79079660



vue  jsonp

https://www.cnblogs.com/rapale/p/7839203.html



一.万能的Jquery (在存在跨域的情况下,目前用Jquery来请求)

$.ajax({

                url:'http://aa.bbbb.cn',      //请求接口

                type: "POST",                   //请求方式(跨域的话默认get提交,)

                data: this.param,              //请求参数

                async:true,                       //是否异步

                dataType: 'jsonp',              // 返回数据类型

                beforeSend: function(xhr,settings) {

                }

            }).then(function(data) {

                console.log(data)

                }

            });


二.vue-resource 

1,安装——npm install vue-resource

2.应用:   this.$http.get('url',{

        param1:value1, 

        param2:value2 

    }).then(function(response){ 

        // response.data中获取ResponseData实体   

 },function(response){ 

        // 发生错误    

        console.log(response)

});

this.$http.post('url',{

        param1:value1, 

        param2:value2 

    },{ 

        emulateJSON:true 

    }).then(function(response){ 

        // response.data中获取ResponseData实体    

},function(response){ 

        // 发生错误    

});


this.$jsonp('url', data ).then(json => {

                json 就是返回数据

                if(json.code != "002"){

                    alert(json.msg);

                }else{


                }

            }).catch(err => {

              console.log(err)

            })

三.、axios 

1.使用npm install来进行安装。 使用npm install来进行安装。

2.在准备使用的vue页面中,引入Axios,  import axios from 'axios'

//读取分类商品列表    created钩子函数中

   GET:   axios.get('http://jspang.com/DemoApi/typeGoods.php',{   })

      .then(response=>{

        console.log(response);

      })

      .catch(error=>{

          console.log(error);

          alert('网络错误,不能访问');

      })

POST:  axios.post('/user', {     //默认json

        firstName: 'Fred',

        lastName: 'Flintstone'    })

.then(function(response){      

  // response.data中获取ResponseData实体    

})

.catch(function(error){   

     // 发生错误   

 });

你可能感兴趣的:(vue中请求的几种方式)