3
\$\begingroup\$

Building on a previous answer and an attempt to write a comprehensive XMLHttpRequest example that covers all kinds of possible errors and return them to caller gracefully instead of a crash.

function Remote() {}

Remote.upload = function(formData, progressHandler) {
    return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://localhost:3000");
        xhr.setRequestHeader("Accept", "application/json");
        xhr.addEventListener("error", function(event){
            reject({code: 0, message: "A network error occurred.", event: event});
        });
        xhr.upload.addEventListener("progress", progressHandler);
        xhr.addEventListener("readystatechange", function() {
            if(xhr.readyState == 4 && xhr.status != 0) { // exclude status 0
                try {
                    xhr.status == 200 ? resolve(JSON.parse(xhr.response)) : reject(JSON.parse(xhr.response));
                } catch(error) {
                    reject({code: 0, message: "JSON parsing error.", body: xhr.response});
                }
            }
        });
        xhr.send(formData);
    });
};

function progressHandler(event) {
    if(event.lengthComputable) {
        console.log((event.loaded / event.total * 100 | 0));
    }
}

Here in this example, I've added a check in the readystatechange not to handle status 0 errors since event handler can be triggered with all sorts of those errors, whether invalid certificate, offline or request getting suppressed. (Limitation: Can't figure out the exact error scenario hence the generic Network error message.

  • 200 status is success as suggested by the REST contract so it's hard coded.
  • JSON parsing error is also a possibility to handle any issues.
  • Code is meant to be backward compatible for older browsers.

Hope the code is comprehensive and takes care of all corners.

\$\endgroup\$

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.