client-mock

examples/client-mock/frontend/src/index.ts

@@ -1,58 +1,7 @@
 import { HttpClient, TsrpcError } from 'tsrpc-browser';
+import { client } from './models/client';
 import { serviceProto } from './shared/protocols/serviceProto';
 
-// This is a demo code file
-// Feel free to modify or clear it
-
-// Create Client
-let client = new HttpClient(serviceProto, {
-    server: 'http://127.0.0.1:3000',
-    logger: console
-});
-
-// Mock 后端逻辑临时存储数据
-let data: {
-    content: string,
-    time: Date
-}[] = [];
-
-// Client Mock
-client.flows.preCallApiFlow.push(v => {
-    // 模拟网络错误：20% 网络错误概率
-    if (Math.random() < 0.2) {
-        // 模拟返回
-        v.return = {
-            isSucc: false,
-            err: new TsrpcError('模拟网络错误: ' + v.apiName, {
-                type: TsrpcError.Type.NetworkError
-            })
-        }
-        return v;
-    }
-
-    // 模拟后端逻辑， Mock 返回结果，实际不请求后端
-    client.logger?.log('[MockReq]', v.apiName, v.req);
-    if (v.apiName === 'AddData') {
-        let time = new Date();
-        data.unshift({ content: v.req.content, time: time })
-        v.return = {
-            isSucc: true,
-            res: { time: time }
-        }
-    }
-    else if (v.apiName === 'GetData') {
-        v.return = {
-            isSucc: true,
-            res: {
-                data: data
-            }
-        }
-    }
-    client.logger?.log('[MockRes]', v.apiName, v.return);
-
-    return v;
-})
-
 // Reload message list
 async function loadList() {
     let ret = await client.callApi('GetData', {});

examples/client-mock/frontend/src/models/client.ts

@@ -0,0 +1,22 @@
+import { HttpClient } from "tsrpc-browser";
+import { serviceProto } from "../shared/protocols/serviceProto";
+import { mockApis } from "./mockApis";
+
+// Global Client
+export const client = new HttpClient(serviceProto, {
+    server: 'http://127.0.0.1:3000',
+    logger: console
+});
+
+// Client Mock
+client.flows.preCallApiFlow.push(v => {
+    // 有对应的 MockAPI 则 Mock，否则请求真实后端
+    let mockApi = mockApis[v.apiName];
+    if (mockApi) {
+        client.logger?.log('[MockReq]', v.apiName, v.req);
+        v.return = mockApi!(v.req as any);
+        client.logger?.log('[MockRes]', v.apiName, v.return);
+    }
+
+    return v;
+})

examples/client-mock/frontend/src/models/mockApis.ts

@@ -0,0 +1,30 @@
+// 模拟后端，Mock API 请求
+
+import { ApiReturn } from "tsrpc-browser";
+import { ServiceType } from "../shared/protocols/serviceProto";
+
+// 临时存储数据
+const data: {
+    content: string,
+    time: Date
+}[] = [];
+
+export const mockApis: { [K in keyof ServiceType['api']]?: (req: ServiceType['api'][K]['req']) => ApiReturn<ServiceType['api'][K]['res']> } = {
+    AddData: req => {
+        let time = new Date();
+        data.unshift({ content: req.content, time: time })
+        return {
+            isSucc: true,
+            res: { time: time }
+        }
+    },
+
+    GetData: req => {
+        return {
+            isSucc: true,
+            res: {
+                data: data
+            }
+        }
+    }
+};

examples/client-mock/frontend/tsconfig.json

@@ -15,7 +15,7 @@
     "strict": true,
     "jsx": "react-jsx",
     "sourceMap": true,
-    "isolatedModules": true
+    "isolatedModules": false
   },
   "include": [
     "src"