如何在ReactJS中移除指定Axios GET请求的默认参数

方案1：自定义标识+请求拦截器精准控制 #

给需要移除默认参数的请求添加自定义标记，在拦截器中仅针对这类请求移除默认params，不影响其他正常请求。

修改你的api.ts，新增请求拦截器：

export const service = axios.create({
  baseURL: "API_URL",
  timeout: 3000,
  headers: {
    Authorization: `Bearer ${SOME_ENV_TOKEN}`,
    "Content-Type": "application/json;charset=utf-8",
  },
  params: {
    keys: `${SOME_ENV_KEY}`,
  },
});

// 请求拦截器：处理默认参数的选择性移除
service.interceptors.request.use((config) => {
  // 判断当前请求是否携带跳过默认params的标记
  if (config._skipDefaultParams) {
    // 删除默认参数集合，或直接置为undefined
    delete config.params;
    // 清理自定义标记，避免传递给服务器
    delete config._skipDefaultParams;
  }
  return config;
});

在需要移除默认参数的Hook中，添加该自定义标记：

const fetchUsers: IUsers = await service
  .get<Promise<IUsers>>(`/users/`, {
    _skipDefaultParams: true // 标记该请求跳过默认params
  })
  .then((response) => response.data);

方案2：请求时显式将默认参数设为undefined #

Axios在序列化URL参数时，会自动忽略值为undefined的参数。针对单个默认参数的场景，直接在请求中覆盖该参数为undefined即可：

const fetchUsers: IUsers = await service
  .get<Promise<IUsers>>(`/users/`, {
    params: {
      keys: undefined // 覆盖默认参数，使其不被序列化到URL中
    }
  })
  .then((response) => response.data);

如果存在多个默认参数，需要逐个将其设为undefined。

方案3：创建双Axios实例拆分场景 #

若需要移除默认参数的请求占比不低，可以直接创建两个实例，分别对应带默认参数和不带默认参数的场景：

// api.ts
// 带默认params的实例：用于大部分请求
export const serviceWithParams = axios.create({
  baseURL: "API_URL",
  timeout: 3000,
  headers: {
    Authorization: `Bearer ${SOME_ENV_TOKEN}`,
    "Content-Type": "application/json;charset=utf-8",
  },
  params: {
    keys: `${SOME_ENV_KEY}`,
  },
});

// 不带默认params的实例：用于特殊请求
export const serviceWithoutParams = axios.create({
  baseURL: "API_URL",
  timeout: 3000,
  headers: {
    Authorization: `Bearer ${SOME_ENV_TOKEN}`,
    "Content-Type": "application/json;charset=utf-8",
  },
});

在对应Hook中直接使用无默认参数的实例：

const fetchUsers: IUsers = await serviceWithoutParams
  .get<Promise<IUsers>>(`/users/`)
  .then((response) => response.data);

内容的提问来源于stack exchange，提问作者Thyegu Ruiz