Vue.js——vue-resource用法和axios插件

最新推荐文章于 2024-01-22 15:55:53 发布

Sweet_HaoChen

最新推荐文章于 2024-01-22 15:55:53 发布

阅读量301

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/qq_38311097/article/details/82987120

版权

Vue学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

安装：cnpm install vue-resource --save

vue-resource就像jQuery里的$.ajax，用来和后端交互数据的。可以放在created或者ready里面运行来获取或者更新数据。

1.get

this.$http.get(url,[option]).then(successCallback, errorCallback)：

第一个参数url是请求的地址，第二个参数是option，参数写在params，header中也可以注入。then里面接受两个回调，成功的回调和失败的回调。

                get:function(){
                    this.$http.get("package1.json",{
                        params:{
                            userId:"101"
                        },
                        headers:{
                            token:"abcd"
                        }
                    }).then(res=>{
                        this.msg = res.data;
                    },error=>{
                        this.msg = error;
                    })
                },

2.post

post请求稍有不同，第一个参数是requstBody，还有一个参数是option,即：

this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

                post:function(){
                    this.$http.post("package.json",{
                        userId:"102"
                    },{
                        headers:{
                            access_token:"abc"
                        }
                    }).then(function(){
                        this.msg = res.data;
                    },error=>{
                        this.msg = error;
                    })
                }

3.全局拦截器

this.$http.get也相当于vue.http.get

Vue.http.interceptors.push(function(req,next)可以设置一个全局的拦截器，其中在拦截器中，next表示请求结束相应结束之后的回调。我们可以利用拦截器，拦截请求前和请求后，进行相应的处理，可以对一些错误进行处理。

             mounted:function(){
                //next表示请求结束相应结束之后的回调
                //拦截请求前和请求后，进行相应的处理,
                Vue.http.interceptors.push(function(req,next){
                    console.log('请求初始化');
                    next(function(res){
                        console.log("相应完成");
                        return res;
                    });
                })
            },

也允许使用设置http来设置全局路径：


            http:{
                //全局路径的设置
                root:"file:///E:/webProject/Demo7/"
            },

并且，也可以在methods中直接设置http函数进行配置：

                http:function(){
                    this.$http({
                        url:"package.json",
                        params:{
                            userId:"103"
                        },
                        headers:{
                            token:"123"
                        },
                        timeout:5,
                        before:function(){
                            console.log("before init");
                        }
                    }).then(function(){
                        this.msg = res.data;
                    },error=>{
                        this.msg = error;
                    });
                }

Axios插件的应用

1.get请求：

                get:function(){
                    axios.get("package.json",{
                        params:{
                            userId:"999"
                        },headers:{
                            token:"jack"
                        }
                    }).then(res=>{
                        this.msg = res.data;
                        console.log("这是利用axios获得的");
                    }).catch(function(error){
                        console.log("出错了");
                    })
                }

2.post请求：

                post:function(){
                    axios.post("package.json",{
                        userId:"888"
                    },{
                        headers:{
                            token:"tom"
                        }
                    }).then(res=>{
                        this.msg = res.data;
                    })
                },

3.http配置

                http:function(){
                    axios({
                        url:"package.json",
                        method:"get",
                        data:{
                            userId:"101"
                        },
                        headers:{
                            token:"http-test"
                        }
                    }).then(res=>{
                        this.msg = res.data;
                    })
                }

拦截器拦截：

            mounted:function(){
                //拦截用户所有的请求
                axios.interceptors.request.use(function(config){
                    console.log("request init.");
                    return config;
                });
                //拦截响应
                axios.interceptors.response.use(function(response){
                    console.log("response init.");
                    return response;
                })
            },