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

关注

原创最新推荐文章于 2026-08-15 15:13:10 发布 7.2k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

场景：

我想要不调用一个接口的到结果然后复制最后进行提交前的判断，但是再页面查询执行顺序总是执行到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)
      });
    },

收录于