vue中的倒计时跳转页面问题和axios网络请求this作用域问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LJFPHP/article/details/81906254

一、前言

      这两个是在日常开发中碰到的问题，网上都能查得到答案，但是我怕自己会忘记，姑且记录一下用作笔记吧。

二、vue倒计时跳转问题

1、案例

比如我们在一次网络请求结束之后，如果返回结果是成功，则倒计时1.5秒跳转页面。

2、碰到的问题

      在页面跳转之后，我们再回到原来的页面，发现跳转还在继续。比如我们是从A页面倒计时1s之后跳转到B页面。这个时候我们再从B页面回到A页面，我们会发现页面在1s之后又会跳转到B。

解决方案链接：
(javascript)使用Vuejs + Vue-router 开发单页面，如何使得切换页面时能销毁原组件？
vue单页应用中，使用setInterval()定时向服务器获取数据，后来跳转页面后，发现还在不停的获取数据。

3、我自己的代码

 axios
          .post("test",addData)
          .then(function (response) {
            if (response.data.status_code == 200) {
              it.$Message.info('新增提现地址成功');
              //这部分是倒计时代码
              it.intervalid2 =  window.setInterval(() => {
                it.$router.push('/assets/withdraw');//倒计时1.5s自动跳转页面
              }, 1500);
            }else{
              it.$Message.error('新增地址失败');
             // alert('新增提现地址失败！');
              return false;
            }
          })
          .catch(function (error) {

          });
==================================================================
//然后再mounted()方法之后，再加一个销毁方法
 beforeDestroy () {
     //传入的参数是倒计时返回的id值
      clearInterval(this.intervalid2);
    }

三、vue中使用axios的this作用域问题

1、关于axios

参考博客：
axios的使用

2、碰到的问题解决方案

这部分参考链接：
vue使用axios中 this 指向问题

axios中的this

      这里最好是采用箭头函数，也就是ES6的语法。如果大家对于ES6不熟悉的话，那么可以通过hack方式：

//这里赋值this到it即可
   var it = this;
        var addData = {
          token: it.$store.state.user.accesstoken,
          eth_address:address,
        };
        axios
          .post("test",addData)
          .then(function (response) {
            if (response.data.status_code == 200) {
              it.$Message.info('新增提现地址成功');
              it.intervalid2 =  window.setInterval(() => {
                it.$router.push('/test');//倒计时1.5s自动跳转页面
              }, 1500);
            }else{
              it.$Message.error('新增地址失败');
             // alert('新增提现地址失败！');
              return false;
            }
          })
          .catch(function (error) {

          });

以上就此次的分享了。

end