JavaScript函数作为参数传递及嵌套函数调用报错求助

嘿，我完全懂你的困扰——你想把getData()做成一个能复用的AJAX工具，随便传入不同的函数来处理返回的数据，但现在调用getOwnerList()时却碰到了doSomething is not a function的报错，之前参考过相关示例但卡在了新函数的定义上，不知道怎么搜这个问题对吧？

咱们来拆解下问题，大概率是回调函数的作用域传递或者函数参数的传递方式出了问题。下面给你一个直接可行的解决方案：

修正后的可复用getData()函数 #

function getData(url, handleData) {
  const xhr = new XMLHttpRequest();
  
  xhr.onreadystatechange = function() {
    // 先确认请求成功完成
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 先检查传入的处理函数是否有效
      if (typeof handleData === 'function') {
        // 把返回的数据传给处理函数
        handleData(xhr.responseText);
      }
    }
  };
  
  xhr.open('GET', url, true);
  xhr.send();
}

调用示例（对应你的getOwnerList()场景） #

function getOwnerList() {
  // 直接把数据处理逻辑作为函数参数传给getData
  getData('/your-owner-api-url', function(rawData) {
    // 这里就是你原本想放在doSomething里的逻辑，比如解析数据+更新页面
    const ownerList = JSON.parse(rawData);
    updateOwnerList(ownerList); // 对应你提到的function updateOwnerL...函数
  });
}

为什么这样能解决问题？ #

• 明确的参数传递：把处理数据的函数直接作为getData()的第二个参数传入，避免了作用域找不到函数的问题——之前的报错很可能是因为doSomething在AJAX回调的作用域里无法访问到。
• 通用性拉满：现在getData()完全可以复用，不管你要处理什么数据，只要传入对应的API地址和处理函数就行，比如：

  // 另一个调用示例，获取商品列表
  function getProductList() {
    getData('/your-product-api-url', function(data) {
      const products = JSON.parse(data);
      renderProductTable(products);
    });
  }
  

• 容错处理：加了typeof handleData === 'function'的判断，避免传入非函数值导致的报错。

这样调整后，你就可以灵活地用getData()处理各种AJAX请求，再也不会碰到回调函数找不到的问题啦～

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