rxjs的switchMap
getList$ = new Subject();
@Watch('filters', { deep: true, immediate: true })
async resetFilters(filter: any) {
const { startDate, endDate } = filter;
if (this.timeMap[`${startDate}${endDate}`]) {
this.listData = this.timeMap[`${startDate}${endDate}`].list;
this.finish = this.timeMap[`${startDate}${endDate}`].finish;
this.page = this.timeMap[`${startDate}${endDate}`].page;
return;
}
if (!this.activatedFlag || startDate === endDate) return;
this.finish = false;
this.page = 0;
this.listData = [];
this.loadMore();
}
public loadMoreInit() {
this.getList$
.pipe(
switchMap(() => {
return this.getList();
})
)
.subscribe(
({ items: newData, paginator: { page, pageSize, totalCount } }) => {
const { startDate, endDate } = this.filters;
this.loading = false;
if (page * pageSize >= totalCount) {
this.finish = true;
}
this.listData = this.listData.concat(newData) as [];
this.timeMap[`${startDate}${endDate}`] = {
page: this.page,
finish: this.finish,
list: this.listData,
};
}
);
}
public getList() {
return this.getListData({
page: this.page,
pageSize: 10,
...this.filters,
});
}
public async loadMore() {
if (this.finish) {
return;
}
this.page += 1;
this.loading = true;
this.getList$.next({});
}
cancelToken
import axios from 'axios';
const { CancelToken } = axios;
data() {
return {
cancelRequest: null,
};
},
getListData(filter) {
if (typeof this.cancelRequest === 'function') {
this.cancelRequest();
}
return api.getListNewMemberRankPaged(
filter,
new CancelToken(function executor(c) {
this.cancelRequest = c;
})
);
},