vue 使用 setTimeout 页面保证接口调用完毕再继续执行接下来的代码确保执行顺序

最新推荐文章于 2024-10-22 23:11:44 发布

心黑红卜萝

最新推荐文章于 2024-10-22 23:11:44 发布

阅读量7.1k

点赞数

分类专栏： vue element

本文链接：https://blog.youkuaiyun.com/quKbin/article/details/83143894

版权

vue 同时被 2 个专栏收录

14 篇文章

订阅专栏

element

8 篇文章

订阅专栏

本文探讨了一个在前端开发中常见的问题，即如何确保异步接口调用后的数据能够正确地用于后续的逻辑判断。通过使用setTimeout来延迟执行判断代码，确保接口调用及全局变量赋值的完成，作者解决了接口调用结果未及时应用的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：

我想要不调用一个接口的到结果然后复制最后进行提交前的判断，但是再页面查询执行顺序总是执行到checkEnableTime这一行就直接跑到if（）{}判断的地方，最后又回到checkEnableTime方法中 .then中进行赋值（这个时候已经晚了，我的判断么有起到正确过滤的作用）

解决：

尝试使用setTimeout 让判断的代码延后500毫秒执行，确保接口调用和赋值给全局变量的完成，用正确的变量进行判断。这样做感觉不是很完美，但已经解决。如果又更好的方法请留言帮助我完善。

代码中有主要注释。

doCreate() {

      // 验证表单有效性
      this.$refs.createForm.validate(valid => {

//  这个是我想要调用的接口得到结果并进行赋值的操作

        checkEnableTime(this.model)
          .then(({ data }) => {
            this.checkEnableTime = data.detail;
          })
          .catch(error => {
            this.$message.error('验证异常')
          })
        
//使用setTimeout 确保其中执行延后500毫秒  确保上边的接口执行完毕并完成一系列操作再进行下边的判断

        setTimeout(() => {
          var remindTime = this.model.disableTime;
          var str = remindTime.toString();
          str = str.replace('/-/g', '/');
          var oldTime = new Date(str).getTime();
          if (this.model.disableTime <= this.model.enableTime || oldTime <= new Date().getTime()) {
            this.$message.error('失效时间必须大于生效时间和当前时间');
            return;
          }
          if (this.checkEnableTime === false) {
            this.$message.error('您选择的生效期中已经有其他启动页正在生效，请重新选择生效期');
            this.checkEnableTime = null;
            return;
          }
          if (valid) {
            createAppSplashScreen(this.model)
              .then(data => {
                this.$message.success('操作成功');
                this.btnLoading = false;
                this.show = false;
                this.$emit('done')
              })
              .catch(error => {
                // do something
              });
          } else {
            return false;
          }
        }, 500)
      });
    },