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

【问题标题】：Can you help me understand how to fix this asynchronous code?你能帮我理解如何修复这个异步代码吗？
【发布时间】：2020-10-07 21:50:31
【问题描述】：

我是 Javascript 新手，在尝试理解异步代码以及如何管理它时遇到了严重的问题。我的主要问题是，我正在尝试使用 http 请求读取 JSON 对象（到引号列表）并将其存储在全局中以供以后使用。在尝试运行我的代码时，因为它是异步运行的，所以该对象在其他函数中将被视为未定义，因为定义它的函数到那时还没有完成。我真的不知道如何解决这个问题。

非常感谢任何帮助！

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

【问题讨论】：

"将其存储在全局中以备后用。" - 不要。只需直接从onload 回调中调用populate(quotesList)，并将值作为参数传递。不要使用全局变量。（并且可能您必须将高度格式代码移动到populate）
但是每次我想填充 html 元素时，我不需要 getQuotes 吗？当用户选择“下一个报价”时，我希望报价列表可用。有本地人不是更辛苦吗？
抱歉，不清楚用户是否可以选择“下一个报价”。在这种情况下，您可以让populate 显示一个引号和按钮显示下一个，这样下一个按钮上的事件侦听器也可以访问quotesList。它不需要是全局的。

标签： javascript jquery asynchronous synchronous

【解决方案1】：

你应该阅读更多关于 Promise、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");
    }
});

【讨论】：