docs: fix missing @/services/product

close #33952

docs/react/practical-projects.en-US.md

@@ -100,7 +100,38 @@ export default ProductList;
 
 The file name corresponds to the name of the final model, and you can consume the data in the model through the API provided by the plug-in.
 
-Let's take a simple table as an example. First you need to create a new file `src/models/useProductList.ts`.
+Let's take a simple table as an example. First we create a new file `src/services/product.ts` for remote API.
+
+```tsx
+/*
+export function queryProductList() {
+  return fetch('/api/products').then(res => res.json());
+}
+*/
+// mock request service by setTimeout
+export function queryProductList() {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve([
+        {
+          id: 1,
+          name: 'product 1',
+        },
+        {
+          id: 2,
+          name: 'product 2',
+        },
+        {
+          id: 3,
+          name: 'product 3',
+        },
+      ]);
+    }, 2000);
+  });
+}
+```
+
+Then you need to create a new file `src/models/useProductList.ts`.
 
 ```tsx
 import { useRequest } from 'umi';

docs/react/practical-projects.zh-CN.md

@@ -97,7 +97,38 @@ export default ProductList;
 
 文件名则对应最终 model 的 name，你可以通过插件提供的 API 来消费 model 中的数据。
 
-我们以一个简单的表格作为示例。首先需要新建文件 `src/models/useProductList.ts`。
+我们以一个简单的表格作为示例。首先新建一个 `src/services/product.ts` 存放产品相关的接口。
+
+```tsx
+/*
+export function queryProductList() {
+  return fetch('/api/products').then(res => res.json());
+}
+*/
+// 先用 setTimeout 模拟一个请求，正常的写法如上所示
+export function queryProductList() {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve([
+        {
+          id: 1,
+          name: 'product 1',
+        },
+        {
+          id: 2,
+          name: 'product 2',
+        },
+        {
+          id: 3,
+          name: 'product 3',
+        },
+      ]);
+    }, 2000);
+  });
+}
+```
+
+然后新建文件 `src/models/useProductList.ts`。
 
 ```tsx
 import { useRequest } from 'umi';