Angular не возвращает ожидаемое значение
Я немного новичок в Angular (7). Я пытаюсь получить код состояния, когда выполняю HTTP-запрос. Вот код, который я использую в службе:
checkIfSymbolExists() {
return this.http.get(this.url, { observe: 'response' })
.subscribe(response => {
return response.status;
});
}
И я использую возвращаемое значение в методе одного из моих компонентов, например:
onSubmit() {
console.info(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.info, я получаю код состояния 200, как и ожидалось (число, а не объект).
Есть идеи, почему это не то же поведение при возврате значения response.status, как показано здесь? Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info(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 в противном случае.
Надеюсь, это поможет вам лучше понять.
Спасибо за ответ. Что, если я хочу проверить код состояния внутри метода службы? Примерно так: response => {if (response.status === 200) {return true; } else {вернуть ложь; }} (править: извините за отступ)
Вы очень fast XD. И это сработало! Большое спасибо ! Я не совсем уверен, что делают все эти методы, но вижу, что мне еще многому нужно научиться ^^
@tomfl, пояснение добавил. Надеюсь, это поможет вам немного понять, что происходит.
Большое тебе спасибо. Скажите, если я ошибаюсь, но причина, по которой мы выполняем subscribe с ответом (?) В компоненте (а не в службе), заключается в том, что ответ является асинхронным, а это означает, что выполняется остальная часть кода, и только затем ответ отправляется (после того, как он был загружен с сервера), верно?
да. Вы можете так сказать. Все, что вы напишете в блоке subscribe, будет вызвано только после того, как будет получен ответ, а затем map передан службой.
Какой у вас код backend API?