Axios HTTP 请求库详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43830188/article/details/90200924

Axios

Axios是基于Promise的HTTP请求，可以用在浏览器和node.js中。

Features
1.从浏览器中创建XMLHttpRequests
2.从node.js中创建http请求
3.支持Promise API
4.拦截请求和相应
5.转换请求数据和响应数据
6.取消请求
7.自动转换JSON数据
8.客户端支持防御XSRF

Axios官方API

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。
简单一个案例，实现在请求数据前，出现loading的动画，在子响应数据之后，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>
    <style lang="">
        .loading {
            width: 80px;
            height: 40px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .loading span {
            display: inline-block;
            width: 8px;
            height: 100%;
            border-radius: 4px;
            background: lightgreen;
            -webkit-animation: load 1s ease infinite;
        }

        @-webkit-keyframes load {

            0%,
            100% {
                height: 40px;
                background: lightgreen;
            }

            50% {
                height: 70px;
                margin: -15px 0;
                background: lightblue;
            }
        }

        .loading span:nth-child(2) {
            -webkit-animation-delay: 0.2s;
        }

        .loading span:nth-child(3) {
            -webkit-animation-delay: 0.4s;
        }

        .loading span:nth-child(4) {
            -webkit-animation-delay: 0.6s;
        }

        .loading span:nth-child(5) {
            -webkit-animation-delay: 0.8s;
        }
    </style>
</head>

<body>
    <div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var App = {
        data() {
            return {
                isShow:false
            }
        },
        template: `<div>
                <div class="loading" v-show="isShow">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                    <button @click="sendAjax">发请求</button>
                </div>`,
        methods: {
            sendAjax() {
                // 添加请求拦截器
                // 简单做配置
                this.$axios.interceptors.request.use(config => {
                    // 请求之前做的内容
                    console.log(config);
                    this.isShow = true;
                    return config;
                }, function (err) {
                    return Promise.reject(err);
                });
                // 添加响应拦截器
                this.$axios.interceptors.response.use(response => {
                    // console.log(response);
                    // 响应之后做的内容
                    this.isShow = false;
                    return response;
                }, function (err) {
                    return Promise.reject(err)
                });

                this.$axios.get(url') //请求数据的url
                    .then(res => {
                        // console.log(res)
                    })
                    .catch(err => {
                        // console.log(res);
                    })
            }
        },
    }

    Vue.prototype.$axios = axios;

    new Vue({
        el: "#app",
        components: {
            App
        },
        template: `<App />`
    })
</script>

</html>