我如何 return 点击 TypeScript/Angular 中的可观察对象?
How do I return in a tap on an observable in TypeScript/Angular?
我正在尝试在服务中创建一个方法。该方法应该:
- 对 REST 进行 GET 调用 API
- 更改参数的解决方案组件 (string[]) 以包含 get 调用的结果
- Return修改后的参数。
但是,我不希望它作为可观察对象返回,因为我正在更改组件中它 return 的对象。
现在我的方法如下所示:
private GET_URL = '...';
getSolutions(dog: Dog): Dog {
let opts = new HttpParams();
//set params
this.http.get<Array<string>>(this.GET_URL, {params: opts}).pipe(
tap(solutions => {
dog.solutions = solutions;
return dog
}),
catchError(//calls to an error handling method I made)
)
return dog
}
我希望它进入水龙头,改变解决方案,然后 return 在水龙头中。但是,它似乎击中了下面的 return(它就在那里,所以有一个默认的 return)。
有人有什么建议吗?
像这样设置服务方法
getSolutions(dog: Dog): Observable<Dog> {
return this.http.get<Dog>(this.GET_URL, {params: opts})
.pipe(catchError(this.errorHandlerService.handleError));;
}
此处处理错误
@Injectable({
providedIn: 'root'
})
export class ErrorHandlerService {
constructor() { }
public handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(
`Backend returned code ${error.status}, ` + `body was: ${error.error}`
);
}
// return an observable with a user-facing error message
return throwError('Something bad happened; please try again later.');
}
// delay
public delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
}
然后在你的控制器中,你得到这样的数据
this.myService.getSolutions().subscribe((myDog : Dog) => {
console.log(myDog);
});
tap
不允许您更改结果,您需要改用 map
。有关 tap
与 map
的更多信息:
此外,我不确定您是否要立即 return dog
,因为那样会 return,在执行调用和 dog
参数之前已修改:
private GET_URL = '...';
getSolutions(dog: Dog): Dog {
let opts = new HttpParams();
//set params
// changed to return stream
return this.http.get<Array<string>>(this.GET_URL, {params: opts}).pipe(
map(solutions => { // <- change to map
dog.solutions = solutions;
return dog
}),
catchError(//calls to an error handling method I made)
)
// return dog // this would return before the URL was executed
}
我正在尝试在服务中创建一个方法。该方法应该:
- 对 REST 进行 GET 调用 API
- 更改参数的解决方案组件 (string[]) 以包含 get 调用的结果
- Return修改后的参数。
但是,我不希望它作为可观察对象返回,因为我正在更改组件中它 return 的对象。
现在我的方法如下所示:
private GET_URL = '...';
getSolutions(dog: Dog): Dog {
let opts = new HttpParams();
//set params
this.http.get<Array<string>>(this.GET_URL, {params: opts}).pipe(
tap(solutions => {
dog.solutions = solutions;
return dog
}),
catchError(//calls to an error handling method I made)
)
return dog
}
我希望它进入水龙头,改变解决方案,然后 return 在水龙头中。但是,它似乎击中了下面的 return(它就在那里,所以有一个默认的 return)。
有人有什么建议吗?
像这样设置服务方法
getSolutions(dog: Dog): Observable<Dog> {
return this.http.get<Dog>(this.GET_URL, {params: opts})
.pipe(catchError(this.errorHandlerService.handleError));;
}
此处处理错误
@Injectable({
providedIn: 'root'
})
export class ErrorHandlerService {
constructor() { }
public handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(
`Backend returned code ${error.status}, ` + `body was: ${error.error}`
);
}
// return an observable with a user-facing error message
return throwError('Something bad happened; please try again later.');
}
// delay
public delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
}
然后在你的控制器中,你得到这样的数据
this.myService.getSolutions().subscribe((myDog : Dog) => {
console.log(myDog);
});
tap
不允许您更改结果,您需要改用 map
。有关 tap
与 map
的更多信息:
此外,我不确定您是否要立即 return dog
,因为那样会 return,在执行调用和 dog
参数之前已修改:
private GET_URL = '...';
getSolutions(dog: Dog): Dog {
let opts = new HttpParams();
//set params
// changed to return stream
return this.http.get<Array<string>>(this.GET_URL, {params: opts}).pipe(
map(solutions => { // <- change to map
dog.solutions = solutions;
return dog
}),
catchError(//calls to an error handling method I made)
)
// return dog // this would return before the URL was executed
}