Question

我有一个简单的AJAX请求，该请求会加载.txt文件：

var game = {
loadWordList : function(){
    var request = new XMLHttpRequest();

    request.open("GET", "https://gist.githubusercontent.com/deekayen/4148741/raw/01c6252ccc5b5fb307c1bb899c95989a8a284616/1-1000.txt", false);

    request.onreadystatechange = function request_word_list(){
        if(request.readyState === 4)
            if(request.status === 200 || request.status == 0){
                this.allWords = request.responseText.split('\n'); // MAIN ISSUE!
                return true;
            }
            else
                return false;
    }
    request.send(null);
},

主要问题是，在声明变量this.allWords后，它在其他地方使用后返回undefined。

例如，如果我输入： console.log(game.allWords);

输出将为undefined，并且不是单词列表。

如何让JavaScript等待AJAX完成请求？

Answer 1

您需要的是Promises，async / await和新的访存API。

（async（）=> { const game = {};

game.loadWordList = () => {
    return new Promise(async (resolve, reject) => {
        let res = await fetch("https://gist.githubusercontent.com/deekayen/4148741/raw/01c6252ccc5b5fb307c1bb899c95989a8a284616/1-1000.txt");
        let text = await res.text();
        resolve(text.split('\n'))
    })
}

try {
    game.allWords = await game.loadWordList();
    console.log(game.allWords);
}
catch(err) {
    throw Error(err); // something went wrong with the request
}

}）（）

当您需要完成一项工作但不知道需要多少时间或发生的顺序时，会使用承诺。承诺可以解决，这意味着任务成功运行，也可以被拒绝，意味着存在错误。

fetch是基于Promise的API，或多或少是XMLHttpRequests的现代替代品

通过使用async / await的概念，您可以使用await关键字使代码“等待”，直到承诺解决为止。

在这里，我们等待直到提取成功检索到您的数据，然后才允许执行其后的其余代码，如果发生任何错误，try catch块将对其进行处理。

如果您想更详细地研究上述主题，请参考以下资源

https://javascript.info/promise-basics

https://javascript.info/async-await

如何在不使用jQuery的情况下使AJAX请求同步？

1 个答案: