在 Typescript 中使用异步函数返回值

Question

我有以下TS功能：

CheckRegUser(u: User): boolean {
    let b: boolean = true;
    let toSend = {
      email: u.email
    };
    this.http.post("http://localhost:8080/", toSend).subscribe((data: Valid) => {
      if(!data.validity){
        b = false;
      }
    });
    console.log(b);
    return b;
}

这里我连接到 ExpressJS 后端，我得到一个布尔结果。这部分工作正常，但问题是在“this.http”中改变b的值之前执行了“return b”语句，所以无论Express的响应是什么，b总是正确的。

我知道 TS 和 JS 是异步的，因此导致了这个问题，但是我找不到解决问题的正确方法。任何帮助，将不胜感激。

Answer 1

你可以试试async await

  async CheckRegUser(u: User): Promise<boolean> {

    let toSend = {
      email: u.email
    };
    let k = await this.http.post("http://localhost:8080/", toSend).subscribe((data: Valid){
      let b: boolean = true;
      if(!data.validity){
        b = false;
      }
      return b
    });
    console.log(k);
    return k;
}

Answer 2

当我刚开始使用 Google 地图应用学习 Observables/Reactive 编程时，我遇到了这个常见问题：D！

当你发现异步函数同步返回b（默认为true）时，你意识到异步函数还没有改变b布尔标志；

要解决此问题，重组函数以将 Observable 返回给调用者可能会更容易。

也许可以查找Observablechaining 或类似概念Promisechaining。

老例子：

CheckRegUser(u: User): boolean {
    const b: boolean = true;
    const toSend = {
      email: u.email
    };

    const httpPost: Observable<aJsonObject> = this.http.post("http://localhost:8080/", toSend)
    const httpPostSubscription: Subscription = httpPost
      .subscribe((data: Valid) => { // This is asynchronous
        if (!data.validity) {
          b = false;
        }
      });
    console.log(b);

    return b; // This is effectively sync returning your default value `b = true`;
  }

如果您可以重命名变量以使其更清晰，那就更好了。 b 或 isDataValid。 使用 const 变量开始函数式风格也可能是一种很好的做法，以帮助避免可变性问题。

如果你更熟悉Promises，你也可以尝试promisify httpClient.post Observable。

它的一般要点是将Observable 传回给调用者并在那里传递.subscribe。 当某些东西异步返回时，您应该将异步性一直返回到顶部。

重构代码以反映这些做法

  CheckRegUser(user: User, httpClient: HttpClient): Observable<Valid> {
    // 1. Data to send
    type  EmailPost                  = { email: string }
    const emailJsonToSend: EmailPost = { // I prefer explicit typing wherever possible :tada: :D
      email: user.email
    };

    // 2. POST the data to the web server
    const emailHttpPostObs: Observable<Valid> = httpClient.post("http://localhost:8080/", emailJsonToSend);

    return emailHttpPostObs;
  }

  CallerSubmitUserFunction(user: User, httpClient: HttpClient) {
    // Made some assumptions, please comment and we can work out a better solution
    // Explicitly typed things as an example.

    // 1. You have a user e.g. new User(name:'myUser', email: 'myEmailAddressOrEmailContent@email.com');
    const userToSend: User = user;
    // 2. You POST the user.email and get response.
    const validatedUserDataObs: Observable<Valid> = CheckRegUser(userToSend, httpClient);

    // 3. You check whether the server accepted the data and whether it was valid.
    const validatedUserDataObs: Subscription = validatedUserDataObs
      .subscribe((data: Valid) => {
        // Perform data validation or Error checking here.

        // If data is valid, 
        if (dataValidationFunction()) {
          // Do something here
          // Instead of trying to return the boolean in the asynchronouse function.
          // Directly do something after the server responds (whenever it happens).
        }
      }) // catch Error


    // It would also be better if you could rename your variables to be more self-indicative
    // var dataIsValid

  }