为什么承诺等于“未定义”？答案

【问题标题】：Why the promise is equal to "undefined"?为什么承诺等于“未定义”？
【发布时间】：2018-09-27 12:17:59
【问题描述】：

我正在尝试创建一个简单的加载器，当它被调用时，它会调用一个返回数据的 API

requestData(pageSize, page, sorted, filtered){
    console.log(filtered);
    var url = `http://www.myurl.com/getProducts?start=${page*pageSize}&end=${page*pageSize+pageSize}`;
    var r = new XMLHttpRequest();
    r.onreadystatechange = function () {
        return new Promise((resolve, reject) =>{
            if (r.readyState != 4 || r.status != 200){
                reject(r);
            } else {
                resolve(r.responseText);
            }
        })
    };
    r.open("GET", url, true);
    r.send(null);
};

fetchData(state, instance) {
    this.setState({ loading: true });

    this.requestData(
      state.pageSize,
      state.page,
      state.sorted,
      state.filtered
    ).then(res => {
        this.setState({
          data: res.rows,
          pages: res.pages,
          loading: false
        });
    });
}

这两个函数都在一个 React 组件中。问题出在对“未定义”对象调用的最后一个 .then() 上。为什么我的 promise 没有正确返回？

【问题讨论】：

requestData 不返回任何内容。

标签： javascript ajax reactjs promise xmlhttprequest

【解决方案1】：

因为你永远不会从requestData 返回任何东西。您只需将承诺返回回调函数，该回调函数将无处可去。您应该将回调包装到 Promise 中，而不是将 Promise 包装到回调中：

function  requestData(pageSize, page, sorted, filtered){
   return new Promise((resolve, reject) =>{
     console.log(filtered);
     var url = `http://www.myurl.com/getProducts?start=${page*pageSize}&end=${page*pageSize+pageSize}`;
    var r = new XMLHttpRequest();

    r.onreadystatechange = function () {        
        if (r.readyState != 4 || r.status != 200){
            reject(r);
        } else {
            resolve(r.responseText);
        }

    };
    r.open("GET", url, true);
    r.send(null);
 });
}

【讨论】：

【解决方案2】：

这是因为函数 requestData 没有返回任何内容。你必须像这样返回 Promise 对象

requestData(pageSize, page, sorted, filtered){
    return new Promise((resolve, reject) => {
        console.log(filtered);
        var url = `http://www.myurl.com/getProducts?start=${page*pageSize}&end=${page*pageSize+pageSize}`;
        var r = new XMLHttpRequest();
        r.onreadystatechange = () => {
            if (r.readyState != 4 || r.status != 200){
                reject(r);
            } else {
                resolve(r.responseText);
            }
        }

        r.open("GET", url, true);
        r.send(null);
    });
}

【讨论】：