fix: parse body of fetch

vitjs · Apr 10, 2021 · dad8f24 · dad8f24
1 parent 4dc6528
commit dad8f24
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/example/src/pages/Welcome/index.tsx b/example/src/pages/Welcome/index.tsx
@@ -37,6 +37,36 @@ export default function Welcome() {
       });
   };
 
+  const helloPost = () => {
+    setData(undefined);
+    setError(undefined);
+    setLoading(true);
+    fetch('/api/hello', {
+      method: 'post',
+      body: JSON.stringify({
+        hello: 'world',
+      }),
+    })
+      .then((response) => {
+        response
+          .clone()
+          .text()
+          .then((text) => console.log('hello text:\n', text));
+        return response.json();
+      })
+      .then((json) => {
+        console.log('data', json);
+        setData(json);
+      })
+      .catch((err) => {
+        console.log('error', err);
+        setError(err);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
   const version = () => {
     setData(undefined);
     setError(undefined);
@@ -72,6 +102,7 @@ export default function Welcome() {
       <br />
       <br />
       <Button onClick={hello}>mock: hello</Button>
+      <Button onClick={helloPost}>mock: hello post</Button>
       <Button onClick={version}>mock: version</Button>
       <div style={{ width: '100%', minHeight: 100 }}>
         {loading && <div>{'loading...'}</div>}

diff --git a/example/vite.config.ts b/example/vite.config.ts
@@ -2,7 +2,7 @@ import { defineConfig } from 'vite';
 import reactRefresh from '@vitejs/plugin-react-refresh';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
-import vitApp from '../packages/vite-plugin';
+import vitApp from '../packages/vite-plugin/dist';
 import routes from './config/routes';
 
 // https://vitejs.dev/config/

diff --git a/packages/vite-plugin/src/generateFiles/mockFetch.tpl b/packages/vite-plugin/src/generateFiles/mockFetch.tpl
@@ -16,6 +16,15 @@ function qs(url) {
   );
 }
 
+function loadBody(fetchBody: any) {
+  try {
+    return JSON.parse(fetchBody);
+  } catch(error) {
+    console.log("loadBody error", error);
+    return fetchBody;
+  }
+}
+
 export default function mockFetch() {
   if (!Mock || !Mock.mock) {
     throw new Error('Mock.js is required.');
@@ -53,7 +62,7 @@ export default function mockFetch() {
               ? // 保持与 mock 定义一致的入参
                 item.template.call(this, {
                   query: qs(url),
-                  body: options?.body,
+                  body: loadBody(options?.body),
                   headers: options?.headers,
                 })
               : Mock.mock(item.template);