为何Promise返回值为undefined？XMLHttpRequest封装问题咨询

嘿，我帮你看看问题出在哪——你的代码里有两个关键问题导致返回undefined：

1. 函数本身没有返回任何值 #

你的requestData函数从头到尾没有return语句，所以不管内部做了什么，函数默认都会返回undefined。哪怕你在onreadystatechange里创建了Promise，也没把它传递到函数外部。

2. Promise的定义位置完全错了 #

你把new Promise()放在了onreadystatechange回调里，这意味着每次请求状态变化时都会创建一个新的Promise，但这些Promise根本没办法被外部调用者获取到。而且这种写法完全是Promise的反模式，正确的做法是把整个XMLHttpRequest的逻辑包裹在一个Promise里，然后返回这个Promise。

修正后的代码 #

这里是调整后的正确版本，我加了注释说明关键改动：

requestData(pageSize, page, sorted, filtered){
  console.log(filtered);
  var url = `http://www.myurl.com/getProducts?start=${page*pageSize}&end=${page*pageSize+pageSize}`;
  
  // 核心：返回这个包裹了请求逻辑的Promise
  return new Promise((resolve, reject) => {
    var r = new XMLHttpRequest();
    
    r.onreadystatechange = function () {
      // 先判断请求是否完成（readyState=4）
      if (r.readyState === 4) {
        if (r.status === 200) {
          // 请求成功，返回响应文本
          resolve(r.responseText);
        } else {
          // 请求失败，返回错误信息
          reject(new Error(`请求失败，状态码：${r.status}`));
        }
      }
    };
    
    // 额外处理网络错误（比如断网的情况）
    r.onerror = function() {
      reject(new Error('网络连接出错'));
    };
    
    r.open("GET", url, true);
    r.send();
  });
}

怎么使用修正后的函数 #

现在你可以用.then()/.catch()或者async/await来处理结果了：

方式1：使用.then() #

requestData(10, 1, [], {})
  .then(response => {
    console.log('拿到数据啦:', response);
    // 这里处理你的数据
  })
  .catch(error => {
    console.error('请求炸了:', error);
    // 这里处理错误
  });

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

async function loadData() {
  try {
    const response = await requestData(10, 1, [], {});
    console.log('拿到数据啦:', response);
  } catch (error) {
    console.error('请求炸了:', error);
  }
}
loadData();

这样修改后，你的函数就会正确返回Promise，不会再出现undefined的问题啦。

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