Undefined возвращается из проверки наличия файла

Question

Я проверяю, существует ли файл с определенным локальным URL-адресом через XMLHttpRequest, что-то вроде обходного процесса в файловой системе. Используя описанную ниже функцию pingFile, я пытаюсь выяснить, получаю ли я 200 или 404 для данного файла и выполняю некоторые действия в зависимости от этого результата.

function pingFile(theURL, callback) 
{ 
    var req = new XMLHttpRequest(); 
    req.onreadystatechange = function() { 
     if (this.readyState === this.DONE) { 
      if (callback !== null) { 
       return callback(this.status); 
      } else { 
       return this.status; 
      } 
     } 
    }; 
    req.open("HEAD", theURL); 
    req.send(); 
} 

var q = pingFile('images/image1.png', null); 

Однако, когда я проверяю значение q, всегда undefined. Мне кажется, что я пропустил что-то о асинхронном характере XHR, но я не смог найти, где ждать, так что this.status имеет одно из значений, которое я ожидал бы от проверки файла.

EDIT: Я попытался добавление return 4; после req.send(); и всегда дает q значение 4 независимо от того, есть ли там файл.

Как получить значение statusXMLHttpRequest от функции, в которой она находится?

Answer 1

Для асинхронных операций вы можете использовать обратные вызовы или обещания. Вот простой пример с обратными вызовами:

(function() { 
    function pingFile(theURL, success, error) { 
     var req = new XMLHttpRequest(); 
     req.onload = function (e) { 
      if (this.status === 200) { 
       success(e); 
      } else { 
       error(e); 
      } 
     }; 
     req.open("HEAD", theURL); 
     req.send(); 
    } 

    function fileExist(e) { 
     alert('File exist!'); 
    } 

    function fileNotExist(e) { 
     alert('File does not exist!'); 
    } 

    pingFile('images/image1.png', fileExist, fileNotExist); 
}());