From 2069d53e9be24adec3c8d6717fd7317555bd9a52 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 02 七月 2024 23:02:51 +0800
Subject: [PATCH] 高级表单优化
---
src/views/demo/feat/request-demo/index.vue | 85 +++++++++++++++++++++++++++++++++++-------
1 files changed, 70 insertions(+), 15 deletions(-)
diff --git a/src/views/demo/feat/request-demo/index.vue b/src/views/demo/feat/request-demo/index.vue
index eb01a23..4bf5647 100644
--- a/src/views/demo/feat/request-demo/index.vue
+++ b/src/views/demo/feat/request-demo/index.vue
@@ -1,23 +1,78 @@
<template>
- <div class="request-box">
- <a-button @click="handleClick" type="primary"> 鐐瑰嚮浼氶噸鏂板彂璧疯姹�5娆� </a-button>
- <p>鎵撳紑娴忚鍣ㄧ殑network闈㈡澘锛屽彲浠ョ湅鍒板彂鍑轰簡鍏璇锋眰</p>
- </div>
+ <PageWrapper title="閿欒閲嶈瘯">
+ <Row :gutter="16">
+ <Col :span="8">
+ <Card title="Axios 閿欒閲嶈瘯">
+ <a-button @click="handleClick" type="primary"> 鐐瑰嚮浼氶噸鏂板彂璧疯姹�5娆� </a-button>
+ <div class="mt-4">鎵撳紑娴忚鍣ㄧ殑 network 闈㈡澘锛屽彲浠ョ湅鍒板彂鍑轰簡鍏璇锋眰</div>
+ </Card>
+ </Col>
+ <Col :span="8">
+ <Card title="hooks 閿欒閲嶈瘯">
+ <Space>
+ <a-button @click="restRun" type="primary" :disabled="loading">
+ 浣跨敤 hooks 鍙戣捣閲嶈瘯
+ </a-button>
+ <a-button @click="restCancel">鍙栨秷</a-button>
+ </Space>
+ <div class="mt-4"
+ >閿欒閲嶈瘯锛宺etryInterval 濡傛灉涓嶈缃紝榛樿閲囩敤绠�鏄撶殑鎸囨暟閫�閬跨畻娉曪紝鍙� 1000 * 2 **
+ retryCount锛屼篃灏辨槸绗竴娆￠噸璇曠瓑寰� 2s锛岀浜屾閲嶈瘯绛夊緟 4s锛屼互姝ょ被鎺紝濡傛灉澶т簬 30s锛屽垯鍙� 30s
+ </div>
+ </Card>
+ </Col>
+ </Row>
+ </PageWrapper>
</template>
+
<script lang="ts" setup>
- import { testRetry } from '/@/api/sys/user';
+ import { PageWrapper } from '@/components/Page';
+ import { useRequest } from '@vben/hooks';
+ import { testRetry } from '@/api/sys/user';
+ import { Card, Col, Row, Space, message } from 'ant-design-vue';
+
// @ts-ignore
const handleClick = async () => {
await testRetry();
};
+
+ function apiError() {
+ return new Promise<void>((resolve, reject) => {
+ setTimeout(() => {
+ reject(`TimeError: ${Date.now()}`);
+ }, 1300);
+ });
+ }
+
+ // PS >> useRequest 浠ｆ浛涓嶄簡API(濡�: axios)锛屼絾瀹冧娇寰楀紑鍙戞洿鐏垫椿
+
+ // 浣垮緱閲嶈瘯涓嶅啀灞�闄愪簬 API 璇锋眰锛屽吋瀹规墿灞曞拰缁х画灏佽
+ // 缁х画灏佽锛屽锛歶seRequest 绗竴涓弬鏁帮紝鍙互宓屽澶氫釜寮傛鍑芥暟
+ // 鍏煎鎵╁睍锛屽锛氬悓鏃跺惎鐢ㄩ槻鎶栥�佽妭娴併�乴oading鐘舵�併�佸彇娑堝紓姝ョ瓑鍔熻兘
+
+ // eg. 浠呬粎涓轰簡璁℃暟锛宺estRun銆乺estCancel 鍏跺疄閮藉彲鐪佺暐
+ let i = 0;
+ const { loading, run, cancel } = useRequest(apiError, {
+ manual: true,
+ retryCount: 5,
+ // retryInterval: undefined, // 閲嶈瘯鏃堕棿闂撮殧锛屽崟浣嶄负姣
+ onError(error) {
+ if (i === 0) {
+ message.error(`鍙戠幇閿欒`);
+ i++;
+ }
+ const now = Date.now();
+ message.error(`绗� ${i++} 娆￠噸璇�, Time:${now}`);
+ console.log(`Time: ${now}, Error: ${error}`);
+ },
+ });
+ const restRun = () => {
+ i = 0;
+ run();
+ };
+ const restCancel = () => {
+ i = 0;
+ cancel();
+ message.info('宸插彇娑�');
+ };
</script>
-
-<style lang="less">
- .request-box {
- margin: 50px;
- }
-
- p {
- margin-top: 10px;
- }
-</style>
--
Gitblit v1.9.3