Angular 在继续之前等待 promise 解决

Question

我的以下代码是项目验证部分的一部分。这段代码的目的是检查引用表中是否存在一个值。如果确实存在，则可以继续。如果不是，则抛出错误并停止用户。

saveChanges() {
    //blah blah
    if (needTovalidate){
    passedCheck = false;
    this.validationService.checkExistence(value)
    .then((exist: boolean) => {
      passedCheck = exist;
      console.log("INSIDE: " + exist);

    });
    console.log("OUTSIDE: " + passedCheck);

    if(passedCheck) {
        //Rest of code
    } else {
        //Throw error msg
    }
}


public async checkExistence(value: string): Promise<boolean>{
  var exist = false;
  return this.getRefData().then((rec: dataModel[]) => {
    return rec.some(el => {
      return el.col1 === value;
    });
  });
}

private async getRefData() {
  return await this.configurationService.retrieveTableData().toPromise(); 
}

预期日志:

INSIDE: true
OUTSIDE:true

实际日志:

OUTSIDE: false
INSIDE: true

显然，代码在继续下一行之前没有等待 bool promise 解决。

有什么建议吗？

Answer 1

正如@jfriend00 在您的评论讨论中提到的，这是一个类似问题的骗局，每当使用异步函数(Promise、Observable)时，您都应该将异步性冒出来到电话和 .then 或 .subscribe 那里。

Return value with asynchronous functions in Typescript

Any suggestions?

您可以用与此类似的方式更改您的 saveChanges 和 checkExistence 函数:

请查看下面的示例_{并可能在编辑中清理您的问题示例代码(如果不重写以制作更好的示例问题，我相信您至少可以花时间在这个过程中自己解决您的问题再次仔细检查)}

您提供的伪代码存在一些问题，但我已尽我所能将流程概念化，同时忠实于您的原始代码。

saveChanges(needToValidate: boolean, // ??
  changesToValidate: Changes,
  asyncValidateFunction: (changes: Changes) => Promise < boolean > , // hmm
) {

  asyncValidateFunction(changesToValidate);
  //blah blah
  if (needToValidate) { // Random context here? Feels like too many things going on in one. Try to isolate functionality.
    this.validationService.checkExistence(value)
      .then(
        (exist: boolean) => {
          yourStuffToDoAfterPassedCheckValidation(exist) // hmm
          console.log("INSIDE: " + exist); // be safe and stay inside :)
        }
      );

  }
}

// Tried to encapsulate as much as your original concept and style from original question. 
// Please refactor this based on your understanding
yourStuffToDoAfterPassedCheckValidation(passedCheckFlag: boolean) {
  if (passedCheckFlag) {
    // Rest of code
  } else {
    // Throw error msg
  }
}

public checkExistence(value: string): Promise < boolean > {
  // Unused junk code? var exist = false;

  return this.getRefData()
    .then(
      (rec: dataModel[]) => {
        return rec
          .some(el => {
            return el.col1 === value;
          });
      });
}

因为这是在 Angular 中，这可能与 Angular 表单有关吗？ Async validators might be helpful to you even if not directly related

与 Return value with asynchronous functions in Typescript 类似的问题也许还有许多其他人 我在这些类型的问题中看到了类似的不一致，可以通过在 TypeScript 中显式输入来改进，以提供更快的事情反馈，以防止出现问题!

如果您需要更具体的帮助，请提供原始代码的重构版本，因为有些东西似乎被弱替换了。

否则，我们可以更清晰地处理伪代码。 由于这似乎是一个重复的问题，会犯类似的异步错误，因此您需要提供代码无法正常工作的上下文，否则其他问题中已经提供了全面的答案😊。

在排查困惑的代码时，它可能会帮助您先将整个程序流程重写为伪代码，然后基于此重新生成代码以巩固您试图理解的内容。 _{(这就是为什么我有时建议手写您的程序，或者至少将所有内容分解为分配的变量，显式键入所有内容并尽可能多地使用 TypeScript 语言服务可以。}

编辑:我看到您已经复制了您自己的问题，该问题更清晰一些，并且正在努力解决您的问题。我希望你只是在一个地方更新你的问题。从您其他问题的评论来看，您似乎不想遵循对 Promise 的基本异步用法的建议，并且仍然希望依赖一个尚不存在的变异值(异步)。