Vue axios请求拦截器和响应拦截器

最新推荐文章于 2024-09-18 22:03:31 发布

2B青年弹棉花

最新推荐文章于 2024-09-18 22:03:31 发布

阅读量591

点赞数

分类专栏： Vue学习文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42158198/article/details/104869873

版权

Vue学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue/dist/vue.min.js"></script>
    <script type="text/javascript" src="../vue-router/dist/vue-router.min.js"></script>
    <script type="text/javascript" src="../vue-axios/node_modules/axios/dist/axios.min.js"></script>
    <style type="text/css">
        .demo1 {
            width: 4px;
            height: 4px;
            border-radius: 2px;
            background: #68b2ce;
            float: left;
            margin: 0 3px;
            animation: demo1 linear 1s infinite;
            -webkit-animation: demo1 linear 1s infinite;
        }
        .demo1:nth-child(1){
            animation-delay:0s;
        }
        .demo1:nth-child(2){
            animation-delay:0.15s;
        }
        .demo1:nth-child(3){
            animation-delay:0.3s;
        }
        .demo1:nth-child(4){
            animation-delay:0.45s;
        }
        .demo1:nth-child(5){
            animation-delay:0.6s;
        }
        @keyframes demo1
        {
            0%,60%,100% {transform: scale(1);}
            30% {transform: scale(2.5);}
        }
        @-webkit-keyframes demo1
        {
            0%,60%,100% {transform: scale(1);}
            30% {transform: scale(2.5);}
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script type="text/javascript">
        Vue.use(VueRouter);
        Vue.prototype.$axios = axios;
        var List = {
            data(){
                return {
                    data:'列表页面'
                }
            },
            template:`
                <div>
                    <span>列表页</span>
                </div>
            `
        }
        var Home = {
          data(){
              return{
                  token:'',
                  isShow:false
              }
          },
          template:`
            <div>
                <div id="loading1" v-show="isShow">
                    <div class="demo1"></div>
                    <div class="demo1"></div>
                    <div class="demo1"></div>
                    <div class="demo1"></div>
                    <div class="demo1"></div>
                </div>
                <h1 v-show="!isShow">Token:{{token}}</h1>
                <button type="button" @click="getToken">获取Token</button>
            </div>
          `,
          methods:{
              getToken(){
                  //请求拦截器
                  this.$axios.interceptors.request.use((config)=>{
                      this.isShow = true;
                      return config;
                  },function (err) {
                      return Promise.reject(err);
                  });
                  //响应拦截器
                  this.$axios.interceptors.response.use((response)=>{
                    this.isShow = false;
                    return response;
                  },function(err){
                      return Promise.reject(err);
                  });
                  this.$axios.get('http://localhost:3000/posts')
                  .then(res=>{
                    console.log(res);
                    this.token = res.data[0]["title"];
                  })
                  .catch(err=>{
                    console.log(err);
                  });
              }
          }
        };
        var router = new VueRouter({
            routes:[
                {
                    path:'/',
                    redirect:'home'
                },
                {
                    path:'/home',
                    name:'home',
                    component:Home
                },
                {
                    path:'/list',
                    name:'list',
                    component:List
                }
            ]
        });
        var App = {
            template: `
                <div>
                    <router-link to="/">首页</router-link>
                    <router-link :to="{name:'list'}">列表</router-link>
                    <router-view></router-view>
                </div>
            `
        };

        new Vue({
            el:'#app',
            components:{
                App:App
            },
            router:router,
            template:`<App />`
        });
    </script>
</html>