Vue入门（11）axios请求拦截器实现数据加载出来之前loading效果

axios请求拦截器实现数据加载出来之前loading效果实现思路：用CSS3写出一个loading动画，默认隐藏。在请求拦截器里让动画显示出来，再在响应拦截器里隐藏动画。<!DOCTYPE html><html lang="en"><head><meta charset=&quo

徐扬_前端小白的成长之路

5653人浏览 · 2019-02-27 16:23:37

徐扬_前端小白的成长之路 · 2019-02-27 16:23:37 发布

axios请求拦截器实现数据加载出来之前loading效果

实现思路：用CSS3写出一个loading动画，默认隐藏。在请求拦截器里让动画显示出来，再在响应拦截器里隐藏动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/axios/dist/axios.js"></script>
    <style type="text/css">
    .box {
        width: 100%;
        padding: 3%;
        box-sizing: border-box;
        overflow: hidden
    }

    .box .loader {
        width: 30%;
        float: left;
        height: 200px;
        margin-right: 3%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center
    }

    @-webkit-keyframes loading-3 {
        50% {
            transform: scale(.4);
            opacity: .3
        }
        100% {
            transform: scale(1);
            opacity: 1
        }
    }

    .loading-3 {
        position: relative
    }

    .loading-3 i {
        display: block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #333;
        position: absolute
    }

    .loading-3 i:nth-child(1) {
        top: 25px;
        left: 0;
        -webkit-animation: loading-3 1s ease 0s infinite
    }

    .loading-3 i:nth-child(2) {
        top: 17px;
        left: 17px;
        -webkit-animation: loading-3 1s ease -.12s infinite
    }

    .loading-3 i:nth-child(3) {
        top: 0;
        left: 25px;
        -webkit-animation: loading-3 1s ease -.24s infinite
    }

    .loading-3 i:nth-child(4) {
        top: -17px;
        left: 17px;
        -webkit-animation: loading-3 1s ease -.36s infinite
    }

    .loading-3 i:nth-child(5) {
        top: -25px;
        left: 0;
        -webkit-animation: loading-3 1s ease -.48s infinite
    }

    .loading-3 i:nth-child(6) {
        top: -17px;
        left: -17px;
        -webkit-animation: loading-3 1s ease -.6s infinite
    }

    .loading-3 i:nth-child(7) {
        top: 0;
        left: -25px;
        -webkit-animation: loading-3 1s ease -.72s infinite
    }

    .loading-3 i:nth-child(8) {
        top: 17px;
        left: -17px;
        -webkit-animation: loading-3 1s ease -.84s infinite
    }

</style>
</head>
<body>
    <div id="app">
        <button @click="handler">按钮</button>
        <h1>这是请求回来的数据{{msg}}</h1>
        <div class="box" v-show="isShow">
            <div class="loader">
                <div class="loading-3">
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el : "#app",
            data(){
                return {
                    msg : "",
                    isShow : false
                }
            },
            methods : {
                handler(){
                    // 添加请求拦截器
                    axios.interceptors.request.use((config)=>{
                        // 在发送请求之前做些什么
                        console.log(config);
                        this.isShow = true
                        return config;
                    }, function (error) {
                        // 对请求错误做些什么
                        return Promise.reject(error);
                    });

                    // 添加响应拦截器
                    axios.interceptors.response.use((response)=> {
                        // 对响应数据做点什么
                        console.log(response);
                        this.isShow = false
                        return response;
                    }, function (error) {
                        // 对响应错误做点什么
                        return Promise.reject(error);
                    });


                    axios.get("xxx.com/1/report/index")
                    .then((res) => {
                        console.log(res.data);
                        this.msg = res.data[0].title
                    }).catch((err) => {
                        
                    });
                }
            }
        })
    </script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^