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

Question

Я немного новичок в 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 это не так, как показано здесь? Спасибо.

Answer 1

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

Сначала вы возвращаете отображенный ответ от http.get вместо subscribe оттуда. Поэтому вам нужно будет использовать .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.
}

Explaination:

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

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

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

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