你看到的写法：
```ts
api1: (params) => getListApi({ ...params }),
```
这是一种**简洁的函数封装写法**，我们来一步步拆解它的“原始形态”，让你彻底理解。
---
## 🎯 目标：理解这行代码在做什么
这行代码的作用是：
> **定义一个名为 `api1` 的方法，它接收参数 `params`，然后调用 `getListApi` 函数，并把 `params` 透传过去。**
---
## 🔍 第一步：拆解语法
### 1. `api1: ...`
- 这是一个对象的属性定义。
- 比如：
```ts
const obj = {
api1: "some value"
};
```
- 所以 `api1` 是一个**属性名**，它的值是一个函数。
---
### 2. `(params) => ...`
- 这是 **箭头函数（Arrow Function）** 的写法。
- 等价于传统的函数写法：
```ts
function(params) {
// 函数体
}
```
---
### 3. `{ ...params }`
- 这是 **展开运算符（Spread Operator）**。
- 它的作用是：**复制 `params` 对象的所有属性，生成一个新对象**。
- 如果 `params = { page: 1, size: 10 }`，那么 `{ ...params }` 就等于 `{ page: 1, size: 10 }`。
> 💡 在这个场景下，`{ ...params }` 和 `params` 效果一样，但使用展开是为了“创建一个新对象”，避免引用同一个对象（防副作用）。
---
### 4. `getListApi(...)`
- 这是一个已经定义好的函数，比如：
```ts
const getListApi = (params) => defHttp.get({ url: '/list', params });
```
---
## ✅ 原始形态（一步步还原）
### 最终简写：
```ts
api1: (params) => getListApi({ ...params }),
```
### 步骤 1：还原箭头函数为普通函数
```ts
api1: function(params) {
return getListApi({ ...params });
}
```
### 步骤 2：去掉展开运算符（如果不需要深拷贝）
```ts
api1: function(params) {
return getListApi(params);
}
```
### 步骤 3：完整对象写法
```ts
const apiMethods = {
api1: function(params) {
return getListApi(params);
}
};
```
### 步骤 4：调用示例
```ts
// 假设 getListApi 已定义
const getListApi = (params) => {
console.log('请求参数:', params);
return '模拟返回数据';
};
// 使用 api1
const result = apiMethods.api1({ page: 1, size: 10 });
// 输出：请求参数: { page: 1, size: 10 }
// result = '模拟返回数据'
```
---
## 🧠 为什么这么写？好处是什么？
这种写法常见于 **API 层的封装**，比如在 `useRequest` 或 `service` 模块中。
### 场景举例：
```ts
// 假设你有一个通用的列表请求函数
const getListApi = (params) => defHttp.get({ url: '/api/list', params });
// 你现在想定义多个具体的 API，但都基于 getListApi
const apis = {
getUserList: (params) => getListApi({ ...params, type: 'user' }),
getOrderList: (params) => getListApi({ ...params, type: 'order' }),
getProductList: (params) => getListApi({ ...params, type: 'product' }),
};
```
这样：
- `getUserList({ page: 1 })` → 实际请求 `{ page: 1, type: 'user' }`
- 复用逻辑，减少重复代码。
---
## 🔄 对比：更复杂的例子
### 简写：
```ts
searchUser: (params) => getUserList({ ...params, role: 'admin' })
```
### 原始形态：
```ts
searchUser: function(params) {
const finalParams = {
page: params.page,
keyword: params.keyword,
role: 'admin' // 固定加一个参数
};
return getUserList(finalParams);
}
```
---
## ✅ 总结：一句话解释
> ```ts
> api1: (params) => getListApi({ ...params }),
> ```
> 等价于：
> ```ts
> api1: function(params) {
> return getListApi(params);
> }
> ```
> 它的意思是：**定义一个叫 `api1` 的函数，它接收参数，然后原样传给 `getListApi` 并返回结果。**
---
## 📌 额外提示
- `{ ...params }` 比直接用 `params` 更安全，因为它**创建了一个新对象**，避免后续修改影响原始对象。
- 这种写法在 Vue 3 的 `setup`、`composables`、`API service` 中非常常见。
现在你应该完全明白它的含义了！✅
为什么要包一层const apiMethods