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 返回映射响应，而不是从那里返回 subscribeing。所以你需要使用.pipe(map(...)) 而不是subscribe：

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

然后在onSubmit 方法中从checkIfSymbolExists 和subscribe 返回observable：

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

说明：

你的服务方法checkIfSymbolExists() 的职责是给组件它想要的东西。所以基本上你的组件不需要知道你的服务从哪里获取这些数据。它只需要在订阅checkIfSymbolExists()返回的Observable时获得boolean

现在checkIfSymbolExists() 方法获得响应，您还添加了一个选项到observe 完整响应。 map 只是一个将转换响应的 Rxjs 运算符。在map 内部，我们正在做的是检查res.status，因为我们有observed 通过{ observe: 'response' } 得到响应

现在map 将返回比较运算符=== 返回的任何内容，如果status 是200，则返回true，否则返回false。

希望这能让你更好地理解。