Как обработать ответ от медленного сервера - PullRequest
2 голосов
/ 26 марта 2019

Я должен получить некоторые данные с сервера. Ответ от сервера приходит очень медленно.Я хочу сохранить ответ в массиве, чтобы он мог отображаться в шаблоне.Цель состоит в том, чтобы отложить сохранение ответа в массиве до тех пор, пока сервер не вернет ответ

. Я уже пробовал 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)
}

В консоли функция «Сведения о книге внутри» отображает результат ответа с сервера, но функция «Детали книги за пределами» отображается как ноль.

Ответы [ 3 ]

0 голосов
/ 26 марта 2019
 - 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);
          }
         })
0 голосов
/ 26 марта 2019

Я думаю, что вы должны выполнять все операции / назначения при обратном вызове вызова функции. Поскольку вызов будет асинхронным, поэтому до тех пор, пока вы не получите ответ от сервера, ваш следующий код не будет выполнен.

Код после вызова 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-вызова.

Это вообще не проблема медлительности.

0 голосов
/ 26 марта 2019

Из-за асинхронной природы JavaScript / TypeScript вы не можете обрабатывать возвращаемые наблюдаемые значения вне subscribe().Вы должны получить доступ к возвращаемому наблюдаемому значению в этом блоке подписки:

this.myservice.online_service(this.funName,url).subscribe(response => { 
  if (response.code === '1') {
    this.bookDetails = response;
    console.log(response) //prints the array or object
  }
});
console.log(this.bookDetails) //this will probably print undefined

В вашем шаблоне, если вы не хотите, чтобы какие-либо ошибки печатались на вашей консоли (или, что еще хуже, в самом представлении шаблона),Вы можете уменьшить это, используя оператор безопасной навигации на вашем bookingDetails, чтобы защитить его от нулевых или неопределенных значений, пока вы ожидаете, что данные (которые в данный момент не определены) будут обработаны:

<div>{{ bookingdetails?.userName }}</div>

В качестве альтернативы вы можете использовать * ngIf, который предотвращает рендеринг этого div, пока не будет определен bookingdetails.

<div *ngIf="bookingdetails">
..
..
</div>
...