From 6b33714c75052e9f37d7eccf543461a4e81c4ee6 Mon Sep 17 00:00:00 2001
From: Condor Hero <love2xinwei@gmail.com>
Date: Fri, 27 Dec 2024 22:48:10 +0800
Subject: [PATCH] feat: support sync requests of XHR

---
 .../react-sample/fake/index.fake.ts           |   4 +
 .../react-sample/fake/sync-request.fake.ts    |  26 +++
 .../src/components/the-card/index.tsx         | 108 +++++++----
 .../src/components/the-nav/index.tsx          |  48 ++++-
 .../src/components/the-nav/type.ts            |  31 +++
 .../playground/react-sample/src/views/App.tsx |   2 +-
 .../src/createFakeMiddleware.ts               |   2 +-
 .../src/createHookTemplate.ts                 | 183 ++++++++++++++++++
 .../vite-plugin-fake-server/src/plugin.ts     | 128 +-----------
 .../src/shared/simulateServerResponse.mjs     | 182 +++++++++--------
 .../src/xhook/index.mjs                       |  28 ++-
 11 files changed, 492 insertions(+), 250 deletions(-)
 create mode 100644 packages/playground/react-sample/fake/sync-request.fake.ts
 create mode 100644 packages/playground/react-sample/src/components/the-nav/type.ts
 create mode 100644 packages/vite-plugin-fake-server/src/createHookTemplate.ts

diff --git a/packages/playground/react-sample/fake/index.fake.ts b/packages/playground/react-sample/fake/index.fake.ts
index 6148906..ca94628 100644
--- a/packages/playground/react-sample/fake/index.fake.ts
+++ b/packages/playground/react-sample/fake/index.fake.ts
@@ -165,4 +165,8 @@ export default defineFakeRoute([
 			res.end(body);
 		},
 	},
+	{
+		url: "/response-is-any",
+		response: "The response can not be a function." as any,
+	},
 ]);
diff --git a/packages/playground/react-sample/fake/sync-request.fake.ts b/packages/playground/react-sample/fake/sync-request.fake.ts
new file mode 100644
index 0000000..e985553
--- /dev/null
+++ b/packages/playground/react-sample/fake/sync-request.fake.ts
@@ -0,0 +1,26 @@
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
+
+import { resultSuccess } from "./nest/utils";
+
+export default defineFakeRoute({
+	url: "/sync-request",
+	/**
+	 * The sleep function for synchronous requests will block the browser's rendering.
+	 * When making a synchronous request, it is recommended to set the delay to 0.
+	 */
+	timeout: 0,
+	response: () => {
+		return resultSuccess({
+			timestamp: Date.now(),
+			status: "success",
+			code: 200,
+			message: "ok",
+			data: {
+				description: `
+				The sleep function for synchronous requests will block the browser's rendering.
+				When making a synchronous request, it is recommended to set the delay to 0.
+				`,
+			},
+		});
+	},
+});
diff --git a/packages/playground/react-sample/src/components/the-card/index.tsx b/packages/playground/react-sample/src/components/the-card/index.tsx
index a0379d4..4b383ca 100644
--- a/packages/playground/react-sample/src/components/the-card/index.tsx
+++ b/packages/playground/react-sample/src/components/the-card/index.tsx
@@ -1,9 +1,12 @@
-import type { BUTTON_LIST } from "#src/components";
+import type { Option } from "#src/components/the-nav/type";
 
 import { REQUEST_TYPE, TheLoading } from "#src/components";
 import { useEffect, useState } from "react";
 
 function getType(value: unknown) {
+	if (value === undefined) {
+		return "";
+	}
 	return Object.prototype.toString.call(value).slice(8, -1);
 }
 
