变量在其范围内不保存值

Question

在下面的函数中，我有这两个变量，size和total，它们应该在整个功能块中都可以访问，但是当执行到达第三个if时，它们undefined呈现值：

function update_cart() {
var cart_size = document.getElementById('cart_size');
var cart_status = document.getElementById('cart_status');
var cart_total = document.getElementById('cart_total');
var size, total;
if(cart_size !== null) {
var cliente = cart_size.dataset.cliente;
var url = cart_size.dataset.url;
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
size = xhr.responseText;
cart_size.innerHTML = size;
if(size == 0)
cart_size.style.display = 'none';
else
cart_size.style.display = 'block';
}
};
var formData = new FormData();
formData.append("cliente", cliente);
xhr.send(formData);
}
if(cart_total !== null) {
var cliente = cart_total.dataset.cliente;
var url = cart_total.dataset.url;
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
total = xhr.responseText;
var currency = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(total);
cart_total.innerHTML = currency;
}
};
var formData = new FormData();
formData.append("cliente", cliente);
xhr.send(formData);
}
if(cart_status !== null) {
switch(size) {
case 0:
cart_status.innerHTML = 'A cesta de compras está vazia.';
document.getElementById('table').style.display = 'none';
break;
case 1:
cart_status.innerHTML = size + ' produto adicionado na cesta, com valor ' + total;
document.getElementById('table').style.display = 'block';
break;
default:
cart_status.innerHTML = size + ' produtos adicionados na cesta, com valor ' + total;
document.getElementById('table').style.display = 'block';
break;
}
}
}

我已经尝试用var和let声明它们，结果相同。在cart_status所在的页面中，cart_size和cart_total都存在。

任何人都可以给出如何解决这个问题的提示？

Answer 1

您必须了解对xhr.onreadystatechange的调用是异步调用。因此，如果您尝试在异步操作发生/解决之前捕获/使用size或total的值，您将在其中获得undefined值。

在那里，你必须做的是使用回调来处理它们的值，在它们来自异步调用之后。

Answer 2

它不起作用，因为这些变量是在回调中定义的。

xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
size = xhr.responseText;
cart_size.innerHTML = size;
if(size == 0)
cart_size.style.display = 'none';
else
cart_size.style.display = 'block';
}
};

此代码异步调用，读取：稍后，当您收到网络调用的响应时。
如果要访问该变量，则必须将使用变量的代码移动到回调。

Answer 3

正如其他人所说，默认情况下XMLHttpRequest是异步的。这意味着它不会阻止脚本的其余部分执行。

因此，您可以等到第一个请求完成再执行下一个请求，在第二个请求完成后，您应该拥有所需的所有值。

我认为是这样的：

var firstRequest = new XMLHttpRequest();
firstRequest.open('POST', 'someUrl');
firstRequest.onreadystatechange = function() {
if (firstRequest.readyState == 4 && firstRequest.status == 200) {
size = firstRequest.responseText;
var secondRequest = new XMLHttpRequest();
secondRequest.open('POST', 'someOtherUrl');
secondRequest.onreadystatechange = function() {
if (secondRequest.readyState == 4 && secondRequest.status == 200) {
total = secondRequest.responseText;
// Now you should have both size and total variables available
}
};
}
};

不漂亮，但它应该可以工作。