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

Question

将 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})

但还是没有运气。

Answer 1

您正在发出异步请求，因此，您不能立即将需要的值分配给 x 以供使用，您的代码需要一种方法来等待请求，然后才能使用或 return 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
})

您只能在链式 .then() 方法的回调中使用 size 的值。

如果您重新分配或尝试从外部访问它，它将不工作，因为它可能在您的代码执行时不可用。

另一种方法是使用回调函数，我看到你已经尝试过了，但问题是你是这样重新分配它的image_size = size。

您只能在该回调函数中使用它。

所以从技术上讲，您需要将所有需要 image-size 的代码包装在该回调中。

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

Best method to save an XMLHttpRequest() to variable

javascript

xmlhttprequest