如何处理来自慢速服务器的响应

Question

我必须从服务器获取一些数据。服务器的响应非常缓慢。我想将响应存储在一个数组中，以便它可以显示在模板中。目的是延迟将响应存储到数组中，直到服务器 returns response

我已经尝试过 setTimeout() 但是失败了

Ts文件

ticketdetails()
{
  this.funName = 'online_service';
  var url = { url:'bookingdetails?username=....&password=....&bookingCode=' + this.id};
  console.log(url);
  this.myservice.online_service(this.funName,url).subscribe(response => {

 if (response.code === '1') 
   {
     this.bookDetails = response;
     console.log('Book details inside function', this.bookDetails);
   }
  })
  console.log('Book details outside function' , this.bookDetails)
}

在控制台中，函数内的书籍详情显示服务器的响应结果但，函数外的书籍详细信息显示为 null 。

Answer 1

 - isResponce: boolean =false;

       ticketdetails()
       {
         this.funName = 'online_service';
         var url = { url:'bookingdetails?username=....&password=....&bookingCode=' +
   this.id};
         console.log(url);
         this.myservice.online_service(this.funName,url).subscribe(response =>
   {

        if (response.code === '1') 
          {
            this.isResponce = true;
            this.bookDetails = response`enter code here`;
            console.log('Book details inside function', this.bookDetails);
          }
         })

Answer 2

我认为您应该在函数调用的回调中完成所有 operations/assignments。由于调用将是异步的，因此在您没有从服务器获得响应之前，您的进一步代码将不会被执行。

API 调用之后的代码将被执行，所以我认为 API 调用的设计方式应该是将其响应包装在回调中，然后再使用。您在 API 调用之后编写的代码将在该行之后立即执行，它不会等待响应到达，因为这是 Java 脚本的明显性质。

示例：休息服务

customHttpDefaultOptions= {
     headers: new HttpHeaders({
             'Content-Type': 'application/json'
     })
};

postRestCall(requestBody, data) {
    this.httpClient.post(apiURL, requestBody, this.customHttpDefaultOptions).pipe(retry(1))
            .subscribe(response => {
            data(response);
    }, error => data(this.handleError(error)));
}

所以在这里你也应该做一些事情，一旦响应到达，它将被包装在回调中，你可以稍后从回调中使用它。

样本：

this.restService.postRestCall(requestBody, data => {
    this.his.bookDetails = data;
});

因此，如果您已经做了某种休息服务，那么您也可以重新使用 API 调用机制，而不是编写 api 调用的样板代码。

完全不是慢的问题

如何处理来自慢速服务器的响应

How to handle response from slow server

ionic-framework

ionic3

angular

angular5

angular7

Ts文件