优化 usePager 写法

.vscode/template.code-snippets

@@ -97,8 +97,12 @@
 			"",
 			"const listViewRef = ref<ClListViewComponentPublicInstance | null>(null);",
 			"",
-			"const { refresh, listView, loading, loadMore } = usePager((params) => {",
-			"    return request({ $1 });",
+			"const { refresh, listView, loading, loadMore } = usePager((params, { render }) => {",
+			"    request({ $1 }).then((res) => {",
+			"        if (res != null) {",
+			"            render(res);",
+			"        }",
+			"    });",
 			"});",
 			"",
 			"async function onPull() {",

cool/hooks/pager.ts

@@ -16,7 +16,7 @@ type PagerResponse = {
 };
 
 // 分页回调函数类型
-type PagerCallback = (params: UTSJSONObject) => Promise<any>;
+type PagerCallback = (params: UTSJSONObject, ctx: Pager) => void | Promise<void>;
 
 // 分页器类
 export class Pager {
@@ -48,52 +48,46 @@ export class Pager {
 		this.loading.value = false;
 	}
 
+	// 渲染数据
+	public render = (res: any) => {
+		const { list, pagination } = parse<PagerResponse>(res)!;
+
+		// 更新分页信息
+		this.page = pagination.page;
+		this.size = pagination.size;
+		this.total = pagination.total;
+
+		// 更新列表数据
+		if (this.params.page == 1) {
+			this.list.value = [...list];
+		} else {
+			this.list.value.push(...list);
+		}
+
+		// 更新加载完成状态
+		this.finished.value = this.list.value.length >= this.total;
+
+		// 完成加载
+		this.done();
+	};
+
 	// 刷新数据
-	public refresh = async (params: UTSJSONObject): Promise<UTSJSONObject> => {
-		return new Promise((resolve, reject) => {
-			// 合并参数
-			this.params = assign(this.params, params);
-
-			// 构建请求参数
-			const data = {
-				page: this.page,
-				size: this.size,
-				...this.params
-			};
-
-			// 设置加载状态
-			this.loading.value = true;
-
-			// 发起请求
-			this.cb!(data)
-				.then((res) => {
-					// 解析响应数据
-					const { list, pagination } = parse<PagerResponse>(res)!;
-
-					// 更新分页信息
-					this.page = pagination.page;
-					this.size = pagination.size;
-					this.total = pagination.total;
-
-					// 更新列表数据
-					if (data.page == 1) {
-						this.list.value = [...list];
-					} else {
-						this.list.value.push(...list);
-					}
-
-					// 更新加载完成状态
-					this.finished.value = this.list.value.length >= this.total;
-
-					resolve(res);
-				})
-				.catch((err) => {
-					reject(err);
-				})
-				.finally(() => {
-					this.loading.value = false;
-				});
-		});
+	public refresh = async (params: UTSJSONObject) => {
+		// 合并参数
+		this.params = assign(this.params, params);
+
+		// 构建请求参数
+		const data = {
+			page: this.page,
+			size: this.size,
+			...this.params
+		};
+
+		// 开始加载
+		this.loading.value = true;
+
+		// 发起请求
+		await this.cb!(data, this);
 	};
 
 	// 加载更多数据

pages/demo/data/list-view-refresh.uvue

@@ -43,68 +43,66 @@ const listViewRef = ref<ClListViewComponentPublicInstance | null>(null);
 
 let id = 0;
 
-const { refresh, list, listView, loading, loadMore } = usePager((params) => {
-	return new Promise((resolve) => {
-		// 模拟请求
-		setTimeout(() => {
-			resolve({
-				list: [
-					{
-						id: id++,
-						title: "春日樱花盛开时节，粉色花瓣如诗如画般飘洒",
-						image: "https://unix.cool-js.com/images/demo/1.jpg"
-					},
-					{
-						id: id++,
-						title: "夕阳西下的海滩边，金色阳光温柔地洒在波光粼粼的海面上，构成令人心旷神怡的日落美景",
-						image: "https://unix.cool-js.com/images/demo/2.jpg"
-					},
-					{
-						id: id++,
-						title: "寒冬腊月时分，洁白雪花纷纷扬扬地覆盖着整个世界，感受冬日的宁静与美好",
-						image: "https://unix.cool-js.com/images/demo/3.jpg"
-					},
-					{
-						id: id++,
-						title: "都市夜景霓虹闪烁，五彩斑斓光芒照亮城市营造梦幻般景象",
-						image: "https://unix.cool-js.com/images/demo/5.jpg"
-					},
-					{
-						id: id++,
-						title: "云雾缭绕的山间风光如诗如画让人心旷神怡，微风轻抚树梢带来阵阵清香，鸟儿在林间自由歌唱",
-						image: "https://unix.cool-js.com/images/demo/6.jpg"
-					},
-					{
-						id: id++,
-						title: "古老建筑与现代摩天大楼交相辉映，传统与现代完美融合创造独特城市景观",
-						image: "https://unix.cool-js.com/images/demo/7.jpg"
-					},
-					{
-						id: id++,
-						title: "广袤田野绿意盎然风光无限，金黄麦浪在微风中轻柔摇曳，农家炊烟袅袅升起",
-						image: "https://unix.cool-js.com/images/demo/8.jpg"
-					},
-					{
-						id: id++,
-						title: "璀璨星空下银河横跨天际，繁星闪烁神秘光芒营造浪漫夜空美景",
-						image: "https://unix.cool-js.com/images/demo/9.jpg"
-					},
-					{
-						id: id++,
-						title: "雄伟瀑布从高耸悬崖飞流直下激起千层浪花，彩虹在水雾中若隐若现如梦如幻",
-						image: "https://unix.cool-js.com/images/demo/10.jpg"
-					}
-				],
-				pagination: {
-					page: params["page"],
-					size: params["size"],
-					total: 100
+const { refresh, list, listView, loading, loadMore } = usePager((params, { render }) => {
+	// 模拟请求
+	setTimeout(() => {
+		render({
+			list: [
+				{
+					id: id++,
+					title: "春日樱花盛开时节，粉色花瓣如诗如画般飘洒",
+					image: "https://unix.cool-js.com/images/demo/1.jpg"
+				},
+				{
+					id: id++,
+					title: "夕阳西下的海滩边，金色阳光温柔地洒在波光粼粼的海面上，构成令人心旷神怡的日落美景",
+					image: "https://unix.cool-js.com/images/demo/2.jpg"
+				},
+				{
+					id: id++,
+					title: "寒冬腊月时分，洁白雪花纷纷扬扬地覆盖着整个世界，感受冬日的宁静与美好",
+					image: "https://unix.cool-js.com/images/demo/3.jpg"
+				},
+				{
+					id: id++,
+					title: "都市夜景霓虹闪烁，五彩斑斓光芒照亮城市营造梦幻般景象",
+					image: "https://unix.cool-js.com/images/demo/5.jpg"
+				},
+				{
+					id: id++,
+					title: "云雾缭绕的山间风光如诗如画让人心旷神怡，微风轻抚树梢带来阵阵清香，鸟儿在林间自由歌唱",
+					image: "https://unix.cool-js.com/images/demo/6.jpg"
+				},
+				{
+					id: id++,
+					title: "古老建筑与现代摩天大楼交相辉映，传统与现代完美融合创造独特城市景观",
+					image: "https://unix.cool-js.com/images/demo/7.jpg"
+				},
+				{
+					id: id++,
+					title: "广袤田野绿意盎然风光无限，金黄麦浪在微风中轻柔摇曳，农家炊烟袅袅升起",
+					image: "https://unix.cool-js.com/images/demo/8.jpg"
+				},
+				{
+					id: id++,
+					title: "璀璨星空下银河横跨天际，繁星闪烁神秘光芒营造浪漫夜空美景",
+					image: "https://unix.cool-js.com/images/demo/9.jpg"
+				},
+				{
+					id: id++,
+					title: "雄伟瀑布从高耸悬崖飞流直下激起千层浪花，彩虹在水雾中若隐若现如梦如幻",
+					image: "https://unix.cool-js.com/images/demo/10.jpg"
 				}
-			});
+			],
+			pagination: {
+				page: params["page"],
+				size: params["size"],
+				total: 100
+			}
+		});
 
-			ui.hideLoading();
-		}, 1000);
-	});
+		ui.hideLoading();
+	}, 1000);
 });
 
 async function onPull() {

pages/template/shop/address.uvue

@@ -86,12 +86,17 @@ import type { UserAddress } from "../types";
 
 const ui = useUi();
 
-const { refresh, list, loadMore } = usePager(async (data) => {
-	return request({
+const { refresh, list, loadMore } = usePager(async (data, { render }) => {
+	await request({
 		url: "/app/user/address/page",
 		method: "POST",
 		data
 	})
+		.then((res) => {
+			if (res != null) {
+				render(res);
+			}
+		})
 		.catch((err) => {
 			ui.showToast({
 				message: (err as Response).message!