CODEWITHSUNDEEP
javascriptajaxxmlhttprequest
Nikola Dimitroff
Nikola Dimitroff

Reputation: 6237

Gracefully handling 404 in Ajax

I'm using XmlHttpObject to get a bunch of files from the server. Those files aren't crucial for my application so if any of them is missing I just want to log the error and continue anyway. Problem is, whenever a file is not found an exception is raised and that breaks all the code after.

function loadFile(path) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.status == 404) {
            // I can live with that, log it and go on
            console.log("file missing");
            return;
        }

        if (xhr.readyState == 4) {
            // Wohoo, all is fine, do loading stuff
        }
    }

    xhr.open("GET", path, true);
    xhr.send();
}

// Some time after
for (var i in files) {
    loadFile(file[i]);
    // If a file is not found, an exception is raised and the code below doesnt execute
}
// More stuff

What can I do to get that behaviour?

Upvotes: 3

Views: 2702

Answers (3)

quittle
quittle

Reputation: 906

If you're programming in chrome the only way to fix it is by disabling this message in the console. According to the Chromium team it's a feature, not a bug. Go figure. Check if you get the error in firefox, if not, then it's probably this.

Upvotes: 1

Emil L
Emil L

Reputation: 21071

What you probably want to do is pass in a function that should be called when the file has been loaded. And as Tys pointed out you should probably check the readystate before checking the status:

function loadFile(path, onsuccess, onnotfound) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {

        if (xhr.readyState == 4) {
            if (xhr.status == 404) {
                // Do error handling when request is complete
                onnotfound(xhr);
                return;
            }
            // Wohoo, all is fine, do loading stuff
            onsuccess(xhr);
        }
    }

    xhr.open("GET", path, true);
    xhr.send();
}

// Some time after
for (var i in files) {
    loadFile(file[i], function(xhr) {
        // Stuff to process a successfull response  
        // Adding things to the DOM etc etc. based on the response
    },
    function(xhr) { 
        console.log("file missing");
        // Additional error handling on file missing
    });

}

Upvotes: 2

ystan-
ystan-

Reputation: 1536

Your blocks are wrongly ordered. Only check for the xhr.status when the xhr.readyState has changed to 4. You were checking for the status prematurely.

function loadFile(path) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 404) {
                // I can live with that, log it and go on
                console.log("file missing");
            }
            else {
                // Wohoo, all is fine, do loading stuff
            }
        }
    }

    xhr.open("GET", path, true);
    xhr.send();
}

// Some time after
for (var i in files) {
    loadFile(file[i]);
    // If a file is not found, an exception is raised and the code below doesnt execute
}
// More stuff

Upvotes: 1

Related Questions