JavaScript中如何重构重复axios请求代码，传入不同的then后续执行逻辑

1. 通用axios函数封装 #

你可以将重复的请求逻辑、日志打印逻辑、异常捕获逻辑统一封装，将每个场景不同的业务逻辑作为回调函数传入即可：

// 封装通用请求函数，接收成功后的自定义回调作为参数
const axios_related = (successCallback) => {
  axios.get("someurl.com")
    .then((res) => {
      // 公共逻辑：统一打印返回结果
      console.log(JSON.stringify(res, null, 2));
      // 执行传入的自定义业务逻辑，判断类型避免未传参数时报错
      if (typeof successCallback === 'function') {
        successCallback(res);
      }
    })
    .catch((err) => console.log(err))
};

2. 业务侧调用示例 #

每个点击事件只需编写自己独有的业务逻辑，传入封装好的函数即可：

const handleClick1 = () => {
  // 仅编写当前点击事件的独有逻辑
  const customLogic = (res) => {
    // step1 处理返回数据
    const tableData = res.data.list;
    // step2 渲染页面
    renderDataTable(tableData);
    // stepn 其他独有逻辑
    updatePageStatus('loaded');
  };

  // 传入自定义逻辑调用通用请求
  axios_related(customLogic);
};

const handleClick2 = () => {
  const customLogic = (res) => {
    // step1 提取详情数据
    const userInfo = res.data.user;
    // step2 打开弹窗
    openUserDetailModal(userInfo);
    // stepn 其他独有逻辑
    recordUserAccess();
  };

  axios_related(customLogic);
};

const handleClick3 = () => {
  const customLogic = (res) => {
    // step1 提取下载地址
    const fileUrl = res.data.exportUrl;
    // step2 触发下载
    triggerFileDownload(fileUrl);
    // stepn 其他独有逻辑
    showSuccessToast('导出任务已提交');
  };

  axios_related(customLogic);
};

3. 进阶灵活优化 #

如果后续不同场景需要适配不同的请求地址、请求方法、请求参数，可以进一步扩展封装的通用函数，适配更多场景：

/**
 * 通用请求封装
 * @param {string} url 请求地址
 * @param {string} method 请求方法，默认get
 * @param {object} params 请求参数
 * @param {function} successCallback 成功后的自定义回调
 */
const commonRequest = (url, method = 'get', params = {}, successCallback) => {
  axios({
    url,
    method,
    // 自动适配get/post的参数传递字段
    [method.toLowerCase() === 'get' ? 'params' : 'data']: params
  })
  .then((res) => {
    console.log(JSON.stringify(res, null, 2));
    if (typeof successCallback === 'function') successCallback(res);
  })
  .catch(err => console.log(err))
}

// 调用示例
// commonRequest('https://api.example.com/user', 'post', {id: 123}, (res) => {
//   // 自定义业务逻辑
// })

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