Javascript 你能帮助我理解如何修复这个异步代码吗？

我是Javascript新手，在理解异步代码以及如何管理它时遇到了严重的问题。我的主要问题是，我试图通过http请求读入一个JSON对象（到quotesList），并将其存储在一个全局文件中，以备以后使用。当试图运行我的代码时，因为它是异步运行的，所以对象在其他函数中会被视为未定义的，因为定义它的函数到那时还没有完成。我真的不知道如何解决这个问题

非常感谢您的帮助

let requestURL = 'https://gist.githubusercontent.com/nasrulhazim/54b659e43b1035215cd0ba1d4577ee80/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json'
var quotesList; 
var x = 5; 

var colors = [
    "EE6D51",
    "72EE51",
    "E7EA27",
    "FFA428",
    "28FF4F",
    "456CFC",
    "A645FC",
    "FC459B",
    "FC458A",
    "FE2842",
    "28FED4"
]


function getQuotes() {
    let request = new XMLHttpRequest(); 
    request.open('GET', requestURL);
    request.responseType = 'json'; 
    request.send(); 

    request.onload = function() {
        quotesList = request.response; 
        if (quotesList == null) {
            alert("Something's definitely wrong here...");
        }
        console.log('quotesList');
        console.log(quotesList);
    }
}

function populate() {
    var x = Math.floor(Math.random() * Math.floor(quotesList.quotes.length)); 
    document.getElementById('quote').innerHTML = quotesList.quotes[x].quote;
    document.getElementById('author').innerHTML = quotesList.quotes[x].author;
}

$(function() {

    getQuotes()
    populate

    while(($('.container strong ').height() >= 300)) {
        $('.container strong').css('font-size', (parseInt($('.container strong').css('font-size')) - 10.5) + "px");
        $('.container h3').css('font-size', (parseInt($('.container h3').css('font-size')) - 7.5) + "px");
    }
});

---

您应该阅读更多关于承诺、异步/等待的信息

这是您的工作代码（这仅适用于新浏览器（不适用于IE），否则您需要babel来传输异步等待代码）

---

“将其储存在全球数据库中以备日后使用。”-不要。直接从

onload

回调调用

populate（quotesList）

，并将值作为参数传递。不要使用全局变量。（很可能您必须将高度格式代码移动到

填充

），但是每次填充html元素时我不需要获取引号吗？我想让quoteList在用户选择“下一个quote”时可用。有本地quote不是更难吗？对不起，不清楚用户是否可以选择“下一个quote”。在这种情况下，您可以使

填充

显示一个引号和显示下一个引号的按钮，以便“下一步”按钮上的事件侦听器也可以访问

引号列表

。这不需要是全球性的。

let requestURL = 'https://gist.githubusercontent.com/nasrulhazim/54b659e43b1035215cd0ba1d4577ee80/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json'
var quotesList; 
var x = 5; 

var colors = [
    "EE6D51",
    "72EE51",
    "E7EA27",
    "FFA428",
    "28FF4F",
    "456CFC",
    "A645FC",
    "FC459B",
    "FC458A",
    "FE2842",
    "28FED4"
]


function getQuotes() {
 return new Promise(function (resolve, reject) {
    let request = new XMLHttpRequest(); 
    request.open('GET', requestURL);
    request.responseType = 'json'; 
    
    request.onload = function() {
        let status = request.status;
        quotesList = request.response; 
        if (quotesList == null) {
            alert("Something's definitely wrong here...");
        }
        console.log('quotesList');
        console.log(quotesList);
        if (status == 200) {
            resolve(request.response);
        } else {
            reject(status);
        }
    }
    
    request.send(); 
    });
}

function populate() {
    var x = Math.floor(Math.random() * Math.floor(quotesList.quotes.length)); 
    document.getElementById('quote').innerHTML = quotesList.quotes[x].quote;
    document.getElementById('author').innerHTML = uotesList.quotes[x].author;
}

async function start(){
    await getQuotes();
    populate();
}

$(function() {

    start();

    while(($('.container strong ').height() >= 300)) {
        $('.container strong').css('font-size', (parseInt($('.container strong').css('font-size')) - 10.5) + "px");
        $('.container h3').css('font-size', (parseInt($('.container h3').css('font-size')) - 7.5) + "px");
    }
});