@@ -15,7 +18,8 @@ export function TheCard({
 	responseType,
 	body,
 	headers,
-}: (typeof BUTTON_LIST)[number]) {
+	sync,
+}: Option) {
 	const [responseOrigin, setResponseOrigin] = useState<{ [key: string]: any }>({});
 	const [responseData, setResponseData] = useState<any>();
 	const [loading, setLoading] = useState(false);
@@ -32,33 +36,77 @@ export function TheCard({
 			: `${baseURL}${value}`.replace(":id", Math.random().toString());
 
 		if (type === REQUEST_TYPE[0]) {
-			setLoading(true);
-			const xhr = new XMLHttpRequest();
+			if (!sync) {
+				setLoading(true);
+				const xhr = new XMLHttpRequest();
 
-			if (responseType === "xml") {
-				xhr.responseType = "document";
-				// Force the response to be parsed as XML
-				xhr.overrideMimeType("application/xml");
-			}
-			else {
-				xhr.responseType = "json";
-			}
+				if (responseType === "xml") {
+					xhr.responseType = "document";
+					// Force the response to be parsed as XML
+					xhr.overrideMimeType("application/xml");
+				}
+				else {
+					xhr.responseType = "json";
+				}
 
-			if (method.toUpperCase() === "GET" || method.toUpperCase() === "HEAD") {
-				xhr.open(method, `${requestURL}?${queryParams}`, true);
-				xhr.setRequestHeader("Content-Type", "application/json");
-				for (const key in headers) {
-					xhr.setRequestHeader(key.toString(), headers[key as keyof typeof headers]);
+				if (method.toUpperCase() === "GET" || method.toUpperCase() === "HEAD") {
+					xhr.open(method, `${requestURL}?${queryParams}`, true);
+					xhr.setRequestHeader("Content-Type", "application/json");
+					for (const key in headers) {
+						xhr.setRequestHeader(key.toString(), headers[key as keyof typeof headers]);
+					}
+					xhr.send();
+				}
+				else {
+					xhr.open(method, requestURL, true);
+					xhr.setRequestHeader("Content-Type", "application/json");
+					xhr.send(JSON.stringify(body));
 				}
-				xhr.send();
+
+				xhr.addEventListener("load", () => {
+					const showHeader = xhr.getResponseHeader("show-header");
+					const accessControlAllowOrigin = xhr.getResponseHeader("access-control-allow-origin");
+					setResponseOrigin({
+						status: xhr.status,
+						statusText: xhr.statusText,
+						url: xhr.responseURL,
+						headers: new Headers({
+							"show-header": showHeader || "",
+							"access-control-allow-origin": accessControlAllowOrigin || "",
+						}),
+					});
+					setResponseData(xhr.response);
+
+					if (responseType === "xml") {
+						const xmlContainer = document.getElementById("xmlContainer");
+						const xmlDoc = xhr.responseXML!;
+						const xmlRoot = xmlDoc.querySelector("#xml-root");
+						xmlContainer!.appendChild(xmlRoot!);
+					}
+				});
+
+				xhr.addEventListener("loadend", () => {
+					setLoading(false);
+				});
 			}
 			else {
-				xhr.open(method, requestURL, true);
-				xhr.setRequestHeader("Content-Type", "application/json");
-				xhr.send(JSON.stringify(body));
-			}
-
-			xhr.addEventListener("load", () => {
+				setLoading(true);
+				const xhr = new XMLHttpRequest();
+				// Note: It's a sync request
+				const isAsync = false;
+				if (method.toUpperCase() === "GET" || method.toUpperCase() === "HEAD") {
+					xhr.open(method, `${requestURL}?${queryParams}`, isAsync);
+					xhr.setRequestHeader("Content-Type", "application/json");
+					for (const key in headers) {
+						xhr.setRequestHeader(key.toString(), headers[key as keyof typeof headers]);
+					}
+					xhr.send();
+				}
+				else {
+					xhr.open(method, requestURL, isAsync);
+					xhr.setRequestHeader("Content-Type", "application/json");
+					xhr.send(JSON.stringify(body));
+				}
 				const showHeader = xhr.getResponseHeader("show-header");
 				const accessControlAllowOrigin = xhr.getResponseHeader("access-control-allow-origin");
 				setResponseOrigin({
@@ -71,18 +119,8 @@ export function TheCard({
 					}),
 				});
 				setResponseData(xhr.response);
-
-				if (responseType === "xml") {
-					const xmlContainer = document.getElementById("xmlContainer");
-					const xmlDoc = xhr.responseXML!;
-					const xmlRoot = xmlDoc.querySelector("#xml-root");
-					xmlContainer!.appendChild(xmlRoot!);
-				}
-			});
-
-			xhr.addEventListener("loadend", () => {
 				setLoading(false);
-			});
+			}
 		}
 		else if (type === REQUEST_TYPE[1]) {
 			setLoading(true);
diff --git a/packages/playground/react-sample/src/components/the-nav/index.tsx b/packages/playground/react-sample/src/components/the-nav/index.tsx
index fd168ed..7c85d95 100644
--- a/packages/playground/react-sample/src/components/the-nav/index.tsx
+++ b/packages/playground/react-sample/src/components/the-nav/index.tsx
@@ -1,7 +1,9 @@
+import type { Option } from "./type";
+
 import { useLocation, useNavigate } from "react-router";
 
 export const REQUEST_TYPE = ["XHR", "Fetch"];
-export const OPTIONS = [
+export const OPTIONS: Option[] = [
 	{
 		label: "Response In Mock",
 		value: "response-in-mock",
@@ -121,6 +123,28 @@ export const OPTIONS = [
 		method: "POST",
 		body: { name: "CondorHero", age: 18 },
 	},
+
+	/* Only For XHR */
+	{
+		label: "Sync Request",
+		value: "sync-request",
+		method: "GET",
+		onlyXHR: true,
+		sync: true,
+	},
+	{
+		label: "Sync External URL",
+		value: "https://my-json-server.typicode.com/typicode/demo/comments",
+		method: "GET",
+		onlyXHR: true,
+		sync: true,
+	},
+
+	{
+		label: "Response Is Any",
+		value: "response-is-any",
+		method: "GET",
+	},
 	{
 		label: "Custom Response Header",
 		value: "custom-response-header",
@@ -139,7 +163,15 @@ export const OPTIONS = [
 	},
 ];
 
-export const BUTTON_LIST = REQUEST_TYPE.flatMap(typeItem => OPTIONS.map(item => ({ ...item, type: typeItem })));
+export const BUTTON_LIST = REQUEST_TYPE.flatMap(
+	typeItem => OPTIONS.map(
+		(item) => {
+			return (typeItem === "Fetch" && item.onlyXHR)
+				? undefined
+				: { ...item, type: typeItem };
+		},
+	),
+).filter(Boolean) as Option[];
 
 export function TheNav() {
 	const navigate = useNavigate();
@@ -175,17 +207,23 @@ export function TheNav() {
 	}
 
 	return (
-		<nav className="md:mt-5 md:mb-18 mt-4 mb-10 flex gap-10 flex-col">
+		<nav className="flex flex-col gap-10 mt-4 mb-10 md:mt-5 md:mb-18">
 			{REQUEST_TYPE.map((requestItem, requestIndex) => {
+				const buttons = OPTIONS.map((item) => {
+					if (requestItem === "Fetch" && item.onlyXHR) {
+						return null;
+					}
+					return item;
+				}).filter(Boolean) as Option[];
 				return (
 					<div key={requestItem} className="flex gap-4 max-md:gap-3">
-						<div className="opacity-80 text-sm">{requestItem}</div>
+						<div className="text-sm opacity-80">{requestItem}</div>
 						<div
 							className={
 								`flex max-md:gap-2 gap-4 flex-wrap${REQUEST_TYPE.length - 1 !== requestIndex ? " pb-5 border-b" : ""}`
 							}
 						>
-							{OPTIONS.map(({ value, label, disabled }) => {
+							{buttons.map(({ value, label, disabled }) => {
 								return (
 									<div className="relative" key={`${requestItem}-${value}`}>
 										<button
diff --git a/packages/playground/react-sample/src/components/the-nav/type.ts b/packages/playground/react-sample/src/components/the-nav/type.ts
new file mode 100644
index 0000000..3209e53
--- /dev/null
+++ b/packages/playground/react-sample/src/components/the-nav/type.ts
@@ -0,0 +1,31 @@
+// Request method type
+type Method = "GET" | "POST" | "PUT" | "DELETE";
+
+// Response type
+type ResponseType = "xml" | undefined;
+
+// Request header value type
+type HeaderValue = string;
+
+// Option interface
+export interface Option {
+	type?: "XHR" | "Fetch"
+	// Displayed label text
+	label: string
+	// Value/path
+	value: string
+	// HTTP method
+	method: Method
+	// Sync request
+	sync?: boolean
+	// Optional response type
+	responseType?: ResponseType
+	// Optional request headers
+	headers?: Record<string, HeaderValue>
+	// Optional request body
+	body?: Record<string, unknown>
+	// Only use XHR
+	onlyXHR?: boolean
+	// Optional disabled status
+	disabled?: boolean
+}
diff --git a/packages/playground/react-sample/src/views/App.tsx b/packages/playground/react-sample/src/views/App.tsx
index 9c70573..97d83aa 100644
--- a/packages/playground/react-sample/src/views/App.tsx
+++ b/packages/playground/react-sample/src/views/App.tsx
@@ -12,7 +12,7 @@ function App() {
 	return (
 		<>
 			<TheHead />
-			<section className="max-md:px-4 px-10">
+			<section className="px-10 max-md:px-4">
 				<TheNav />
 				<main className="space-y-14">
 					{option
diff --git a/packages/vite-plugin-fake-server/src/createFakeMiddleware.ts b/packages/vite-plugin-fake-server/src/createFakeMiddleware.ts
index ba050da..1189f37 100644
--- a/packages/vite-plugin-fake-server/src/createFakeMiddleware.ts
+++ b/packages/vite-plugin-fake-server/src/createFakeMiddleware.ts
@@ -71,7 +71,7 @@ export async function createFakeMiddleware(
 					}
 				}
 				else {
-					res.end();
+					res.end(JSON.stringify(response, null, 2));
 				}
 			}
 
diff --git a/packages/vite-plugin-fake-server/src/createHookTemplate.ts b/packages/vite-plugin-fake-server/src/createHookTemplate.ts
new file mode 100644
index 0000000..ad0b203
--- /dev/null
+++ b/packages/vite-plugin-fake-server/src/createHookTemplate.ts
@@ -0,0 +1,183 @@
+import type { ResolvePluginOptionsType } from "./resolvePluginOptions";
+
+import { STATUS_CODES } from "node:http";
+import { createSimulateResponse, sleep, syncSleep, tryToJSON } from "./shared";
+
+export function createHookTemplate(isSync = false, opts: Partial<ResolvePluginOptionsType> = {}) {
+	const commonInit = `
+		${tryToJSON.toString()}
+		const STATUS_CODES = ${JSON.stringify(STATUS_CODES, null, 2)};
+
+		function headersToObject(headers) {
+			const headersObject = {};
+			for (const [name, value] of headers.entries()) {
+				headersObject[name] = value;
+			}
+			return headersObject;
+		}
+	`;
+	const getConfig = `{
+		match,
+		basename: ${JSON.stringify(opts.basename)},
+		defaultTimeout: ${JSON.stringify(opts.timeout)},
+		globalResponseHeaders: ${JSON.stringify(opts.headers, null, 2)}
+	}`;
+
+	const handleAsyncResponseTemplate = `
+		const responseIsFunction = typeof response === "function";
+		const fakeResponse = responseIsFunction
+			? await Promise.resolve(
+				response({
+					url,
+					body: tryToJSON(req.body),
+					rawBody: req.body,
+					query,
+					params,
+					headers: requestHeaders,
+				}),
+			)
+			: response;
+	`;
+	const handleSyncResponseTemplate = `
+		const responseIsFunction = typeof response === "function";
+		const fakeResponse = responseIsFunction
+			? response({
+				url,
+				body: tryToJSON(req.body),
+				rawBody: req.body,
+				query,
+				params,
+				headers: requestHeaders,
+			})
+			: response;
+	`;
+
+	const processTemplate = `
+		let apiResponse = "";
+		const {
+			response,
+			statusCode,
+			statusText: responseStatusText = STATUS_CODES[statusCode],
+			url,
+			query,
+			params,
+			responseHeaders,
+		} = responseResult ?? {};
+		const statusText = ${JSON.stringify(opts.http2)} ? "" : responseStatusText;
+		const requestHeaders = {};
+		for (const key in req.headers) {
+			requestHeaders[key.toLowerCase()] = req.headers[key];
+		}
+		${isSync ? handleAsyncResponseTemplate : handleSyncResponseTemplate}
+		if(req.isFetch) {
+			if (typeof fakeResponse === "string") {
+				if (!responseHeaders.get("Content-Type")) {
+					responseHeaders.set("Content-Type", "text/plain");
+				}
+				apiResponse = new Response(
+					fakeResponse,
+					{
+						statusText,
+						status: statusCode,
+						headers: headersToObject(responseHeaders),
+					}
+				);
+			} else {
+				if (!responseHeaders.get("Content-Type")) {
+					responseHeaders.set("Content-Type", "application/json");
+				}
+				apiResponse = new Response(
+					JSON.stringify(fakeResponse, null, 2),
+					{
+						statusText,
+						status: statusCode,
+						headers: headersToObject(responseHeaders),
+					}
+				);
+			}
+		} else {
+			const dataResponse = { data: fakeResponse };
+			if(!req.type || req.type.toLowerCase() === "text") {
+				if (!responseHeaders.get("Content-Type")) {
+					responseHeaders.set("Content-Type", "text/plain");
+				}
+				apiResponse = {
+					statusText,
+					status: statusCode,
+					text: fakeResponse,
+					...dataResponse,
+					headers: headersToObject(responseHeaders),
+				};
+			} else if (req.type.toLowerCase() === "json") {
+				if (!responseHeaders.get("Content-Type")) {
+					responseHeaders.set("Content-Type", "application/json");
+				}
+				apiResponse = {
+					statusText,
+					status: statusCode,
+					...dataResponse,
+					headers: headersToObject(responseHeaders),
+				};
+			} else if (req.type.toLowerCase() === "document") {
+				if (!responseHeaders.get("Content-Type")) {
+					responseHeaders.set("Content-Type", "application/xml");
+				}
+				const parser = new DOMParser();
+				const xmlDoc = parser.parseFromString(fakeResponse,"application/xml");
+				apiResponse = {
+					statusText,
+					status: statusCode,
+					xml: xmlDoc,
+					data: xmlDoc,
+					headers: headersToObject(responseHeaders),
+				};
+			} else {
+				// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType
+				// "arraybuffer" | "blob"
+				apiResponse = {
+					statusText,
+					status: statusCode,
+					...dataResponse,
+					headers: headersToObject(responseHeaders),
+				};
+			}
+		}
+		if (${JSON.stringify(opts.logger)}){
+			const requestMethod = req.method ? req.method.toUpperCase() : "GET";
+			console.log("%c request invoke" + " %c" + requestMethod + " " + req.url, "color: green", "color: blue");
+		}
+	`;
+	const templateAsync = `async function(req, callback) {
+		${commonInit}
+		${sleep.toString()}
+		${createSimulateResponse.toString()};
+		const simulateServerResponse = createSimulateResponse(sleep);
+
+		const responseResult = await simulateServerResponse(req, fakeModuleList, ${getConfig});
+		if (responseResult) {
+			${processTemplate}
+			callback(apiResponse);
+		} else {
+			// next external URL
+			callback();
+		}
+	}`;
+
+	const templateSync = `function(req) {
+		${commonInit}
+		${syncSleep.toString()}
+
+		${createSimulateResponse.toString()};
+		const simulateServerResponseSync = createSimulateResponse(syncSleep);
+
+		const responseResult = simulateServerResponseSync(req, fakeModuleList, ${getConfig});
+		if (responseResult) {
+			${processTemplate}
+			return apiResponse;
+		} else {
+			// next, will fetch external link
+			return;
+		}
+	}`;
+	return isSync ? templateAsync : templateSync;
+}
diff --git a/packages/vite-plugin-fake-server/src/plugin.ts b/packages/vite-plugin-fake-server/src/plugin.ts
index cbb158c..6793c54 100644
--- a/packages/vite-plugin-fake-server/src/plugin.ts
+++ b/packages/vite-plugin-fake-server/src/plugin.ts
@@ -2,7 +2,6 @@ import type { HtmlTagDescriptor, Plugin, ResolvedConfig, WatchOptions } from "vi
 import type { ResolvePluginOptionsType } from "./resolvePluginOptions";
 import type { VitePluginFakeServerOptions } from "./types";
 
-import { STATUS_CODES } from "node:http";
 import { isAbsolute, join } from "node:path";
 import process from "node:process";
 import { normalizePath } from "vite";
@@ -10,9 +9,9 @@ import { normalizePath } from "vite";
 import pkg from "../package.json";
 import { generateFakeServer } from "./build";
 import { createFakeMiddleware } from "./createFakeMiddleware";
+import { createHookTemplate } from "./createHookTemplate";
 import { getFakeFilePath } from "./node";
 import { resolvePluginOptions } from "./resolvePluginOptions";
-import { simulateServerResponse, sleep, tryToJSON } from "./shared";
 import { buildPackage, createLogger } from "./utils";
 import { xhook } from "./xhook/index.mjs";
 
@@ -153,127 +152,10 @@ export async function vitePluginFakeServer(options: VitePluginFakeServerOptions
 					children: `const fakeModuleList = window.__VITE__PLUGIN__FAKE__SERVER__.fakeModuleList;
 					const pathToRegexp = window.__VITE__PLUGIN__FAKE__SERVER__.pathToRegexp;
 					const match = pathToRegexp.match ?? pathToRegexp.default.match;
-					window.__VITE__PLUGIN__FAKE__SERVER__.xhook.before(async function(req, callback) {
-						${sleep.toString()}
-						${tryToJSON.toString()}
-						${simulateServerResponse.toString()}
-						const STATUS_CODES = ${JSON.stringify(STATUS_CODES, null, 2)};
-
-						function headersToObject(headers) {
-							const headersObject = {};
-							for (const [name, value] of headers.entries()) {
-								headersObject[name] = value;
-							}
-							return headersObject;
-						}
-
-						const responseResult = await simulateServerResponse(req, fakeModuleList, {
-							match,
-							basename: ${JSON.stringify(opts.basename)},
-							defaultTimeout: ${JSON.stringify(opts.timeout)},
-							globalResponseHeaders: ${JSON.stringify(opts.headers, null, 2)}
-						});
-						if (responseResult) {
-							const {
-								response,
-								statusCode,
-								statusText: responseStatusText = STATUS_CODES[statusCode],
-								url,
-								query,
-								params,
-								responseHeaders,
-							} = responseResult ?? {};
-							const statusText = ${JSON.stringify(opts.http2)} ? "" : responseStatusText;
-							const responseIsFunction = typeof response === "function";
-							const requestHeaders = {};
-							for (const key in req.headers) {
-								requestHeaders[key.toLowerCase()] = req.headers[key];
-							}
-							const fakeResponse = !responseIsFunction || await Promise.resolve(
-								response({ url, body: tryToJSON(req.body), rawBody: req.body, query, params, headers: requestHeaders })
-							);
-							if(req.isFetch) {
-								if (typeof fakeResponse === "string") {
-									if (!responseHeaders.get("Content-Type")) {
-										responseHeaders.set("Content-Type", "text/plain");
-									}
-									callback(new Response(
-										responseIsFunction ? fakeResponse : null,
-										{
-											statusText,
-											status: statusCode,
-											headers: headersToObject(responseHeaders),
-										}
-									));
-								} else {
-									if (!responseHeaders.get("Content-Type")) {
-										responseHeaders.set("Content-Type", "application/json");
-									}
-									callback(new Response(
-										responseIsFunction ? JSON.stringify(fakeResponse, null, 2) : null,
-										{
-											statusText,
-											status: statusCode,
-											headers: headersToObject(responseHeaders),
-										}
-									));
-								}
-							} else {
-								const dataResponse = responseIsFunction ? { data: fakeResponse } : {};
-								if(!req.type || req.type.toLowerCase() === "text") {
-									if (!responseHeaders.get("Content-Type")) {
-										responseHeaders.set("Content-Type", "text/plain");
-									}
-									callback({
-										statusText,
-										status: statusCode,
-										text: fakeResponse,
-										...dataResponse,
-										headers: headersToObject(responseHeaders),
-									});
-								} else if (req.type.toLowerCase() === "json") {
-									if (!responseHeaders.get("Content-Type")) {
-										responseHeaders.set("Content-Type", "application/json");
-									}
-									callback({
-										statusText,
-										status: statusCode,
-										...dataResponse,
-										headers: headersToObject(responseHeaders),
-									});
-								} else if (req.type.toLowerCase() === "document") {
-									if (!responseHeaders.get("Content-Type")) {
-										responseHeaders.set("Content-Type", "application/xml");
-									}
-									const parser = new DOMParser();
-									const xmlDoc = parser.parseFromString(fakeResponse,"application/xml");
-									callback({
-										statusText,
-										status: statusCode,
-										xml: xmlDoc,
-										data: xmlDoc,
-										headers: headersToObject(responseHeaders),
-									});
-								} else {
-									// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType
-									// "arraybuffer" | "blob"
-									callback({
-										statusText,
-										status: statusCode,
-										...dataResponse,
-										headers: headersToObject(responseHeaders),
-									});
-								}
-							}
-							if (${JSON.stringify(opts.logger)}){
-								const requestMethod = req.method ? req.method.toUpperCase() : "GET";
-								console.log("%c request invoke" + " %c" + requestMethod + " " + req.url, "color: green", "color: blue");
-							}
-						} else {
-							// next external URL
-							callback();
-						}
-					});`,
+					// sync
+					window.__VITE__PLUGIN__FAKE__SERVER__.xhook.before(${createHookTemplate(false, opts)});
+					// async
+					window.__VITE__PLUGIN__FAKE__SERVER__.xhook.before(${createHookTemplate(true, opts)});`,
 				});
 
 				return scriptTagList;
diff --git a/packages/vite-plugin-fake-server/src/shared/simulateServerResponse.mjs b/packages/vite-plugin-fake-server/src/shared/simulateServerResponse.mjs
index 19bfdcd..5a6aeaa 100644
--- a/packages/vite-plugin-fake-server/src/shared/simulateServerResponse.mjs
+++ b/packages/vite-plugin-fake-server/src/shared/simulateServerResponse.mjs
@@ -12,6 +12,14 @@ export function sleep(time) {
 	});
 }
 
+export function syncSleep(ms) {
+	if (ms <= 0) {
+		return;
+	}
+	const start = performance.now();
+	while (performance.now() - start < ms);
+}
+
 /**
  * Parses a string into a JSON object.
  * @param {string} str - The string to be parsed.
@@ -28,105 +36,111 @@ export function tryToJSON(str) {
 	return result;
 }
 
-/**
- * Simulates a server response.
- * @param {object} req - The request object.
- * @param {Array} fakeModuleList - The list of fake modules.
- * @param {object} config - The configuration object.
- * @returns {import('./types').SimulateServerResponseType} - A Promise that resolves with the server response.
- */
-export async function simulateServerResponse(req = {}, fakeModuleList = [], config = {}) {
-	const {
-		match,
-		basename = "",
-		defaultTimeout = 0,
-		globalResponseHeaders = {},
-	} = config;
-
+export function createSimulateResponse(sleepFn) {
 	/**
-	 * Join two paths into a complete path
+	 * Simulates a server response.
+	 * @param {object} req - The request object.
+	 * @param {Array} fakeModuleList - The list of fake modules.
+	 * @param {object} config - The configuration object.
+	 * @returns {import('./types').SimulateServerResponseType} - A Promise that resolves with the server response.
 	 */
+	return function simulateServerResponse(req = {}, fakeModuleList = [], config = {}) {
+		const {
+			match,
+			basename = "",
+			defaultTimeout = 0,
+			globalResponseHeaders = {},
+		} = config;
 
-	function joinPathname(a, b) {
-		const aPathname = new URL(a, "http://localhost:5173/").pathname;
-		const bPathname = new URL(b, "http://localhost:5173/").pathname;
-		return aPathname.endsWith("/") ? aPathname.slice(0, -1) + bPathname : aPathname + bPathname;
-	}
+		/**
+		 * Join two paths into a complete path
+		 */
 
-	if (req.url) {
-		const instanceURL = new URL(req.url, "http://localhost:5173/");
+		function joinPathname(a, b) {
+			const aPathname = new URL(a, "http://localhost:5173/").pathname;
+			const bPathname = new URL(b, "http://localhost:5173/").pathname;
+			return aPathname.endsWith("/") ? aPathname.slice(0, -1) + bPathname : aPathname + bPathname;
+		}
 
-		// https://nodejs.org/api/url.html#urlpathname
-		// Invalid URL characters included in the value assigned to the pathname property are percent-encoded
-		const pathname = instanceURL.pathname;
+		if (req.url) {
+			const instanceURL = new URL(req.url, "http://localhost:5173/");
 
-		const matchRequest = fakeModuleList.find((item) => {
-			if (!pathname || !item || !item.url) {
-				return false;
-			}
-			const method = item.method ?? "GET";
-			const reqMethod = req.method ?? "GET";
-			if (method.toUpperCase() !== reqMethod.toUpperCase()) {
-				return false;
-			}
-			const realURL = joinPathname(basename, item.url);
-			return !!match(realURL)(pathname);
-		});
-		if (matchRequest) {
-			const {
-				response,
-				rawResponse,
-				timeout = defaultTimeout,
-				statusCode,
-				statusText,
-				url,
-				headers: responseHeaders = {},
-			} = matchRequest;
-
-			if (timeout) {
-				await sleep(timeout);
-			}
+			// https://nodejs.org/api/url.html#urlpathname
+			// Invalid URL characters included in the value assigned to the pathname property are percent-encoded
+			const pathname = instanceURL.pathname;
 
-			const joinedUrl = joinPathname(basename, url);
-			const urlMatch = match(joinedUrl, { encode: encodeURI });
+			const matchRequest = fakeModuleList.find((item) => {
+				if (!pathname || !item || !item.url) {
+					return false;
+				}
+				const method = item.method ?? "GET";
+				const reqMethod = req.method ?? "GET";
+				if (method.toUpperCase() !== reqMethod.toUpperCase()) {
+					return false;
+				}
+				const realURL = joinPathname(basename, item.url);
+				return !!match(realURL)(pathname);
+			});
+			if (matchRequest) {
+				const {
+					response,
+					rawResponse,
+					timeout = defaultTimeout,
+					statusCode,
+					statusText,
+					url,
+					headers: responseHeaders = {},
+				} = matchRequest;
+
+				// timeout
+				const delayPromise = timeout ? sleepFn(timeout) : Promise.resolve();
+
+				const joinedUrl = joinPathname(basename, url);
+				const urlMatch = match(joinedUrl, { encode: encodeURI });
 
-			const searchParams = instanceURL.searchParams;
-			const query = {};
-			for (const [key, value] of searchParams.entries()) {
-				if (Object.prototype.hasOwnProperty.call(query, key)) {
-					const queryValue = query[key];
-					if (Array.isArray(queryValue)) {
-						queryValue.push(value);
+				const searchParams = instanceURL.searchParams;
+				const query = {};
+				for (const [key, value] of searchParams.entries()) {
+					if (Object.prototype.hasOwnProperty.call(query, key)) {
+						const queryValue = query[key];
+						if (Array.isArray(queryValue)) {
+							queryValue.push(value);
+						}
+						else {
+							query[key] = [queryValue, value];
+						}
 					}
 					else {
-						query[key] = [queryValue, value];
+						query[key] = value;
 					}
 				}
-				else {
-					query[key] = value;
-				}
-			}
 
-			let params = {};
+				let params = {};
 
-			if (pathname) {
-				const matchParams = urlMatch(pathname);
-				if (matchParams) {
-					params = matchParams.params;
+				if (pathname) {
+					const matchParams = urlMatch(pathname);
+					if (matchParams) {
+						params = matchParams.params;
+					}
 				}
-			}
 
-			return {
-				response,
-				rawResponse,
-				timeout,
-				statusCode: statusCode ?? 200,
-				statusText,
-				url: req.url,
-				query,
-				params,
-				responseHeaders: new Headers({ ...globalResponseHeaders, ...responseHeaders }),
-			};
+				const result = {
+					response,
+					rawResponse,
+					timeout,
+					statusCode: statusCode ?? 200,
+					statusText,
+					url: req.url,
+					query,
+					params,
+					responseHeaders: new Headers({ ...globalResponseHeaders, ...responseHeaders }),
+				};
+				return delayPromise && delayPromise?.then ? delayPromise.then(() => result) : result;
+			}
 		}
-	}
+	};
 }
+
+export const simulateServerResponse = createSimulateResponse(sleep);
+
+export const simulateServerResponseSync = createSimulateResponse(syncSleep);
diff --git a/packages/vite-plugin-fake-server/src/xhook/index.mjs b/packages/vite-plugin-fake-server/src/xhook/index.mjs
index 89ba854..c5c520c 100644
--- a/packages/vite-plugin-fake-server/src/xhook/index.mjs
+++ b/packages/vite-plugin-fake-server/src/xhook/index.mjs
@@ -547,6 +547,11 @@ export function xhook() {
 				};
 
 				const hook = beforeHooks.shift();
+				/**
+				 * The new code belongs to vite-plugin-fake-server
+				 *
+				 * Original code:
+				```
 				//async or sync?
 				if (hook.length === 1) {
 					done(hook(request));
@@ -557,8 +562,27 @@ export function xhook() {
 					//skip async hook on sync requests
 					done();
 				}
+				```
+				* The new code belongs to vite-plugin-fake-server: Start
+				*/
+				//async
+				if(request.async) {
+					if (hook.length === 1) {
+						done();
+					} else if (hook.length === 2) {
+						hook(request, done);
+					}
+				//sync
+				} else {
+					if (hook.length === 1) {
+						done(hook(request));
+					} else if (hook.length === 2) {
+						done();
+					}
+				}
 				return;
 			};
+			// The new code belongs to vite-plugin-fake-server: End
 			//kick off
 			process();
 		};
@@ -804,7 +828,9 @@ export function xhook() {
 				}
 				const hook = beforeHooks.shift();
 				if (hook.length === 1) {
-					return done(hook(options));
+					// return done(hook(options));
+					//The new code belongs to vite-plugin-fake-server
+					return done();
 				} else if (hook.length === 2) {
 					return hook(options, done);
 				}