JavaScript链式函数分支调用：按条件切换Axios请求方法

嘿，这个需求其实很好解决，我们可以通过先根据条件选定对应的Axios请求方法，再统一处理后续的Promise链式逻辑，这样既能满足不同场景的参数需求，又能避免重复写冗余代码。

方案一：统一方法调用（更简洁易维护） #

这种方式把请求方法和参数的选择与后续的结果处理分开，代码结构更清晰：

return (dispatch) => {
  // 根据条件选择对应的请求方法，用bind确保上下文正确
  const requestFn = someCondition 
    ? axios.put.bind(axios)
    : axios.post.bind(axios);

  // 整理对应方法需要的参数
  const requestParams = someCondition
    ? [`${ROOT_URL}/company`, data, config]
    : [`${ROOT_URL}/company`, data];

  // 统一执行请求并处理结果
  return requestFn(...requestParams)
    .then(companyResponse => {
      // 这里写你的成功回调逻辑，比如分发redux action
      // 示例：dispatch({ type: 'CREATE_COMPANY_SUCCESS', payload: companyResponse.data })
    })
    .catch(error => {
      throw error;
    });
};

方案二：直观的条件分支写法 #

如果觉得上面的参数数组有点绕，也可以直接用条件分支创建请求实例，再共享同一个then/catch逻辑，可读性更强：

return (dispatch) => {
  // 根据条件创建对应的请求Promise
  const request = someCondition
    ? axios.put(`${ROOT_URL}/company`, data, config)
    : axios.post(`${ROOT_URL}/company`, data);

  // 统一处理请求结果
  return request
    .then(companyResponse => {
      // 成功处理逻辑
    })
    .catch(error => {
      throw error;
    });
};

关键细节说明 #

• 使用bind(axios)是为了保证调用put/post方法时，this指向Axios实例，避免出现上下文丢失导致的报错。
• 两种方案都把重复的then/catch逻辑抽离出来，后续修改成功/失败处理时只需要改一处，大大提升可维护性。
• 方案二更适合参数差异小的场景，代码更直白；方案一则在请求方法或参数较多时更灵活。

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