嵌套函数调用失效咨询：含XMLHttpRequest的嵌套函数为何无法运行？

首先得说清楚，你遇到的大概率是异步操作导致的返回值丢失问题——毕竟XMLHttpRequest默认是异步的，你的getNumber()函数会在请求完成前就先返回了，内部函数的结果根本传不出来。我先模拟一个常见的错误写法（应该和你遇到的情况差不多）：

// 错误示例：拿不到返回值
function getNumber() {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/get-number', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 这里的return根本传不到外部！
      return parseInt(xhr.responseText);
    }
  };
  xhr.send();
}

// 调用后拿到undefined
let result = getNumber();
console.log(result); // undefined

为啥会这样？因为异步请求发出去后，JS不会等着它完成，getNumber()直接就执行完返回了，内部onload里的代码要等服务器响应回来才会跑，这时候外部早就已经执行完console.log了。

下面给你两种靠谱的解决方案，都能保留你需要的嵌套结构：

方案1：用回调函数处理结果 #

这是比较传统的异步处理方式，把要执行的后续逻辑放进回调里，等请求完成后再调用：

function getNumber(callback) {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/get-number', true);
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      let num = parseInt(xhr.responseText);
      callback(null, num); // 请求成功，把结果传给回调
    } else {
      callback(new Error(`请求失败，状态码：${xhr.status}`), null); // 失败传错误
    }
  };
  
  xhr.onerror = function() {
    callback(new Error('网络连接出错'), null);
  };
  
  xhr.send();
}

// 调用方式：后续逻辑写在回调里
getNumber(function(err, num) {
  if (err) {
    console.error('出事了：', err);
    return;
  }
  console.log('拿到数字啦：', num);
  // 这里可以调用你需要的其他函数
  doSomethingWithNumber(num);
});

function doSomethingWithNumber(num) {
  console.log('把数字翻倍：', num * 2);
}

方案2：用Promise+async/await（更现代的写法） #

这种方式代码可读性更高，逻辑更清晰，也是现在推荐的异步处理方式：

function getNumber() {
  // 返回一个Promise对象
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/get-number', true);
    
    xhr.onload = function() {
      if (xhr.status === 200) {
        let num = parseInt(xhr.responseText);
        resolve(num); // 请求成功，返回结果
      } else {
        reject(new Error(`请求失败，状态码：${xhr.status}`)); // 失败返回错误
      }
    };
    
    xhr.onerror = function() {
      reject(new Error('网络连接出错'));
    };
    
    xhr.send();
  });
}

// 方式一：用then/catch链式调用
getNumber()
  .then(num => {
    console.log('拿到数字啦：', num);
    doSomethingWithNumber(num);
  })
  .catch(err => {
    console.error('出事了：', err);
  });

// 方式二：用async/await（需要在async函数里用）
async function fetchAndProcess() {
  try {
    let num = await getNumber(); // 等待请求完成拿到结果
    console.log('拿到数字啦：', num);
    doSomethingWithNumber(num);
  } catch (err) {
    console.error('出事了：', err);
  }
}

fetchAndProcess();

function doSomethingWithNumber(num) {
  console.log('把数字翻倍：', num * 2);
}

这两种方案都能保留你需要的嵌套结构（xhr对象还是在getNumber()内部创建），同时解决异步操作导致的结果无法传递的问题。你可以根据自己的代码环境选择合适的方式~

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