如何解释 api 服务器对 angular/typescript 中 http 请求的响应延迟？答案

【问题标题】：How to account for delay in response from api server on http requests in angular/typescript?如何解释 api 服务器对 angular/typescript 中 http 请求的响应延迟？
【发布时间】：2020-08-11 23:26:31
【问题描述】：

我正在向 API 服务器发出 HTTP 发布请求。我有一个函数可以进行调用，然后根据响应的值返回 true 或 false。但是，当我尝试评估响应时，它是未定义的，因此我的函数总是返回 false。

我想过创建一个 while(response == undefined) 循环，只是为了等到值被定义后再评估它，但是还有其他解决方案吗？

apiCall(): any{
 let headers: HttpHeaders = new HttpHeaders();
 headers.append('Content-Type', 'application/json');

 var result; 
 this.http.post(this.url, this.data, {headers: headers}).subscribe(
  res => {
    result = res; 
  }
 );

 return result; 
}

evaluate() : boolean {
 var response = apiCall();
 if(response == 1968){
    return true; 
 }
 else return false; 
}

我想根据 api 响应的值从我的评估函数中返回真或假。

【问题讨论】：

只是返回调用不要在 apiCall 中订阅它在组件中或从您实际调用它的位置订阅它，然后在那里订阅并等待结果。然后你可以做 apiCall().subscribe(res => ..... 你的代码 . .)

标签： angular typescript http web-applications

【解决方案1】：

对于 Javascript 的新手来说，这是一个简单但非常令人困惑的机制，它是一种设计为单线程异步语言，它使许多方面变得容易得多......

不可能延迟显式执行的代码，例如在其他语言中。你的代码正在做的是创建一个结果变量，执行请求，订阅请求，然后立即返回 result 变量，它仍然是 undefined。

订阅时，您使用速记箭头语法传入callback function。 data => { ... }与function(data) { ... }基本相同。

收到响应后，执行回调函数，更新变量。然而，这是没有意义的。 result 变量仅在 apiCall 函数的范围内可用，该函数已经返回，您更新一个不再使用的变量。

var response = apiCall();

apiCall 将立即返回一个空的result 变量。该请求正在后台处理。 while 循环不起作用，它们会阻塞线程，这意味着它无法处理响应并创建无用的工作。解决方案要简单得多，遵守异步逻辑的规则。

我会让你对异步 Javascript（回调、承诺、异步/等待）进行一些研究，但是 Angular 可以很容易地使用 subscribe 模式。在下面，它使用 Rxjs 和 observables。

最简单的方法是关注docs。您的 api 调用应该从 http.post 返回 Observable，并且该数据的任何消费者都应该订阅它，并传入一个函数以稍后执行。

请记住，任何回调很可能不会与您的其余代码同时执行。把它想象成一个链条，每一个都通向下一个事件。这就是它应该如何工作，不应该有任何纵横交错。

function apiCall() {
...
return this.http.post("https://...", data, headers);
}

function getData() {
apiCall()
  .subscribe(data => {
    if (data.response === 200) {
      ...do something now that the response is known
    }
  });
}

请记住，您不能从getData 返回真/假，原因相同，它已经返回。您必须继续链接操作，或者如果您真的想尝试这种方法，请参阅async/await。

【讨论】：

【解决方案2】：

您可以通过对相关请求使用setTimeout() 来解决此问题。

【讨论】：