使用RxJS将TypeScript运算符组合成新运算符
使用RxJS将TypeScript运算符组合成新运算符
提问于 2017-02-03 22:48:55
我经常发现我自己把相同的运算符序列添加到可观测值中。
observable$
.do(x => console.log('some text', x))
.publishReplay()
.refCount();我正在寻找一种将这3个操作符组合在一个小的可重用操作符(例如.cache('some text'))中的方法，我可以将它链接到任何可观察到的位置。我如何在类型记录中定义这一点，以便我可以导入rxjs /观测者和这个操作符，就像我对rxjs操作符所做的一样？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-04 00:43:57
要实现您所描述的操作符，请创建一个具有以下内容的cache.ts文件：
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/do";
import "rxjs/add/operator/publishReplay";
// Compose the operator:
function cache<T>(this: Observable<T>, text: string): Observable<T> {
return this
.do(x => console.log(text, x))
.publishReplay()
.refCount();
}
// Add the operator to the Observable prototype:
Observable.prototype.cache = cache;
// Extend the TypeScript interface for Observable to include the operator:
declare module "rxjs/Observable" {
interface Observable<T> {
cache: typeof cache;
}
}然后像这样消费它：
import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/of";
import "./cache";
let cached = Observable.of(1).cache("some text");
cached.subscribe(x => console.log(x));Stack Overflow用户
发布于 2017-02-22 03:41:06
cartant上面的回答很好，并回答了所问的问题(如何在类型记录中定义这个问题，这样我就可以导入rxjs /观测者和这个操作符，就像我对rxjs操作符？)
我最近发现了let操作符，如果您实际上不需要将该函数实现为运算符，那么它仍然会使您的代码干涸。
我开始实现一个Range2服务来与我的rails后端接口，并且知道我的大部分api调用看起来都非常相似，所以我想尝试将同样多的常见内容放在一个函数中。
几乎所有的呼叫都将执行以下操作：
- 重试错误(我下面的函数需要在这方面做更多的工作)
- 将http响应映射到本地定义的类型记录类(通过json-打字稿-映射器)
- 处理错误
下面是我通过rxjs操作符通过公共函数(handleResponse)对http响应使用handleResponse操作符的一个例子。
handleResponse<T>({klass, retries=0} :{klass:any,retries?:number }) : (source: Observable<Response>) => Observable<T> {
return (source: Observable<Response>) : Observable<T> => {
return source.retry(retries)
.map( (res) => this.processResponse(klass,res))
.catch( (res) => this.handleError(res));
}
}
processResponse(klass, response: Response) {
return deserialize(klass, response.json());
}
handleError(res: Response) {
const error = new RailsBackendError(res.status, res.statusText);
return Observable.throw(error);
}
getUserList({page=1,perPage=30,retry=0}: { page?:number, perPage?:number, retry?:number }={}) : Observable<UserList> {
const requestURL = `/api/v1/users/?${this.apiTokenQueryString}&page=${page}&per_page=${perPage}`;
return this.http.get(requestURL).let(this.handleResponse<UserList>({klass: UserList}));
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42034248
复制相关文章
相似问题
腾讯云开发者
