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

一、定义加载页面，在该界面添加一个控制显示与隐藏的命令 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>

 

原文地址：http://www.cnblogs.com/sfwu/p/16909956.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性