如何创建动态Ajax函数？重复请求封装实现可行性问询

问题描述 #

我在项目里写了大量重复的Ajax请求代码，示例如下：

$.ajax({ 
  url: 'file.php', 
  type: 'POST', 
  async: true, 
  data: {'data' : data}, 
  success: function( data){ 
    //Do Something. 
  } 
});

为了减少重复代码，我想封装一个动态函数，传入fileName、reqType、dataObj、succFunction这些参数，之后发起请求只需要调用这个函数传参就行。我写了下面的示例代码：

function dynamicAjax(fileName , reqType , dataObj , succFunction){ 
  $.ajax({ 
    url: fileName, 
    type: reqType, 
    async: true, 
    data: dataObj, 
    success: function( data){ 
      //Run The Passed Function (succFunction). 
    } 
  }); 
}

调用方式是这样的：

dynamicAjax ('file.php' , 'POST' , {'data1': data1, 'data2': data2} , function(){ 
  //Do Something. 
} );

想请教一下这种实现方式是否可行？

回答 #

当然可行！这种封装思路非常棒，正好是DRY（Don't Repeat Yourself）原则的典型应用，能大大减少项目里的重复代码，提升整体的可维护性。

不过你当前的实现有个小疏漏：在success回调里，你只是注释了要执行传入的succFunction，但没有实际调用它，而且还要记得把Ajax返回的data（还有可选的textStatus、jqXHR参数）传递给这个回调函数，这样外部的成功回调才能拿到请求结果。

修正后的基础版函数应该是这样的：

function dynamicAjax(fileName , reqType , dataObj , succFunction){ 
  $.ajax({ 
    url: fileName, 
    type: reqType, 
    async: true, 
    data: dataObj, 
    success: function(data, textStatus, jqXHR){ 
      // 调用传入的成功回调，并传递Ajax返回的参数
      succFunction(data, textStatus, jqXHR);
    } 
  }); 
}

另外，还可以做一些优化让这个工具函数更健壮、灵活：

• 给参数设置默认值，比如默认请求类型为GET（毕竟GET请求更常用）
• 增加错误回调的参数，方便统一处理请求失败的场景
• 改用对象参数的形式，避免调用时因为参数顺序出错

比如优化后的进阶版本：

function dynamicAjax(options) {
  // 设置默认配置，覆盖jQuery ajax的默认项
  const defaultOptions = {
    type: 'GET',
    async: true,
    data: {},
    success: () => {},
    error: (jqXHR) => console.error(`请求失败：${jqXHR.status}`)
  };
  // 合并用户传入的配置和默认配置
  const finalOptions = {...defaultOptions, ...options};
  
  $.ajax(finalOptions);
}

调用的时候就可以更灵活，不用死记参数顺序：

dynamicAjax({
  url: 'file.php',
  type: 'POST',
  data: {'data1': data1, 'data2': data2},
  success: function(data) {
    // 处理成功逻辑
    console.log('请求返回数据：', data);
  },
  error: function(jqXHR) {
    // 自定义错误处理
    alert(`请求出错，状态码：${jqXHR.status}`);
  }
});

这种优化后的方式既保留了封装的简洁性，又兼顾了不同场景的灵活性，后续维护起来也更省心。

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