Angular 没有 return 预期值
Angular doesn't return the expected value
我对 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
的值时行为不一样,如此处所示吗?谢谢。
你做错了。这是正确的做法:
首先,您 return 来自 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))
);
}
然后你 return 来自 checkIfSymbolExists
的可观察对象,然后 subscribe
在 onSubmit
方法中到它:
onSubmit() {
this.stocks.checkIfSymbolExists()
.subscribe(res => console.log(res));
// This should print true if status is 200. false instead.
}
解释:
您的服务方法 checkIfSymbolExists()
的职责是为组件提供它想要的东西。所以基本上您的组件不需要知道您的服务从哪里获取这些数据。它只需要在订阅由 checkIfSymbolExists()
编辑的 Observable
return 时获得 boolean
现在 checkIfSymbolExists()
方法得到响应,您还向 observe
完整响应添加了一个选项。 map
只是一个将转换响应的 Rxjs 运算符。在 map
内部,我们正在做的是检查 res.status
,我们将得到它,因为我们通过 { observe: 'response' }
获得了响应 observe
d
现在 map
将 return 由比较运算符 ===
编辑的 return 将 return true
如果 status
是 200
,否则是 false
。
希望这能让您更好地理解。
我对 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
的值时行为不一样,如此处所示吗?谢谢。
你做错了。这是正确的做法:
首先,您 return 来自 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))
);
}
然后你 return 来自 checkIfSymbolExists
的可观察对象,然后 subscribe
在 onSubmit
方法中到它:
onSubmit() {
this.stocks.checkIfSymbolExists()
.subscribe(res => console.log(res));
// This should print true if status is 200. false instead.
}
解释:
您的服务方法 checkIfSymbolExists()
的职责是为组件提供它想要的东西。所以基本上您的组件不需要知道您的服务从哪里获取这些数据。它只需要在订阅由 checkIfSymbolExists()
Observable
return 时获得 boolean
现在 checkIfSymbolExists()
方法得到响应,您还向 observe
完整响应添加了一个选项。 map
只是一个将转换响应的 Rxjs 运算符。在 map
内部,我们正在做的是检查 res.status
,我们将得到它,因为我们通过 { observe: 'response' }
observe
d
现在 map
将 return 由比较运算符 ===
编辑的 return 将 return true
如果 status
是 200
,否则是 false
。
希望这能让您更好地理解。