Skip to content

Commit 7f550f5

Browse files
ChenlingasMxChenlingasMx
authored
Merge pull request #220 from yaob421123/master
fix(Login): swr替换成@kkt/request
2 parents 3d8f829 + 9bc190a commit 7f550f5

File tree

9 files changed

+162
-56
lines changed

9 files changed

+162
-56
lines changed

‎examples/base/package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,16 @@
2424
"@swc/core": ">=1.3.55"
2525
},
2626
"dependencies": {
27-
"@kkt/pro": "^1.0.10",
28-
"@uiw-admin/authorized": "6.1.7",
29-
"@uiw-admin/basic-layouts": "6.1.7",
30-
"@uiw-admin/components": "6.1.7",
31-
"@uiw-admin/config": "6.1.7",
32-
"@uiw-admin/document-title": "6.1.7",
33-
"@uiw-admin/exceptions": "6.1.7",
34-
"@uiw-admin/layout-tabs": "6.1.7",
35-
"@uiw-admin/user-login": "6.1.7",
36-
"@uiw-admin/utils": "6.1.7",
27+
"@kkt/pro": "^1.0.13",
28+
"@uiw-admin/authorized": "6.1.6",
29+
"@uiw-admin/basic-layouts": "6.1.6",
30+
"@uiw-admin/components": "6.1.6",
31+
"@uiw-admin/config": "6.1.6",
32+
"@uiw-admin/document-title": "6.1.6",
33+
"@uiw-admin/exceptions": "6.1.6",
34+
"@uiw-admin/layout-tabs": "6.1.6",
35+
"@uiw-admin/user-login": "6.1.6",
36+
"@uiw-admin/utils": "6.1.6",
3737
"@uiw/reset.css": "~1.0.5",
3838
"axios": "^0.27.0",
3939
"classnames": "~2.3.1",

‎examples/website/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"uiw": "^4.21.26"
4343
},
4444
"devDependencies": {
45-
"@kkt/pro": "^1.0.10",
45+
"@kkt/pro": "^1.0.13",
4646
"@types/react-test-renderer": "17.0.1",
4747
"hast": "^1.0.0",
4848
"rehype-rewrite": "^3.0.6",

‎examples/website/src/pages/request/README.md‎

Lines changed: 98 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,119 @@
11
# 网络请求
2-
简介
3-
对于中后台应用来说，很大一部分工作就在于请求后端的 CRUD 的接口，为进一步降低用户对请求层的感知，我们移除了默认生成的 utils/request.ts 文件，改成通过配置化的方式暴露给开发者做请求的配置和增强处理；同时通过业务总结出一套标准的接口结构规范，并提供统一的接口解析、错误处理的能力；后续将持续完善可配置项、提供垂直场景如列表、登录失效等解决方案。
2+
3+
对于中后台应用来说，很大一部分工作就在于请求后端的 CRUD 的接口，为进一步降低用户对请求层的感知，我们集成了接口请求方案。同时通过业务总结出一套标准的接口结构规范，并提供统一的接口解析、错误处理的能力。
4+
5+
## @kkt/request
6+
7+
kkt内置请求方案。配置 `queryClient`开启。 `@kkt/request` 内置了 `react-query`（和 [`@tanstack/react-query`](https://npmjs.com/@tanstack/react-query)<!--rehype:target=__blank--> 是同一个）请求方案。更多 API 方法请查看 [react-query 官方文档](https://tanstack.com/query/latest)。
8+
9+
**`kktp`配置文件**
10+
11+
```ts
12+
// .kktprc.ts
13+
export default {
14+
queryClient: true
15+
}
16+
```
17+
18+
```js
19+
import { useReactQuery, useReactMutation, queryClient, fetchFn } from '@kkt/request';
20+
// OR
21+
import { useReactQuery, useReactMutation, queryClient, fetchFn } from '@kkt/pro';
22+
```
23+
24+
**useReactQuery**
25+
26+
主要用于**默认**触发请求数据，默认 `GET` 请求，变更使用 `method="POST"` 参数配置
27+
28+
```jsx
29+
useReactQuery({
30+
queryKey: ['user', userId],
31+
url: `/api/user/list?id=${userId}`
32+
});
33+
```
34+
<!--rehype:style=background:#00de2247;border: 0;-->
35+
36+
👆👆👆👆 上面是**推荐**使用 👆👆👆👆👆
37+
38+
```jsx
39+
import { fetchFn, useReactQuery } from '@kkt/request';
40+
41+
useReactQuery({ queryKey: ['user'], url: '/api/user/list' });
42+
useReactQuery({ queryKey: ['user'], url: '/api/user/list', method: 'POST' });
43+
useReactQuery({ queryKey: ['user', userId], queryFn: () => fetchFn(`/api/user/list?id=${userId}`) });
44+
useReactQuery({
45+
queryKey: ['user', userId],
46+
queryFn: async () => {
47+
return fetchFn(`/api/user/list?id=${userId}`);
48+
},
49+
});
50+
useReactQuery({
51+
queryKey: ['user', userId],
52+
queryFn: ({ queryKey }) => fetchFn(`/api/user/list?id=${queryKey[1]}`);,
53+
});
54+
useReactQuery({
55+
queryKey: ['user'],
56+
url: '/api/user/list',
57+
initialData: [....],
58+
});
59+
60+
const { isInitialLoading, isError, data, error, refetch, isFetching } = useQuery(...)
61+
```
62+
63+
示例
64+
65+
```javascript
66+
import { useReactQuery } from '@kkt/request';
67+
68+
export default function HomePage() {
69+
const { isLoading, isError, data } = useReactQuery({
70+
url: `/api/user/list`,
71+
queryKey: ['user-list'],
72+
});
73+
74+
return (
75+
<div>
76+
<p className="title">x react-query</p>
77+
{isError && <p>请求 API 错误 ...</p>}
78+
{isLoading && <p>Loading ...</p>}
79+
{data && <p>现在有 {data.stargazers_count} 颗星！</p>}
80+
</div>
81+
);
82+
}
83+
```
84+
85+
更多参数及实例才考[@kkt/request](https://kktjs.github.io/kkt-pro/#/doc/request)
86+
487
## request
588

6-
系统的请求基于axios进行了二次封装，参见[axios](https://axios-http.com/)
89+
`@uiw-admin/utils` 内置`request`方法。系统的请求基于axios进行了二次封装，参见[axios](https://axios-http.com/)
790

8-
## 方法
91+
```js
92+
import { request } from "@uiw-admin/utils"
93+
```
94+
95+
**方法**
996
基于restful规范，提供了2个方法：
1097
- get 获取服务端数据，参数拼接在url上，以 query string 方式发送给后端
1198
- post 新增数据，参数以body形式发送给后端
1299

13100

14-
## 参数
101+
**参数**
15102

16103
| 参数 | 说明 | 类型 | 默认值 |
17104
| :------ | :------- | :------------- | :----- |
18105
| url | 请求地址 | string | - |
19106
| options | 请求配置，即axios的配置， | Options | - |
20107

21-
### Options
108+
**Options**
22109
| 参数 | 说明 | 类型 | 默认值 |
23110
| :------ | :------- | :------------- | :----- |
24111
| body | 请求传递给后端的参数 | any | - |
25112
| requestType | 数据格式 | 'form' 或 'json' 或 'urlencoded' | - |
26113

27-
## 调用方式
28-
### ✨配和swr调用
114+
**调用方式**
115+
116+
**✨配和swr调用**
29117
> 如果已全局配置过swr,可不用传入request
30118
31119
```tsx
@@ -55,7 +143,8 @@ export default const Index = () => {
55143
}
56144

57145
```
58-
### 在rematch中使用
146+
**在rematch中使用**
147+
59148
> 在servers/index.js中
60149
```ts
61150
import { request } from "@uiw-admin/utils"

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@
9494
"lint-staged": "~12.5.0",
9595
"prettier": "^2.7.0",
9696
"recursive-readdir-files": "1.1.2",
97-
"tsbb": "^4.1.4",
97+
"tsbb": "^4.1.5",
9898
"webpack-bundle-analyzer": "~4.5.0"
9999
},
100100
"resolutions": {

‎packages/basic-layouts/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@
4444
},
4545
"dependencies": {
4646
"@babel/runtime": "~7.21.0",
47-
"@kkt/pro": "^1.0.10",
48-
"@uiw-admin/document-title": "6.1.7",
47+
"@kkt/pro": "^1.0.13",
48+
"@uiw-admin/document-title": "6.1.6",
4949
"classnames": "2.3.1",
5050
"pinyin": "~2.11.2"
5151
},

‎packages/components/src/index.tsx‎ renamed to ‎packages/components/src/index.ts‎

File renamed without changes.

‎packages/user-login/README.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const UserLayout = () => {
3232
sessionStorage.setItem("token", data.token)
3333
sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
3434
} else {
35-
Notify.error({ title: "错误通知", description: data.message || "请求失败" })
35+
Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
3636
}
3737
}}
3838
/>
@@ -61,7 +61,7 @@ const UserLayout = () => {
6161
sessionStorage.setItem("token", data.token)
6262
sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
6363
} else {
64-
Notify.error({ title: "错误通知", description: data.message || "请求失败" })
64+
Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
6565
}
6666
}}
6767
/>
@@ -95,7 +95,7 @@ const UserLayout = () => {
9595
sessionStorage.setItem("token", data.token)
9696
sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
9797
} else {
98-
Notify.error({ title: "错误通知", description: data.message || "请求失败" })
98+
Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
9999
}
100100
}}
101101
/>
@@ -128,7 +128,7 @@ const UserLayout = () => {
128128
sessionStorage.setItem("token", data.token)
129129
sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
130130
} else {
131-
Notify.error({ title: "错误通知", description: data.message || "请求失败" })
131+
Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
132132
}
133133
}}
134134
/>
@@ -158,7 +158,7 @@ const UserLayout = () => {
158158
sessionStorage.setItem("token", data.token)
159159
sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
160160
} else {
161-
Notify.error({ title: "错误通知", description: data.message || "请求失败" })
161+
Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
162162
}
163163
}}
164164
/>
@@ -202,7 +202,7 @@ const UserLayout = () => {
202202
sessionStorage.setItem("token", data.token)
203203
sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
204204
} else {
205-
Notify.error({ title: "错误通知", description: data.message || "请求失败" })
205+
Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
206206
}
207207
}}
208208
/>
@@ -247,7 +247,7 @@ const UserLayout = () => {
247247
sessionStorage.setItem("token", data.token)
248248
sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
249249
} else {
250-
Notify.error({ title: "错误通知", description: data.message || "请求失败" })
250+
Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
251251
}
252252
}}
253253
/>
@@ -285,7 +285,7 @@ const UserLayout = () => {
285285
sessionStorage.setItem("token", data.token)
286286
sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
287287
} else {
288-
Notify.error({ title: "错误通知", description: data.message || "请求失败" })
288+
Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
289289
}
290290
}}
291291
/>
@@ -317,7 +317,7 @@ const UserLayout = () => {
317317
sessionStorage.setItem("token", data.token)
318318
sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
319319
} else {
320-
Notify.error({ title: "错误通知", description: data.message || "请求失败" })
320+
Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
321321
}
322322
}}
323323
/>
@@ -347,7 +347,7 @@ const UserLayout = () => {
347347
sessionStorage.setItem("token", data.token)
348348
sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
349349
} else {
350-
Notify.error({ title: "错误通知", description: data.message || "请求失败" })
350+
Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
351351
}
352352
}}
353353
/>
@@ -377,7 +377,7 @@ const UserLayout = () => {
377377
sessionStorage.setItem("token", data.token)
378378
sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
379379
} else {
380-
Notify.error({ title: "错误通知", description: data.message || "请求失败" })
380+
Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
381381
}
382382
}}
383383
/>

‎packages/user-login/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
},
4646
"dependencies": {
4747
"@uiw-admin/document-title": "6.1.7",
48+
"@kkt/request": "^1.0.13",
4849
"classnames": "^2.3.1"
4950
},
5051
"devDependencies": {
@@ -55,7 +56,6 @@
5556
"@uiw-admin/utils": "6.1.7",
5657
"react": "18.2.0",
5758
"react-dom": "18.2.0",
58-
"swr": "^1.3.0",
5959
"uiw": "^4.21.26"
6060
}
6161
}

0 commit comments

Comments
 (0)