fix #3

Author: xlorne

README.md

@@ -306,6 +306,61 @@ const MicroComponentTest = () => {
 
 export default MicroComponentTest;
 ```
+
+### 网络请求
+```
+import React from "react";
+import Space from "@/components/Space";
+//@ts-ignore
+import {HttpClient,Response} from "@codingapi/ui-framework";
+
+const httpClient = new HttpClient(10000,{
+    success:(msg:string)=>{
+        console.log('success',msg);
+    },
+    error:(msg:string)=>{
+        console.log('error',msg);
+    },
+});
+
+const HttpTest = ()=>{
+
+    const [url, setUrl] = React.useState('/api/products');
+
+    const handlerGet = ()=>{
+        httpClient.get(url).then((res:Response)=>{
+            const json = JSON.stringify(res);
+            console.log(json);
+            alert(json);
+        })
+    }
+
+    return (
+        <>
+            <div
+                style={{
+                    textAlign: 'center'
+                }}
+            >
+                <h1>Http Test </h1>
+            </div>
+            <Space>
+                url:
+                <input
+                    value={url}
+                    onChange={(e) => {
+                        setUrl(e.target.value);
+                    }}/>
+                <button onClick={handlerGet}>get</button>
+            </Space>
+        </>
+    )
+}
+
+export default HttpTest;
+
+```
+
 更多实例参考: https://github.com/codingapi/ui-framework/tree/main/playground
 
 ## 主要特性
@@ -314,6 +369,7 @@ export default MicroComponentTest;
 - 事件总线：用于组件间通信
 - 访问控制：用于权限管理
 - 微前端动态组件：支持动态加载和卸载组件
+- 网络请求：封装了 HttpClient，支持 GET、POST、PUT、DELETE 等请求方式
 
 ## 开发
 

playground/src/App.tsx

@@ -4,6 +4,7 @@ import ComponentBusTest from "@/components/ComponentBusTest";
 import EventBusTest from "@/components/EventBusTest";
 import MicroComponentTest from "@/components/MicroComponentTest";
 import Base64Test from "@/components/Base64Test";
+import HttpTest from "@/components/HttpTest";
 
 const App = () => {
 
@@ -18,6 +19,7 @@ const App = () => {
             <EventBusTest/>
             <MicroComponentTest/>
             <Base64Test/>
+            <HttpTest/>
         </div>
     );
 }

playground/src/components/HttpTest.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import Space from "@/components/Space";
+//@ts-ignore
+import {HttpClient,Response} from "@codingapi/ui-framework";
+
+const httpClient = new HttpClient(10000,{
+    success:(msg:string)=>{
+        console.log('success',msg);
+    },
+    error:(msg:string)=>{
+        console.log('error',msg);
+    },
+});
+
+const HttpTest = ()=>{
+
+    const [url, setUrl] = React.useState('/api/products');
+
+    const handlerGet = ()=>{
+        httpClient.get(url).then((res:Response)=>{
+            const json = JSON.stringify(res);
+            console.log(json);
+            alert(json);
+        })
+    }
+
+    return (
+        <>
+            <div
+                style={{
+                    textAlign: 'center'
+                }}
+            >
+                <h1>Http Test </h1>
+            </div>
+            <Space>
+                url:
+                <input
+                    value={url}
+                    onChange={(e) => {
+                        setUrl(e.target.value);
+                    }}/>
+                <button onClick={handlerGet}>get</button>
+            </Space>
+        </>
+    )
+}
+
+export default HttpTest;

src/utils/http.ts

@@ -7,6 +7,14 @@ export interface MessageBox {
     error: (msg: string) => void;
 }
 
+export type Response = {
+    success: boolean;
+    errCode?: string;
+    errMessage?: string;
+    data?: any;
+    total?: number;
+}
+
 export class HttpClient {
     private readonly api: AxiosInstance;
     private readonly messageBox: MessageBox;
@@ -90,23 +98,47 @@ export class HttpClient {
         )
     }
 
-    public get = async (url: string, params?: any) => {
+    public get = async (url: string, params?: any): Promise<Response> => {
         try {
             const response = await this.api.get(url, {
                 params
             });
-            return response.data;
+            return response.data as Response;
+        } catch (e) {
+            return {
+                success: false,
+            }
+        }
+    }
+
+    public put = async (url: string, data: any): Promise<Response> => {
+        try {
+            const response = await this.api.put(url, data);
+            return response.data as Response;
+        } catch (e) {
+            return {
+                success: false,
+            }
+        }
+    }
+
+    public delete = async (url: string, params?: any): Promise<Response> => {
+        try {
+            const response = await this.api.delete(url, {
+                params
+            });
+            return response.data as Response;
         } catch (e) {
             return {
                 success: false,
             }
         }
     }
 
-    public post = async (url: string, data: any) => {
+    public post = async (url: string, data: any): Promise<Response> => {
         try {
             const response = await this.api.post(url, data);
-            return response.data;
+            return response.data as Response;
         } catch (e) {
             return {
                 success: false,
@@ -118,7 +150,7 @@ export class HttpClient {
     public page = async (url: string, params: any, sort: any, filter: any, match: {
         key: string,
         type: string
-    }[]) => {
+    }[]): Promise<Response> => {
         const base64Match = Base64Utils.stringToBase64(JSON.stringify(match));
         const base64Sort = Base64Utils.stringToBase64(JSON.stringify(sort));
         const base64Filter = Base64Utils.stringToBase64(JSON.stringify(filter));