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

Question

我是 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");
    }
});

Answer 1

你应该阅读更多关于承诺的内容，async/await

这是你的工作代码（这只适用于新的浏览器（例如没有 IE）否则你需要 babel 来转换异步等待代码）

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");
    }
});

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

Can you help me understand how to fix this asynchronous code?

javascript

jquery

asynchronous

synchronous