问题描述
将 XMLHttpRequest 保存到变量以在 if 语句中使用的最佳方法是什么。我正在尝试获取图像大小并根据大小做一些事情。
** *请注意,我在此问题中使用了来自互联网的随机图像。我目前正在使用本地服务器进行测试 * **
这是我迄今为止尝试过的:
function get_image_size(imgurl) {
var xhr = new XMLHttpRequest();
let x
xhr.open('HEAD',imgurl,true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
x = xhr.getResponseHeader('Content-Length');
console.log(xhr.getResponseHeader('Content-Length')) // This works! returns bytes
} else {
console.log('ERROR');
}
}
};
xhr.send(null);
console.log(x) // This doesn't work
return x // This doesnt return anything
}
let image_size = get_image_size("https://images.ctfassets.net/hrltx12pl8hq/7yQR5uJhwEkRfjwMFJ7bUK/dc52a0913e8ff8b5c276177890eb0129/offset_comp_772626-opt.jpg?fit=fill&w=800&h=300")
// image_size returns "undifined"
我也试过:
function get_filesize(url,callback) {
var xhr = new XMLHttpRequest();
xhr.open("HEAD",url,true);
xhr.onreadystatechange = function() {
if (this.readyState == this.DONE) {
callback(parseInt(xhr.getResponseHeader("Content-Length")));
}
};
xhr.send();
}
get_filesize("https://images.ctfassets.net/hrltx12pl8hq/7yQR5uJhwEkRfjwMFJ7bUK/dc52a0913e8ff8b5c276177890eb0129/offset_comp_772626-opt.jpg?fit=fill&w=800&h=300",function(size){image_size = size})
但仍然没有运气。
解决方法
您正在发出一个异步请求,因此,您不能立即将需要的值分配给 x
以供使用,您的代码需要一种方法来等待请求,然后才能使用或返回 {{ 1}};
一种方法是将您的 x
函数包装在这样的 get_image_size
中
Promise
并像这样使用它
function get_image_size(imgurl) {
return new Promise((resolve,reject) => {
var xhr = new XMLHttpRequest();
xhr.open('HEAD',imgurl,true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(xhr.getResponseHeader('Content-Length'))
} else {
console.log('ERROR');
}
}
};
xhr.send(null);
})
}
您只能在链接的 const IMAGE_URL = "https://images.ctfassets.net/hrltx12pl8hq/7yQR5uJhwEkRfjwMFJ7bUK/dc52a0913e8ff8b5c276177890eb0129/offset_comp_772626-opt.jpg?fit=fill&w=800&h=300";
get_image_size(IMAGE_URL).then((size) => {
console.log(size)
// YOU CAN ONLY USE SIZE HERE.
// NOT OUTSIDE OR REASSIGNED
// COS IT MAY NOT BE AVAILABLE AS THIS IS AN ASYNCHRONOUS OPERATION
})
方法的回调中使用 size
的值。
如果您重新分配或尝试从外部访问它,它将不起作用,因为在您的代码执行时它可能不可用。
另一种方法是使用回调函数,我看到您已经尝试过,但问题是您像这样重新分配了 .then()
。
您只能在该回调函数中使用它。
因此,从技术上讲,您需要将所有需要 image_size = size
的代码封装在该回调中。