Как сделать AJAX-запросы синхронными без jQuery?

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 - это API, основанный на обещаниях, который является более или менее современной заменой XMLHttpRequests,

с использованием понятий async /await вы можете заставить свой код «ждать», пока обещание не будет выполнено, с помощью ключевого слова await,

здесь мы ждем, пока извлечение не получит ваши данные, и затем разрешаем только остальной код, следующий за нимвыполнить, если возникнет какая-либо ошибка, блок try catch будет обрабатывать ее.

Вот некоторые ресурсы, если вы хотите более подробно изучить вышеупомянутые темы,

https://javascript.info/promise-basics

https://javascript.info/async-await