Javascript 响应等待服务器响应

我想编写一个应用程序，从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原生的，也要使用web技术）。相反，您让应用程序在异步操作未完成时显示适当的“加载”或“挂起”状态，然后在操作完成时更新该状态

为什么sugg返回未定义

sugg

未定义，因为

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); // ***
});

但是，我建议使用承诺而不是原始回调，并处理错误情况。如果我们要使用承诺，让我们使用现代的
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 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);
}

只要这些信息不可用，我就不想继续应用程序的其余部分

这不是使用web技术的方式（如果使用React，即使它是React原生的，也要使用web技术）。相反，您让应用程序在异步操作未完成时显示适当的“加载”或“挂起”状态，然后在操作完成时更新该状态

为什么sugg返回未定义

sugg
未定义，因为
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); // ***
});

但是，我建议使用承诺而不是原始回调，并处理错误情况。如果我们要使用承诺，让我们使用现代的
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 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);
}

您没有从
建议
函数返回任何内容。由于它是异步的，您应该将所有感兴趣的返回值作为参数传递给
回调
函数。您不会从
建议
函数返回任何内容。由于它是异步的，您应该将所有感兴趣的返回值作为参数传递给
回调
函数；我不同意
async
/
await
更简单，但除此之外；完全正确