如何封装带参数的Ajax调用REST API函数，返回响应供其他类使用？

没问题，我帮你把这段AJAX代码封装成可复用的函数，既能传入参数拼接URL，还能返回响应供其他类复用。下面是具体实现方案：

核心思路 #

我们需要把AJAX请求逻辑抽成独立函数，让它只负责拼接URL、发起请求、返回响应，而数据处理（比如设置self.prop1这类操作）交给调用方来做——这样函数的复用性会更高，不同的调用场景可以自由处理返回的数据。

封装后的函数实现 #

function fetchApiData(param1, param2) {
  // 建议把BaseURL抽成全局配置或者函数参数，方便后续修改
  const baseUrl = "BaseURL";
  // 用模板字符串拼接URL，比字符串相加更清晰易读
  const fullUrl = `${baseUrl}${param1}/${param2}`;
  
  // 返回$.ajax的Promise对象，这样调用方可以用.then()或async/await处理结果
  return $.ajax({ url: fullUrl });
}

如何在其他类/场景中复用 #

原来的数据处理逻辑可以放在调用函数后的.then()回调里，或者用async/await语法，示例如下：

方式1：使用.then()链式调用 #

// 传入你的param1和param2值
fetchApiData("your-param1-value", "your-param2-value")
  .then(function(data) {
    // 这里处理返回的响应数据，和你原来的逻辑一致
    if (data.test == null) {
      self.prop1(data.test);
    }
    if (data.test2 !== null) {
      self.prop2(data.test2);
    }
    if (data.test3 !== null) {
      self.prop3(data.test3);
    }
  })
  .catch(function(error) {
    // 别忘了添加错误处理，避免请求失败时无提示
    console.error("API请求失败:", error);
  });

方式2：使用async/await（更简洁） #

如果你的环境支持ES6+语法，推荐用async/await：

async function handleApiResponse() {
  try {
    const data = await fetchApiData("your-param1-value", "your-param2-value");
    // 处理数据
    if (data.test == null) self.prop1(data.test);
    if (data.test2 !== null) self.prop2(data.test2);
    if (data.test3 !== null) self.prop3(data.test3);
  } catch (error) {
    console.error("请求出错:", error);
  }
}

// 调用函数
handleApiResponse();

额外优化建议 #

• BaseURL配置化：把BaseURL改成全局常量或者函数参数，比如function fetchApiData(baseUrl, param1, param2)，这样不同环境（开发/生产）切换时更方便。
• AJAX配置扩展：如果需要添加请求头、指定请求方法（GET/POST）等，可以在$.ajax里补充配置项，比如：

  return $.ajax({
    url: fullUrl,
    method: "GET",
    headers: { "Content-Type": "application/json" }
  });
  

• 类型提示（可选）：如果用TypeScript，可以给函数和参数加上类型注解，让代码更健壮。

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