javascript - 你能帮我理解如何修复这个异步代码吗?
问题描述
我是 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");
}
});
解决方案
你应该阅读更多关于 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");
}
});
推荐阅读
- python-3.x - threading.lock 强制线程顺序运行?
- c++ - 如何在另一条消息(M2)之前调用带有消息(M1)的lambda函数,但输出为“M2 M1”?
- php - 将图像“alt”添加到自定义主题
- php - PHP Wordpress 网站遭到入侵,这个混淆代码在做什么?
- python - 从 Pandas 的前一行中查找值
- sockets - 基于 C 和基于 python 的套接字会影响节点之间的延迟吗?
- java - 如何在 Mapreduce 作业的 Mapper 中获取数据分片的文件路径?
- qt - Qt 如何避免 std::filesystem 链接器错误?
- unity3d - 在 AR 相机上播放时,图像目标上的视频比原始视频剪辑更暗
- javafx - Java FX 在 IDE 上,fxml 文件无法使用 Scene Builder 打开