将 XMLHttpRequest() 保存到变量的最佳方法

如何解决将 XMLHttpRequest() 保存到变量的最佳方法

将 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 的代码封装在该回调中。