网络框架 Axios 中的 DELETE

引言

DELETE 是 HTTP 规范中专门用于删除服务器指定资源的请求方法，语义清晰且遵循 RESTful 设计规范，是前后端数据交互的核心方法之一

核心语义

作用：删除服务端已存在的资源
幂等性：具备强幂等性，多次发送相同 DELETE 请求，服务器最终资源状态完全一致（第一次删除成功，后续删除均返回资源不存在）
规范：优先通过 URL 定位资源，参数传递方式需与后端接口保持一致

基础配置

统一基础配置，提升代码复用性与规范性：

import axios from "axios";

// 基础请求地址
const BASE_URL: string = "http://localhost:8080/";

// 类型定义
type IdType = number | string;
interface DeleteParams {
  id: IdType;
}

参数传递方式

DELETE 请求无固定数据提交格式，核心差异在于参数传递位置，以下是三种标准实现方式。

URL 查询参数形式

最常用、最推荐的方式，Axios 自动拼接参数，安全且可读性高。

适用场景：根据单一 ID / 少量查询条件删除资源
特点：参数自动编码，无需手动拼接，兼容所有后端框架

/**
 * DELETE 请求 - URL 查询参数
 * @param url 接口路径
 * @param id 资源唯一标识
 */
const deleteByQuery = async (url: string, id: IdType) => {
  try {
    const response = await axios({
      url: BASE_URL + url,
      method: "delete",
      // 核心：params 会自动拼接为 ?id=xxx
      params: { id },
    });
    console.log("删除成功（查询参数）：", response.data);
  } catch (err) {
    console.error("删除失败：", (err as Error).message);
  }
};

// 调用示例：删除 id = 1 的资源
deleteByQuery("test/delete", 1);

URL 路径拼接形式

RESTful API 标准风格，将资源 ID 直接嵌入 URL 路径。

适用场景：严格 RESTful 接口设计（如 /user/1 直接删除用户 1）
特点：语义化最强，是行业最佳实践

/**
 * DELETE 请求 - URL 路径参数
 * @param url 接口基础路径
 * @param id 资源唯一标识
 */
const deleteByPath = async (url: string, id: IdType) => {
  try {
    const response = await axios({
      // 核心：直接拼接路径
      url: `${BASE_URL}${url}/${id}`,
      method: "delete",
    });
    console.log("删除成功（路径拼接）：", response.data);
  } catch (err) {
    console.error("删除失败：", (err as Error).message);
  }
};

// 调用示例：请求地址 → http://localhost:8080/test/delete/1
deleteByPath("test/delete", 1);

请求体参数形式

特殊场景使用，将参数放在请求体（body）中传递。

适用场景：批量删除、复杂条件删除（传递多个字段 / 对象）
注意：部分后端框架 / 网关不支持 DELETE 请求携带 body，必须与后端协商确认

// 定义复杂删除条件类型
interface BatchDelete {
  ids: IdType[];    // 批量删除 ID 数组
  operator?: string;// 操作人
}

/**
 * DELETE 请求 - 请求体参数
 * @param url 接口路径
 * @param data 复杂删除条件
 */
const deleteByBody = async (url: string, data: BatchDelete) => {
  try {
    const response = await axios({
      url: BASE_URL + url,
      method: "delete",
      // 核心：data 放在请求体中
      data: data,
    });
    console.log("删除成功（请求体参数）：", response.data);
  } catch (err) {
    console.error("删除失败：", (err as Error).message);
  }
};

// 调用示例：批量删除多个资源
const batchData: BatchDelete = {
  ids: [1, 2, 3],
  operator: "admin"
};
deleteByBody("test/delete/batch", batchData);

其他补充

方式对比

传递方式	写法	适用场景	推荐指数
查询参数	`params: { id }`	单 ID 删除	⭐⭐⭐⭐
路径拼接	`/url/{id}`	RESTful 标准接口	⭐⭐⭐⭐⭐
请求体	`data: obj`	批量 / 复杂条件删除	⭐⭐⭐

注意事项

幂等性：DELETE 请求必须设计为幂等，重复请求不会产生副作用
权限校验：删除操作风险极高，后端必须严格校验操作权限
Body 兼容：HTTP 规范未禁止 DELETE 携带 body，但部分服务不支持，优先使用路径 / 查询参数
响应规范：删除成功通常返回 200 / 204 状态码，资源不存在返回 404

最佳实践

单资源删除：优先使用 URL 路径拼接（RESTful 标准）
简单条件删除：使用 URL 查询参数
批量 / 复杂删除：使用 请求体参数（需确认后端支持）
禁止使用 POST 替代 DELETE，严格遵循 HTTP 方法语义

总结

DELETE = 删除资源，具备强幂等性
优先用路径参数（RESTful），其次用查询参数
批量删除可使用请求体参数，必须与后端对齐规范
实际开发以后端接口定义为准，选择匹配的参数传递方式