如何从实现observable的函数返回数据

Question

我有如下需求

我有一个函数(比如file2.ts)，它使可观察的GET HTTP请求和返回AppResponse对象填充HTTP响应。下面是代码。我想要一个appResponse对象在file1。将用file2填充。这是一个电话。如何做到这一点?

**file1.ts**
getProfile() {
this.appResonse = this.file1.get1(endPoint);
}
**file2.ts**
get1(endPoint: string): AppResponse {
let appResponse = new AppResponse();
this.httpClient.get<IHttpResponse>(url).subscribe((httpResponse: IHttpResponse) => {
appResponse.data = httpResponse.data;
});
return appResponse;
}

Answer 1

虽然akirus的答案回答了你的问题，但我想补充一些观点，因为你似乎不熟悉异步和可观察的概念…

1. http请求是async呼叫。这意味着当您发出http请求时，浏览器将不会等待响应，而是在此调用之后继续执行代码。当响应可用时，将调用回调或订阅方法。

2. 所以在你上面的代码片段中，首先，这一行在方法中执行:

let appResponse = new appResponse ();

然后向服务器发送请求。也就是这个代码

this.httpClient.get (url)

然后如第1点所述，执行下一条指令

返回appResponse;

然后在某个时间点，请求将完成，订阅方法将调用。执行以下代码

appResponse。

但是由于您没有等到此时才将数据返回给调用者file1.ts。AppResponse

中的数据是未定义的

。appResonse = this.file1.get1(endPoint);

3. 所以当你想从这样的异步调用中获取数据时，你将不得不返回Promise或Observable，这意味着，数据将在未来的某个时候可用，并且当数据可用时调用方法将被通知。所以在你的例子中你必须从file2.ts返回一个可观察对象并订阅file1.ts

4. 所以你的代码可以是

**file1.ts**
getProfile(): void {
this.file1.get1(endPoint).subscribe(appResponse => this.appResponse = appResponse);
}
**file2.ts**
get1(endPoint: string): Observable<AppResponse> {
return this.httpClient.get<IHttpResponse>(url)
.pipe(
map((httpResponse: IHttpResponse) => {
let appResponse = new AppResponse();
appResponse.data = httpResponse.data;
return appResponse;
});
);
}

Answer 2

file1.ts

export class ComponentOne{
appResponse$: Observable<AppResponse>;

constructor(private serviceOne: ServiceOne){
this.appResponse$ = this.serviceOne.get1();

this.appResponse$.pipe(
map(httpResponse => httpResponse.data)
).subscribe(data =>{
console.log(data);
});
}

}

file2.ts

@Injectable({
providedIn: 'root'
})
export class ServiceOne{
get1(endPoint: string): Observable<AppResponse> {
return this.httpClient.get<IHttpResponse>(url);
}
}

Answer 3

通常的方法是:

return this.httpClient.get(url);

，然后订阅file1中的响应，将appResponse设置为响应数据。

如果出于某种原因你确实需要在file2中订阅，那么你可以返回一个承诺来解决何时检索数据，或者在接收到数据时在file1中订阅某种观察者/订阅者对。

所有这些都是额外的步骤，可以帮助你在将数据保存在file2中同时将其发送到file1，但如果不是这种情况，那么简单地在file1中订阅应该是go to方法。

编辑:备选选项示例