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

As @jfriend00 mentions in your comment discussions that this is a dupe of similar questions, whenever using asynchronous functions (Promise, Observable) you should bubble up the asynchronicity back to the call and .then or .subscribe it there.

Return value with asynchronous functions in Typescript

Any suggestions?

You could alter your saveChanges and checkExistence function in a similar way to this:

Please see the example below _{and maybe clean up your question example code in an edit (if not rewriting to make a better example question, I believe you at least may resolve your issue yourself in the process by taking the time to go over it painstakingly again)}

There are a couple of issues with the pseudocode you have provided, but I tried to conceptualise the process as best I could while remaining true to your original code.

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;
          });
      });
}

As this is in Angular, would this perhaps be related to Angular forms? Async validators might be helpful to you even if not directly related

Similar question to Return value with asynchronous functions in Typescript and perhaps many others I see similar inconsistencies in these types of questions that could be improved with explicit typing in TypeScript to provide quicker feedback of things to guard against things going wrong!

If you want more specific help, please provide a refactored version of your original code, because some things were seemed weakly replaced.

Otherwise, we could work off pseudocode with more clarity. As this seems to be a a duplicate question making similar async mistakes, it is up to you to provide the context in which your code is not working, otherwise comprehensive answers are already available in the other questions .

In troubleshooting tangled code, it might help you to rewrite the whole program flow as pseudocode first and then regenerate the code based on that to consolidate what you are trying to understand. _{(This is why I sometimes recommend handwriting your program, or, at the very least, break down everything into assigned variables, explicitly type everything and make as much use of the TypeScript Language service as you can.}

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