XMLHttpRequest 已弃用。用什么代替？

Question

尝试使用纯 JS 方法来检查我是否有有效的 JS 图像 url。我收到警告称

XMLHttpRequest

已弃用。有什么更好的方法来做到这一点？

urlExists(url) {
    const http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    if (http.status !== 404) {
      return true;
    }
    return false;
  }

Answer 1

您可能会收到一条消息，指出 XMLHttpRequest 的同步使用已被弃用（因为它对用户体验产生有害影响；它会在等待响应时冻结页面）。我可以向您保证，该 API 的正确异步使用并没有被弃用。

以下是正确使用的一些示例代码：

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
    if (this.readyState === this.DONE) {
        console.log(this.status) // do something; the request has completed
    }
}
xhr.open("HEAD", "http://example.com") // replace with URL of your choosing
xhr.send()

Answer 2

警告的原因是在

http.open('HEAD', url, false);

中您将第三个参数（异步）设置为

false

。根据 https://xhr.spec.whatwg.org/#synchronous-flag，应将其设置为

true

。

Answer 3

该警告可能是因为您正在尝试执行同步请求。

Answer 4

XMLHttpRequest 已被折旧，因为自 2015 年以来 fetch api 取代了它的位置。2023 年正式折旧。

等待 fecth (url,{ method: "POST", // *GET, POST, PUT, DELETE 등 mode: "cors", // 无cors、*cors、同源 缓存：“无缓存”，//*默认、无缓存、重新加载、强制缓存、仅缓存 凭证：“同源”，//包含，*同源，省略 标题：{ “内容类型”：“应用程序/json”， // '内容类型': 'application/x-www-form-urlencoded', }，额外选项）

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

如果某些东西被贬值，mozilla 可以找到专门针对 http 相关领域的替代品