javascript - XMLHttpRequest.onreadystatechange 行为异常

Question

我有一个名为 urlExists 的函数，我在几个项目中使用它都没有问题。现在我在患者面板中，需要在调用函数 addEventListener 之前检查 js 文件是否存在:

function urlExists(url){
   var http = new XMLHttpRequest();
   http.open('HEAD', url, false);
   http.onreadystatechange = function(){
       if(request.readyState==4){
           return true;
       }else{
           return false;
       }
   }
}
//other part of code

   if (urlExists('../../medvoice/speaker.js')){
      beep.addEventListener('ended', function() {
       var parameters = {
         target: dados,
         tts: {
            name: 'lianetts'
         },
         binder: 'speak',
          path: {
           name: '../../medvoice/mediapool/',
           link: '/medhosphsl/medvoice/mediapool/'
         }
       };                                                                                                                                               
       var speaker = new Speaker(parameters);
    });
   }

当将控制台日志放入 urlExists 中时，控制台会显示测试短语，但在 onreadystatechange 中不会显示。我错过了一些东西吗？

Answer 1

有几个问题:

1. 您的return true和return false没有从 urlExists 返回，他们从 onreadystatechange 返回打回来。 urlExists没有明确的return任何地方，因此调用它总是会导致 undefined .

2. 你从来不打电话send触发请求。

3. 您正在使用readyState确定资源是否存在，但这只是告诉您请求的状态；你应该检查status .

如果您必须使用同步请求，则不需要或不想要 onreadystatechange处理程序根本。这是解决所有这些问题的版本:

function urlExists(url){
   var http = new XMLHttpRequest();
   http.open('HEAD', url, false);
   http.send();
   return http.status === 200;
}

<小时/>

为了完整性:同步 ajax 请求会导致用户体验较差，并且很可能在某个时候完全被淘汰。相反，使用异步请求并具有 urlExists返回一个 promise :

function urlExists(url){
    return new Promise(function(resolve) {
        var http = new XMLHttpRequest();
        http.open('HEAD', url);
        http.onreadystatechange = function() {
            if (http.readyState === 4) {
                resolve(http.status === 200);
            }
        };
        http.send();
    });
}

// Usage:
urlExists("some-url").then(function(exists) {
    console.log("Exists? " + exists);
});

或更现代的方式 fetch 和 ES2015+ 箭头函数:

function urlExists(url) {
    return fetch(url, {method: "HEAD"}).then(response => response.ok);
}

// Usage:
urlExists("some-url").then(exists => console.log("Exists? " + exists));

或者我们可以拥抱 ES2017(下个月发布!):

async function urlExists(url) {
    return (await fetch(url, {method: "HEAD"})).ok;
}

// Usage (in another async function):
console.log("Exists? " + await urlExists("some-url"));

<小时/>

旁注:urlExists仅适用于可通过 ajax 访问的 URL，因此通常仅适用于同一来源的 URL。如果这是您的用例，那就太好了，但我想我会提到它。