一、基础使用前提
@umijs/max 内置了 request 能力（基于 umi-request 封装），无需额外安装依赖，直接导入即可使用。
二、四种请求的完整示例
1. 基础配置（推荐全局统一配置）
先在项目中创建 src/utils/request.ts 做全局配置，避免重复代码：
typescript
运行
import { request } from '@umijs/max';
// 全局默认配置
request.defaults.baseURL = 'https://api.example.com'; // 接口基础地址
request.defaults.timeout = 10000; // 超时时间（10秒）
request.defaults.credentials = 'include'; // 携带Cookie（跨域请求需后端配合）
// 请求拦截器：统一添加token、处理请求参数
request.interceptors.request.use((url, options) => {
return {
url,
options: {
...options,
headers: {
...options.headers,
'Authorization': `Bearer ${localStorage.getItem('token') || ''}`, // 统一加token
'Content-Type': 'application/json', // 默认JSON格式
},
},
};
});
// 响应拦截器：统一处理返回结果、错误
request.interceptors.response.use(
async (response) => {
const data = await response.clone().json(); // 克隆响应，避免重复读取
// 统一处理业务错误码
if (data.code !== 200) {
// 示例：登录失效跳转登录页
if (data.code === 401) {
localStorage.removeItem('token');
window.location.href = '/login';
return Promise.reject(new Error('登录失效，请重新登录'));
}
return Promise.reject(new Error(data.message || '请求失败'));
}
return data; // 直接返回解析后的JSON数据，无需每次手动json()
},
(error) => {
// 统一捕获网络错误/HTTP错误
console.error('请求异常:', error);
return Promise.reject(error);
}
);
export default request;
2. 四种请求的具体使用
在业务组件 / 接口文件中（如 src/services/api.ts）调用：
typescript
运行
import request from '@/utils/request';
// ====================== GET 请求（查询数据）======================
/**
* 获取列表数据
* @param params - 查询参数（自动拼接到URL后）
*/
export async function getList(params?: { id?: string; name?: string }) {
// 方式1：链式调用（推荐，语义更清晰）
return request.get('/api/list', { params });
// 方式2：基础调用（等价写法）
// return request('/api/list', { method: 'GET', params });
}
// ====================== POST 请求（创建数据）======================
/**
* 新增数据
* @param data - 提交的表单/JSON数据
*/
export async function addData(data: { name: string; age: number }) {
// 方式1：链式调用
return request.post('/api/data', { data });
// 方式2：基础调用
// return request('/api/data', { method: 'POST', data });
}
// ====================== PUT 请求（更新数据）======================
/**
* 更新数据
* @param id - 要更新的ID
* @param data - 要更新的内容
*/
export async function updateData(id: string, data: { age: number }) {
// 方式1：链式调用
return request.put(`/api/data/${id}`, { data });
// 方式2：基础调用
// return request(`/api/data/${id}`, { method: 'PUT', data });
}
// ====================== DELETE 请求（删除数据）======================
/**
* 删除数据
* @param id - 要删除的ID
*/
export async function deleteData(id: string) {
// 方式1：链式调用
return request.delete(`/api/data/${id}`);
// 方式2：基础调用（带参数的场景）
// return request(`/api/data/${id}`, {
// method: 'DELETE',
// params: { reason: '手动删除' } // 可选：删除时携带额外参数
// });
}
// ====================== 业务组件中调用示例 ======================
// 比如在 React 组件中
// import { getList, addData } from '@/services/api';
// const fetchList = async () => {
// try {
// const res = await getList({ id: '123', name: 'test' });
// console.log('列表数据:', res);
// } catch (err) {
// console.error('获取列表失败:', err);
// }
// };
// const handleAdd = async () => {
// try {
// const res = await addData({ name: '张三', age: 25 });
// console.log('新增成功:', res);
// } catch (err) {
// console.error('新增失败:', err);
// }
// };
三、关键配置项说明
| 配置项 | 作用 | 常用值 |
|---|---|---|
params | GET 请求的参数（自动拼接为 ?key=value） | { id: 1, name: 'test' } |
data | POST/PUT/DELETE 请求的请求体数据（自动序列化为 JSON） | { name: '张三', age: 25 } |
headers | 单个请求的自定义请求头（覆盖全局配置） | { 'Content-Type': 'form-data' } |
timeout | 单个请求的超时时间（覆盖全局配置） | 5000（5 秒） |
responseType | 响应数据类型（默认 json） | json/text/blob（文件下载） |
四、特殊场景补充
1. POST 提交表单数据（form-data）
typescript
运行
export async function uploadFile(formData: FormData) {
return request.post('/api/upload', {
data: formData,
headers: {
'Content-Type': 'multipart/form-data', // 必须指定
},
});
}
2. DELETE 请求携带请求体
typescript
运行
export async function batchDelete(data: { ids: string[] }) {
return request.delete('/api/batch-delete', { data });
}
总结
@umijs/max的request支持get/post/put/delete链式调用，语义清晰，是推荐写法；- 全局配置拦截器可统一处理 token、错误码、Cookie 等，减少重复逻辑；
- GET 请求用
params传参（自动拼 URL），POST/PUT/DELETE 用data传请求体（自动序列化 JSON）。
