Vue\axios与后台交互时的拦截器--0921

与后台交互时的拦截器（request\response）
注意：
1、axios response return 
 axios.interceptors.response.use(function (val) {
 let myDate=new Date(); 
  console.log(myDate.getMinutes()+":"+ myDate.getSeconds()+":" +myDate.getMilliseconds() + ":成功：response被拦截了.1"); 
  console.log("成功：response被拦截了.2。。。" ); 
return val;  //此处不可改写为：val+"--ok"。总之，切不可连接其它字符串。
 }


----------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试axios get post方法\与后台交互时的拦截器</title>
</head>
<body>
   <div id="divLogin">
       <fieldset>
           <legend>用户登录</legend>

           <label>用户名：</label>
           <input type="text" v-model="currentLoginUser.userName"><br>
           <label>密  码：</label>
           <input type="password" v-model="currentLoginUser.password"><br>
           <button @click="userLogin()">登录get方法</button>
           <button @click="userLoginPost()">登录post方法</button><br>

           <label>登录信息：{{loginMsg}}</label>

       </fieldset>


   </div>



</body>

<!--<script src="js/vue.js"></script>-->
<!--<script src="js/axios.min.js"></script>-->
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>


<script>

    var divLoginData = {
        currentLoginUser:{userName:"",password:""},
        getUrl:"http://localhost:8080/Servlet/LoginServlet",
        loginMsg:"",
    };


    var vm1= new Vue({
        el:"#divLogin",
        data:divLoginData,
        methods:{
              userLogin(){
                 console.log("user:"+ this.currentLoginUser.userName) ;
                 console.log("pass:"+ this.currentLoginUser.password) ;


                 axios.get(this.getUrl,
                     {params:{name:this.currentLoginUser.userName,pass:this.currentLoginUser.password,guestFlag:"jsp"}}
                 ).then(
                      res=>{
                          this.loginMsg = res.data;
                      }
                 ).catch(
                      err=>{
                          this.loginMsg = err.status;
                      }
                 )
              },

            //实用常用方法
            userLoginPost(){
                console.log("user:"+ this.currentLoginUser.userName) ;
                console.log("pass:"+ this.currentLoginUser.password) ;


                let params = new URLSearchParams();
                params.append('name', this.currentLoginUser.userName);
                params.append('pass', this.currentLoginUser.password);
                params.append('guestFlag', 'jsp');


                axios.post(this.getUrl,
                     params,
                    {headers:{ 'Content-Type': 'application/x-www-form-urlencoded'}}
                ).then(
                    res=>{
                        this.loginMsg = res.data;
                        console.log(res.state);
                    }
                ).catch(
                    err=>{
                        this.loginMsg = err.state;
                    }
                )
            },


            getCureentTime:function(){
                let myDate = new Date();

                let mm = myDate.getMinutes();
                if  (mm.length<2){
                    mm = "0"+mm;
                }

                let ss = myDate.getSeconds();
                if  (ss.length<2){
                    ss = "0"+ss;
                }

                let hm= myDate.getMilliseconds()+1000;
                hm = ""+hm;
                zzz = hm.substr(1,3);

                return myDate.getHours()+":" + mm +":"+ ss +"."+ zzz;
            }


        },

        mounted:function () {
                console.log("mounted:"+ this.getCureentTime());
                let mytime = this.getCureentTime();

                axios.interceptors.request.use(function (config) {
                        console.log("成功：request被拦截了.1");
                        console.log("成功：request被拦截了.2。。。" + mytime );
                        return config;
                    },function (error) {
                        console.log("request执行错误！");
                        return Promise.reject(error);
                    }
                );

                //  mytime = this.getCureentTime();
                // console.log( mytime+":czh:will mounted response...");


                axios.interceptors.response.use(function (val) {
                        let myDate=new Date();

                        console.log(myDate.getMinutes()+":"+ myDate.getSeconds()+":" +myDate.getMilliseconds()
                            + ":成功：response被拦截了.1");
                        console.log("成功：response被拦截了.2。。。"   );
                        return val;
                    },function (error) {
                        console.log("response888 执行错误！");
                        console.log(error);
                        return Promise.reject(error);
                    }
                );

     



        }








    })



</script>
</html>
Vue\axios与后台交互时的拦截器--0921

猜你喜欢
