Skip to content

Commit 5034f2c

Browse files
John60676John60676
committed
feat: add reloading to record the loading status of reload #41 
1 parent b16fd22 commit 5034f2c

File tree

6 files changed

+60
-9
lines changed

6 files changed

+60
-9
lines changed

‎src/__tests__/index.test.tsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -2318,11 +2318,12 @@ describe('useRequest', () => {
23182318
const wrapper = shallowMount(
23192319
defineComponent({
23202320
setup() {
2321-
const { run, reload, data } = useRequest(request, {
2321+
const { run, reload, reloading, data } = useRequest(request, {
23222322
defaultParams: ['hello'],
23232323
});
23242324
return () => (
23252325
<div>
2326+
<div class="reloading">{`${reloading.value}`}</div>
23262327
<button class="run" onClick={() => run('hi there')}></button>
23272328
<button class="reload" onClick={() => reload()}></button>
23282329
<div class="data">{data.value}</div>
@@ -2334,21 +2335,30 @@ describe('useRequest', () => {
23342335

23352336
const dataEl = wrapper.find('.data');
23362337
const runEl = wrapper.find('.run');
2338+
const reloadingEl = wrapper.find('.reloading');
23372339
const reloadEl = wrapper.find('.reload');
23382340

2341+
expect(reloadingEl.text()).toBe('false');
23392342
await waitForTime(1000);
2343+
expect(reloadingEl.text()).toBe('false');
23402344
expect(dataEl.text()).toBe('hello');
23412345

23422346
await runEl.trigger('click');
2347+
expect(reloadingEl.text()).toBe('false');
23432348
await waitForTime(1000);
2349+
expect(reloadingEl.text()).toBe('false');
23442350
expect(dataEl.text()).toEqual('hi there');
23452351

23462352
await reloadEl.trigger('click');
2353+
expect(reloadingEl.text()).toBe('true');
23472354
await waitForTime(1000);
2355+
expect(reloadingEl.text()).toBe('false');
23482356
expect(dataEl.text()).toEqual('hello');
23492357

23502358
await runEl.trigger('click');
2359+
expect(reloadingEl.text()).toBe('false');
23512360
await waitForTime(1000);
2361+
expect(reloadingEl.text()).toBe('false');
23522362
expect(dataEl.text()).toEqual('hi there');
23532363
});
23542364

‎src/__tests__/load-more.test.tsx

+13-1
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,7 @@ describe('useLoadMore', () => {
343343
loadingMore,
344344
noMore,
345345
loading,
346+
reloading,
346347
loadMore,
347348
reload,
348349
} = useLoadMore(normalRequest, {
@@ -352,6 +353,7 @@ describe('useLoadMore', () => {
352353
<div>
353354
<div class="dataList">{dataList.value.length || 0}</div>
354355
<div class="loadingMore">{`${loadingMore.value}`}</div>
356+
<div class="reloading">{`${reloading.value}`}</div>
355357
<div class="loading">{`${loading.value}`}</div>
356358
<div class="noMore">{`${noMore.value}`}</div>
357359
<div
@@ -374,6 +376,7 @@ describe('useLoadMore', () => {
374376

375377
const dataListEl = wrapper.find('.dataList');
376378
const loadingMoreEl = wrapper.find('.loadingMore');
379+
const reloadingEl = wrapper.find('.reloading');
377380
const loadingEl = wrapper.find('.loading');
378381
const loadMoreEl = wrapper.find('.loadMore');
379382
const noMoreEl = wrapper.find('.noMore');
@@ -382,6 +385,7 @@ describe('useLoadMore', () => {
382385
expect(loadingEl.text()).toBe('true');
383386
await waitForTime(1000);
384387
expect(loadingEl.text()).toBe('false');
388+
expect(reloadingEl.text()).toBe('false');
385389
expect(dataListEl.text()).toBe('10');
386390
expect(loadingMoreEl.text()).toBe('false');
387391
expect(noMoreEl.text()).toBe('false');
@@ -390,9 +394,11 @@ describe('useLoadMore', () => {
390394
await loadMoreEl.trigger('click');
391395
expect(loadingMoreEl.text()).toBe('true');
392396
expect(loadingEl.text()).toBe('true');
397+
expect(reloadingEl.text()).toBe('false');
393398
await waitForTime(1000);
394-
expect(loadingEl.text()).toBe('false');
399+
expect(reloadingEl.text()).toBe('false');
395400
expect(loadingMoreEl.text()).toBe('false');
401+
expect(loadingEl.text()).toBe('false');
396402
expect(dataListEl.text()).toBe(`${10 + index * 10}`);
397403
expect(noMoreEl.text()).toBe(`${index === 9}`);
398404
}
@@ -401,29 +407,35 @@ describe('useLoadMore', () => {
401407
await loadMoreEl.trigger('click');
402408
expect(loadingMoreEl.text()).toBe('false');
403409
expect(loadingEl.text()).toBe('false');
410+
expect(reloadingEl.text()).toBe('false');
404411
await waitForTime(1000);
405412
expect(loadingEl.text()).toBe('false');
406413
expect(loadingMoreEl.text()).toBe('false');
414+
expect(reloadingEl.text()).toBe('false');
407415
expect(dataListEl.text()).toBe('100');
408416
expect(noMoreEl.text()).toBe('true');
409417
}
410418

411419
await reloadEl.trigger('click');
412420
expect(loadingEl.text()).toBe('true');
413421
expect(loadingMoreEl.text()).toBe('false');
422+
expect(reloadingEl.text()).toBe('true');
414423
expect(dataListEl.text()).toBe('0');
415424
expect(noMoreEl.text()).toBe('false');
416425
await waitForTime(1000);
417426
expect(loadingEl.text()).toBe('false');
427+
expect(reloadingEl.text()).toBe('false');
418428
expect(dataListEl.text()).toBe('10');
419429

420430
for (let index = 1; index <= 9; index++) {
421431
await loadMoreEl.trigger('click');
422432
expect(loadingEl.text()).toBe('true');
423433
expect(loadingMoreEl.text()).toBe('true');
434+
expect(reloadingEl.text()).toBe('false');
424435
await waitForTime(1000);
425436
expect(loadingEl.text()).toBe('false');
426437
expect(loadingMoreEl.text()).toBe('false');
438+
expect(reloadingEl.text()).toBe('false');
427439
expect(dataListEl.text()).toBe(`${10 + index * 10}`);
428440
expect(noMoreEl.text()).toBe(`${index === 9}`);
429441
}

‎src/__tests__/pagination.test.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -375,6 +375,7 @@ describe('usePagination', () => {
375375
current,
376376
pageSize,
377377
totalPage,
378+
reloading,
378379
reload,
379380
} = usePagination<NormalMockDataType>(normalApi);
380381
return () => (
@@ -384,6 +385,7 @@ describe('usePagination', () => {
384385
<div class="current">{current.value}</div>
385386
<div class="pageSize">{pageSize.value}</div>
386387
<div class="totalPage">{totalPage.value}</div>
388+
<div class="reloading">{`${reloading.value}`}</div>
387389
<div class="reload" onClick={() => reload()} />
388390
<div class="next" onClick={() => (current.value = ++_current)} />
389391
</div>
@@ -397,13 +399,16 @@ describe('usePagination', () => {
397399
const currentEl = wrapper.find('.current');
398400
const pageSizeEl = wrapper.find('.pageSize');
399401
const totalPageEl = wrapper.find('.totalPage');
402+
const reloadingEl = wrapper.find('.reloading');
400403
const reloadEl = wrapper.find('.reload');
401404
const nextEl = wrapper.find('.next');
402405

403406
await waitForTime(1000);
404407
for (let index = 0; index < 100; index++) {
405408
await nextEl.trigger('click');
409+
expect(reloadingEl.text()).toBe('false');
406410
await waitForTime(1000);
411+
expect(reloadingEl.text()).toBe('false');
407412
expect(paramsEl.text()).toBe(`[{"current":${_current},"pageSize":10}]`);
408413
expect(totalEl.text()).toBe('100');
409414
expect(currentEl.text()).toBe(`${_current}`);
@@ -412,8 +417,10 @@ describe('usePagination', () => {
412417
}
413418

414419
await reloadEl.trigger('click');
420+
expect(reloadingEl.text()).toBe('true');
415421
_current = 1;
416422
await waitForTime(1000);
423+
expect(reloadingEl.text()).toBe('false');
417424
expect(paramsEl.text()).toBe(`[{"current":${_current},"pageSize":10}]`);
418425
expect(totalEl.text()).toBe('100');
419426
expect(currentEl.text()).toBe(`${_current}`);
@@ -422,7 +429,9 @@ describe('usePagination', () => {
422429

423430
for (let index = 0; index < 100; index++) {
424431
await nextEl.trigger('click');
432+
expect(reloadingEl.text()).toBe('false');
425433
await waitForTime(1000);
434+
expect(reloadingEl.text()).toBe('false');
426435
expect(paramsEl.text()).toBe(`[{"current":${_current},"pageSize":10}]`);
427436
expect(totalEl.text()).toBe('100');
428437
expect(currentEl.text()).toBe(`${_current}`);

‎src/useLoadMore.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export interface LoadMoreResult<R, P extends unknown[], LR extends unknown[]>
2020
noMore: Ref<boolean>;
2121
loadingMore: Ref<boolean>;
2222
refreshing: Ref<boolean>;
23+
reloading: Ref<boolean>;
2324
loadMore: () => void;
2425
reload: () => void;
2526
refresh: () => void;
@@ -109,6 +110,7 @@ function useLoadMore<R, P extends unknown[], FR, LR extends unknown[]>(
109110

110111
const refreshing = ref(false);
111112
const loadingMore = ref(false);
113+
const reloading = ref(false);
112114
const initailIncreaseQueryKey = 0;
113115
const increaseQueryKey = ref(initailIncreaseQueryKey);
114116
const {
@@ -195,13 +197,15 @@ function useLoadMore<R, P extends unknown[], FR, LR extends unknown[]>(
195197
refreshing.value = false;
196198
};
197199

198-
const reload = () => {
200+
const reload = async () => {
201+
reloading.value = true;
199202
reset();
200203
increaseQueryKey.value = initailIncreaseQueryKey;
201204
latestData.value = undefined;
202205
const [, ...restParams] = params.value;
203206
const mergerParams = [undefined, ...restParams] as any;
204-
run(...mergerParams);
207+
await run(...mergerParams);
208+
reloading.value = false;
205209
};
206210

207211
const cancel = () => {
@@ -217,6 +221,7 @@ function useLoadMore<R, P extends unknown[], FR, LR extends unknown[]>(
217221
noMore,
218222
loadingMore,
219223
refreshing,
224+
reloading,
220225
run,
221226
reload,
222227
loadMore,

‎src/usePagination.ts

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { computed, inject, Ref } from 'vue';
1+
import { computed, inject, ref, Ref } from 'vue';
22
import {
33
BaseOptions,
44
FormatOptions,
@@ -19,6 +19,7 @@ export interface PaginationResult<R, P extends unknown[]>
1919
pageSize: Ref<number>;
2020
total: Ref<number>;
2121
totalPage: Ref<number>;
22+
reloading: Ref<boolean>;
2223
changeCurrent: (current: number) => void;
2324
changePageSize: (pageSize: number) => void;
2425
reload: () => void;
@@ -129,10 +130,15 @@ function usePagination<R, P extends unknown[], FR>(
129130
paging({ [pageSizeKey]: pageSize });
130131
};
131132

132-
const reload = () => {
133+
const reloading = ref(false);
134+
const reload = async () => {
133135
const { defaultParams, manual } = finallyOptions;
134136
reset();
135-
!manual && run(...defaultParams);
137+
if (!manual) {
138+
reloading.value = true;
139+
await run(...defaultParams);
140+
reloading.value = false;
141+
}
136142
};
137143

138144
const total = computed<number>(() => get(data.value, totalKey, 0));
@@ -163,6 +169,7 @@ function usePagination<R, P extends unknown[], FR>(
163169
pageSize,
164170
total,
165171
totalPage,
172+
reloading,
166173
run,
167174
changeCurrent,
168175
changePageSize,

‎src/useRequest.ts

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Ref, ref } from 'vue';
12
import {
23
BaseOptions,
34
FormatOptions,
@@ -10,6 +11,7 @@ import { IService } from './core/utils/types';
1011

1112
export interface RequestResult<R, P extends unknown[]>
1213
extends Omit<BaseResult<R, P>, 'reset'> {
14+
reloading: Ref<boolean>;
1315
reload: () => void;
1416
}
1517
function useRequest<R, P extends unknown[] = any>(
@@ -33,15 +35,21 @@ function useRequest<R, P extends unknown[], FR>(
3335
(options ?? {}) as any,
3436
);
3537

36-
const reload = () => {
38+
const reloading = ref(false);
39+
const reload = async () => {
3740
const { defaultParams = ([] as unknown) as P, manual } = options!;
3841
reset();
39-
!manual && run(...defaultParams);
42+
if (!manual) {
43+
reloading.value = true;
44+
await run(...defaultParams);
45+
reloading.value = false;
46+
}
4047
};
4148

4249
return {
4350
reload,
4451
run,
52+
reloading,
4553
...rest,
4654
};
4755
}

0 commit comments

Comments
 (0)