Angular не возвращает ожидаемое значение

Я немного новичок в Angular (7). Я пытаюсь получить код состояния, когда выполняю HTTP-запрос. Вот код, который я использую в службе:

checkIfSymbolExists() {
     return this.http.get(this.url, { observe: 'response' })
      .subscribe(response => {
        return response.status;
      });
  }

И я использую возвращаемое значение в методе одного из моих компонентов, например:

onSubmit() {
    console.log(this.stocks.checkIfSymbolExists());
}

Я ожидал, что вернется число, но вместо этого у меня есть объект:

Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}
closed: true
destination: SafeSubscriber {closed: true, _parent: null, _parents: null, _subscriptions: null, syncErrorValue: null, …}
isStopped: true
syncErrorThrowable: true
syncErrorThrown: false
syncErrorValue: null
_parent: null
_parentSubscription: null
_parents: null
_subscriptions: null
__proto__: Subscription

Когда вместо простого возврата response.status я делаю console.log, я получаю код состояния 200, как и ожидалось (число, а не объект).

Есть идеи, почему при возврате значения response.status это не то же самое, как показано здесь? Спасибо.


http typescript javascript angular angular7
person tomfl    schedule 10.11.2018    source источник
comment
Какой у вас код backend API?   -  person random    schedule 10.11.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вы делаете это неправильно. Вот правильный способ сделать это:

Сначала вы возвращаете сопоставленный ответ от http.get вместо subscribeing оттуда. Поэтому вам нужно использовать .pipe(map(...)) вместо subscribe:

import { map } from 'rxjs/operators';
...
checkIfSymbolExists() {
  return this.http.get(this.url, { observe: 'response' })
    .pipe(
      map(res => (res.status === 200))
    );
}

Затем вы возвращаете наблюдаемое из checkIfSymbolExists, а затем subscribe в него в методе onSubmit:

onSubmit() {
  this.stocks.checkIfSymbolExists()
    .subscribe(res => console.log(res));
  // This should print true if status is 200. false instead.
}

Объяснение:

Обязанность вашего метода обслуживания checkIfSymbolExists() - дать Компоненту то, что он хочет. Таким образом, вашему Компоненту не нужно знать, откуда именно ваша служба получает эти данные. Ему просто нужно получить boolean при подписке на Observable, возвращенный checkIfSymbolExists()

Теперь checkIfSymbolExists() метод получает ответ, и вы также добавили параметр observe для полного ответа. map - это просто оператор Rxjs, который преобразует ответ. Внутри map мы проверяем res.status, которое мы получим, потому что observed ответ, выполнив { observe: 'response' }

Теперь map вернет все, что было возвращено оператором сравнения ===, который вернет true, если status равно 200, и false в противном случае.

Надеюсь, это поможет вам лучше понять.

person SiddAjmera    schedule 10.11.2018
comment
Спасибо за ответ. Что, если я хочу проверить код состояния внутри метода службы? Примерно так: response = ›{if (response.status === 200) {return true; } else {вернуть ложь; }} (править: извините за отступ) - person tomfl; 10.11.2018
comment
Вы очень быстрые XD. И это сработало! Большое спасибо ! Я не совсем уверен, что делают все эти методы, но вижу, что мне еще многому нужно научиться ^^ - person tomfl; 10.11.2018
comment
@tomfl, пояснение добавил. Надеюсь, это поможет вам немного понять, что происходит. - person SiddAjmera; 10.11.2018
comment
Большое тебе спасибо. Скажите, если я ошибаюсь, но причина, по которой мы subscribe ожидаем ответа (?) В компоненте (а не в службе), заключается в том, что ответ является асинхронным, а это означает, что выполняется остальная часть кода и только затем ответ отправляется (после того, как он был загружен с сервера), верно? - person tomfl; 10.11.2018
comment
да. Вы можете так сказать. Все, что вы напишете внутри блока subscribe, будет вызвано только после получения ответа, а затем map отправлено службой. - person SiddAjmera; 10.11.2018