Angular 在继续之前等待承诺解决

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

显然，代码在继续下一行之前没有等待布尔诺言解决。

有什么建议吗？

Answer 1

正如@jfriend00 在您的评论讨论中提到的那样，这是对类似问题的欺骗，无论何时使用异步函数（Promise、Observable），您都应该将异步性冒泡回调用和.then 或@987654327 @那里。

Return value with asynchronous functions in Typescript

有什么建议吗？

您可以通过与此类似的方式更改您的 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语言服务。}

编辑：我看到您已经重复了您自己的问题，这个问题更加清晰，并且正在努力解决您的问题。我希望你只是在一个地方更新你的问题。从您其他问题中的 cmets 来看，您似乎不想遵循 Promise 的基本异步用法的建议，并且仍然希望依赖尚不存在的变异值（异步）。

Answer 2

我使用的最简单的方法是创建一个布尔变量并在then 和catch 中将其设为假

例子：

let isPromisePending = false;

function someFn() {
  isPromisePending = true;
  myPromise().then(() => {
    isPromisePending = false;
    //Success handler below
  }).catch(() => {
    isPromisePending = false;
    //Error handler below
  })
}