javascript - react 等待服务器响应

我想编写一个从API请求一些信息的应用程序。只要此信息不可用，我就不想继续应用程序的其余部分。我已经试过了：

function suggestion(callback) {
    xhr.open('GET', 'http://localhost:3001/');
    xhr.onload = function() {
        var a = JSON.parse(xhr.responseText);
        console.log(a);
        callback(a);
    };
    xhr.send();
}

var sugg = suggestion(function(lista) {
    var s = [];
    lista.forEach(element => {
        s.push(element.event);
    });
    console.log(s);

    return s;
});

为什么Sugg返回未定义？

最佳答案

只要此信息不可用，我就不想继续其余的应用程序


这不是您使用Web技术（如果使用React，即使它是React本机）也要使用的技术。而是让应用程序在异步操作未完成时显示适当的“正在加载”或“待处理”状态，然后在操作完成时更新该状态。


  为什么Sugg返回未定义？


sugg是undefined，因为suggestion没有返回值。调用从不执行return something的函数的结果始终是undefined。回调具有return的事实无关紧要，没有任何东西使用callback()在suggestion中返回的内容（即使这样做了，以后也会这样做，而不是在将sugg分配给它时） 。

因此，将这两部分信息汇总在一起，我们得到：

function suggestion(callback){
    // (You probably need something declaring `xhr` and assigning
    // `new XMLHttpRequest()` to it here)
    xhr.open('GET', 'http://localhost:3001/');
    xhr.onload = function() {
        var a = JSON.parse(xhr.responseText);
        console.log(a);
        callback(a);
    };
    xhr.send();
}

showPendingState();      // ***
suggestion(function(lista){
    var s = [];
    lista.forEach(element => {
        s.push(element.event);
    });
    console.log(s);
    showRealStateUsing(s); // ***
});

但是，我建议使用promise而不是原始回调，并处理错误情况。而且，如果我们要使用承诺，那么我们使用现代的fetch而不是旧的XHR：

function suggestion() {
    return fetch('http://localhost:3001/')
        .then(response => {
            if (!response.ok) {
                throw new Error("HTTP status " + response.status);
            }
            return response.json();
        });
}

showPendingState();
suggestion()
    .then(showRealStateUsing) // `showRealStateUsing` receives the suggestion as an argument
    .catch(showErrorState);   // `showErrorState` receives the error as an argument

如果您要针对支持async functions（和/或转码）的环境，我们可以简化以下操作：

async function suggestion() {
    const response = await fetch('http://localhost:3001/');
    if (!response.ok) {
        throw new Error("HTTP status " + response.status);
    }
    return response.json();
}

// (in an `async` function)
showPendingState();
try {
    showRealStateUsing(await suggestion());
} catch (error) {
    showErrorState(error);
}