如何精简四个含重复变量与相似逻辑的API请求函数代码？

核心优化方向 #

• 抽离全局常量：把API密钥、接口地址这类固定配置统一放在代码顶部，后续修改只需改一处，不用逐个函数调整。
• 封装通用请求工具：把重复的请求头构建、请求参数配置、错误捕获逻辑打包成一个工具函数，所有API请求都复用这个函数。
• 统一异步风格：将DeleteToken的链式调用改成async/await，和其他三个函数保持一致，代码更易读。
• 规范变量声明：用const/let替代var，避免变量提升带来的潜在问题，代码更严谨。

优化后的完整代码 #

// 全局常量配置，统一管理
const API_CONFIG = {
  API_KEY: "abc123",
  BASE_URLS: {
    ACCESS_TOKEN: "https://access_token.com",
    REFRESH_TOKEN: "https://refresh_token.com",
    LOGIN: "https://login.com",
    DELETE_TOKEN: "https://delete_token.com"
  },
  DEFAULT_HEADERS: {
    "Content-Type": "application/json"
  }
};

// 封装通用请求工具函数
async function apiRequest(url, options = {}) {
  const headers = new Headers(API_CONFIG.DEFAULT_HEADERS);
  
  // 如果需要携带token，添加Authorization头
  if (options.withToken) {
    const accessToken = localStorage.getItem("access_token");
    if (accessToken) {
      headers.append("Authorization", `Bearer ${accessToken}`);
    }
  }

  // 合并自定义headers
  if (options.headers) {
    Object.entries(options.headers).forEach(([key, value]) => {
      headers.append(key, value);
    });
  }

  const requestOptions = {
    method: options.method || "POST",
    headers,
    redirect: "follow",
    // 如果有请求体，转为JSON字符串
    ...(options.body && { body: JSON.stringify(options.body) })
  };

  try {
    const res = await fetch(url, requestOptions);
    return res;
  } catch (error) {
    console.error("请求出错:", error);
    return null;
  }
}

// 各业务API函数，基于通用工具实现
const AccessToken = async () => {
  return apiRequest(API_CONFIG.BASE_URLS.ACCESS_TOKEN, {
    body: { api_key: API_CONFIG.API_KEY }
  });
};

const RefreshToken = async () => {
  return apiRequest(API_CONFIG.BASE_URLS.REFRESH_TOKEN, {
    withToken: true,
    body: { api_key: API_CONFIG.API_KEY }
  });
};

const Login = async () => {
  return apiRequest(API_CONFIG.BASE_URLS.LOGIN, {
    withToken: true,
    body: {
      mobile_no: "9999999999",
      student_class: "8",
      partner_source: "abcdef",
      partner_id: "abc_testing",
      partner_unique_id: "123456"
    }
  });
};

const DeleteToken = async (e) => {
  e.preventDefault();
  const res = await apiRequest(API_CONFIG.BASE_URLS.DELETE_TOKEN, {
    withToken: true,
    headers: {
      "Content-Type": undefined
    }
  });
  
  if (res) {
    const result = await res.text();
    console.log(result);
  }
};

优化细节说明 #

1. 全局常量管理：把所有固定配置放进API_CONFIG对象，后续修改密钥、接口地址只需要改这个对象，避免遗漏。
2. 通用请求函数：apiRequest处理了所有重复逻辑：
   • 初始化默认请求头
   • 自动添加token（通过withToken参数控制）
   • 合并自定义请求头
   • 自动序列化请求体为JSON
   • 统一的错误捕获和日志输出
3. 业务函数简化：原来的四个API函数现在只需要传入接口地址和个性化参数（比如请求体、是否带token），代码量大幅减少，逻辑更清晰。
4. 异步风格统一：DeleteToken改成async/await，和其他函数保持一致，避免混合两种异步写法带来的混乱。
5. 变量规范：全程用const/let，避免var的变量提升问题，代码更安全。

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