Как учесть задержку ответа от api сервера на http запросы в angular / typcript?

Question

Я отправляю HTTP-запрос на сервер API.У меня есть функция, которая делает вызов, а затем возвращает истину или ложь в зависимости от значения ответа.Однако, когда я пытаюсь оценить ответ, он не определен, поэтому моя функция всегда возвращает 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.

Answer 1

Это простая, но очень запутанная механика для новичков в Javascript, который по своей конструкции является однопоточным асинхронным языком, он значительно упрощает многие аспекты ...

Невозможно отложить выполнение кодаявно как в других языках.То, что делает ваш код, создает переменную результата, выполняет запрос, подписывается на запрос и затем сразу возвращает переменную result, которая по-прежнему undefined.

Когда вы подписываетесь, вы передаетев функции обратного вызова с использованием сокращенного синтаксиса стрелки.data => { ... } в основном совпадает с function(data) { ... }.

Когда ответ получен, выполняется функция обратного вызова, которая обновляет переменную.Однако это бессмысленно.Переменная result доступна только в области функции apiCall, которая уже возвращена, вы обновляете переменную, которая больше никогда не используется.

var response = apiCall();

apiCall немедленно вернется с пустым result переменная.Запрос обрабатывается в фоновом режиме.while циклы не будут работать, они будут блокировать поток, то есть он не сможет обработать ответ и создать бесполезную работу.Решение намного проще, придерживайтесь правил асинхронной логики.

Я позволю вам провести некоторое исследование асинхронного Javascript (обратные вызовы, обещания, асинхронное / ожидание), но angular упрощает работу сsubscribe шаблон.Ниже он использует Rxjs и наблюдаемые.

Самый простой подход - следовать документам .Ваш вызов API должен вернуть Observable с http.post, и любые потребители этих данных должны подписаться на него, передав функцию для выполнения в более позднее время.

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

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

Имейте в виду, вы не можете вернуть true / false из getData по тем же причинам, он уже вернулся.Вы должны продолжать цепочку действий, или если вы действительно хотите попробовать этот подход, см. async/await.