一个基于 rxjs 简单的查询工具
安装
npm install @skywosafe/rxquery
示例
1. 无自定义查询参数
无自定义查询参数时可用,适用于只使用自带查询参数即可实现功能的场景
const q = QueryData.create(
p => {
return this.userService
.searchUser({
// p.pageIndex 是框架自带的查询参数
pageIndex: p.pageIndex
// ...
})
.pipe(
map(it => {
return it.data.users
})
)
},
// default result on error or null
{ total: 0, items: [] }
)
2. 携带自定义查询参数
type State = "enable" | "disbale" | "active"
// 自定义查询参数的类型,这里我们定义state是可选的,所以默认可以不传
const q = QueryData.parameter<{ state?: State }>({}).create(
p => {
return this.userService
.searchUser({
pageIndex: p.pageIndex,
// 我们可以在这里使用 p.state 使用自定义的查询参数
state: p.state
// ...
})
.pipe(
map(it => {
const data = it.data.users
this.cache.clear() // PS: 可以做些额外的事情
return data
})
)
},
{ total: 0, items: [] }
)
2. Angular 组件使用示例
<!-- 查询 -->
<input
type="text"
placeholder="搜索"
[ngModel]="q.parameter.searchText"
(ngModelChange)="q.search('searchText', $event)"
/>
<button (click)="q.refresh()">刷新数据</button>
<button (click)="searchForOnlyEnabled()">只显示启用状态数据</button>
<!-- list -->
<div *ngFor="let item of q.data.items">{{ item.name }}</div>
export class UsersComponent implements OnInit, OnDestroy {
q = QueryData.createDefault(p =>
this.userService.searchUser({ pageIndex: p.pageIndex, ...}).pipe(
map(it => {
return it.data.users
})
),
{ total: 0, items: [] }
)
constructor(private userService: AgentsQueryService) {}
ngOnInit() {
// 必须: 开始查询
this.q.subscribe()
// 可选: 每3秒刷新数据
// this.q.enableInterval(3000)
}
searchForOnlyEnabled() {
this.q.search("state", "enable")
}
ngOnDestroy() {
// 必须: 释放
this.q.close()
}
}