@umijs/max 中导出的 request 方法，如何实现 GET/POST/PUT/DELETE 这四种核心请求

一、基础使用前提

@umijs/max 内置了 request 能力（基于 umi-request 封装），无需额外安装依赖，直接导入即可使用。

二、四种请求的完整示例

1. 基础配置（推荐全局统一配置）

先在项目中创建 src/utils/request.ts 做全局配置，避免重复代码：

typescript

运行

javascript 复制代码

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

运行

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

运行

javascript 复制代码

export async function uploadFile(formData: FormData) {
  return request.post('/api/upload', {
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data', // 必须指定
    },
  });
}

2. DELETE 请求携带请求体

typescript

运行

javascript 复制代码

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）。