interceptors 请求拦截器

需求：发送请求前拦截，显示加载页面，响应结束后隐藏加载页面。

一、定义加载页面，在该界面添加一个控制显示与隐藏的命令 v-show。

<div>
　　<div class="spinner" v-show='isShow'>
　　　　<div class="rect1"></div>
　　　　<div class="rect2"></div>
　　　　<div class="rect3"></div>
　　　　<div class="rect4"></div>
　　　　<div class="rect5"></div>
　　</div>
　　<button @click='sendAjax'>发请求</button>
</div>

二、在 sendAjax 方法中实现一个 cookie 的机制。

1、添加请求拦截器 interceptors.request 。

// 添加请求拦截器
this.$axios.interceptors.request.use((config)=>{
// 在发送请求之前做什么
var token = localStorage.getItem('token');
if(token){
　　// 配置对象设置响应头
　　config.headers['token'] = token;
}
this.isShow = true;
return config;
},function(error){
　　// 对请求错误做些什么
　　return Promise.reject(error);
});

2、添加响应拦截器 interceptors.response 。

// 添加响应拦截器
this.$axios.interceptors.response.use((response)=>{
// 对响应数据做点什么
console.log("这是响应"+response.data.token);
if(response.data.token){
　　localStorage.setItem('token', response.data.token);
}
// 响应结束
this.isShow = false;
return response;
},(error)=>{
　　// 对响应错误做点什么
　　return Promise.reject(error);
});

3、发送请求。

this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/';
this.$axios.get('')
.then(res=>{
　　console.log(res);
})
.catch(err=>{
　　console.log(err);
})

 

完整代码如下：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .spinner {
        margin: 100px auto;
        width: 50px;
        height: 60px;
        text-align: center;
        font-size: 10px;
    }
    .spinner>div {
        background-color: #67CF22;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
        animation: stretchdelay 1.2s infinite ease-in-out;
    }
    .spinner .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }
    .spinner .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }
    .spinner .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }
    .spinner .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }
    @-webkit-keyframes stretchdelay {
        0%,
        40%,
        100% {
            -webkit-transform: scaleY(0.4)
        }
        20% {
            -webkit-transform: scaleY(1.0)
        }
    }
    @keyframes stretchdelay {
        0%,
        40%,
        100% {
            transform: scaleY(0.4);
            -webkit-transform: scaleY(0.4);
        }
        20% {
            transform: scaleY(1.0);
            -webkit-transform: scaleY(1.0);
        }
    }
    </style>
</head>
<body>
    <div id="app">
    </div>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript" src="node_modules/axios/dist/axios.js"></script>
    <script type="text/javascript">
        var App = {
            data(){
                return{
                    isShow:false
                }
            },
            template:` 
                <div>
                    <div class="spinner" v-show='isShow'>
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div>
                    <button @click='sendAjax'>发请求</button>
                </div>
            `,
            methods:{
                sendAjax(){
                    // 实现一个类似cookie的机制
                    // 添加请求拦截器
                    this.$axios.interceptors.request.use((config)=>{
                        // 在发送请求之前做什么
                        var token = localStorage.getItem('token');
                        if(token){
                            // 配置对象设置响应头
                            config.headers['token'] = token;
                        }
                        this.isShow = true;
                        return config;
                    },function(error){
                        // 对请求错误做些什么
                        return Promise.reject(error);
                    });
                    // 添加响应拦截器
                    this.$axios.interceptors.response.use((response)=>{
                        // 对响应数据做点什么
                        console.log("这是响应"+response.data.token);
                        if(response.data.token){
                            localStorage.setItem('token', response.data.token);
                        }
                        // 响应结束
                        this.isShow = false;
                        return response;
                    },(error)=>{
                        // 对响应错误做点什么
                        return Promise.reject(error);
                    });
                    this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/';
                    this.$axios.get('')
                    .then(res=>{
                        console.log(res);
                    })
                    .catch(err=>{
                        console.log(err);
                    })
                }
            }
        }
        // 将axios挂载到Vue对象上
        Vue.prototype.$axios = axios
        new Vue({
            el:'#app',
            template:` 
                <App/>
            `,
            components:{
                App
            }
        });
    </script>
</body>
</html>

 

posted @ 2022-11-20 22:47  炒股沦为首负  阅读(280)  评论(0)  编辑  收藏  举报