Last active
August 16, 2023 19:00
-
-
Save santisbon/a7c221780b528bd3ebb8 to your computer and use it in GitHub Desktop.
Using XMLHttpRequest to load an image in a #javascript #promise. Based on Mozilla Developer Network documentation.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*jslint devel: true, browser: true, es5: true */ | |
/*global Promise */ | |
function imgLoad(url) { | |
'use strict'; | |
// Create new promise with the Promise() constructor; | |
// This has as its argument a function with two parameters, resolve and reject | |
return new Promise(function (resolve, reject) { | |
// Standard XHR to load an image | |
var request = new XMLHttpRequest(); | |
request.open('GET', url); | |
request.responseType = 'blob'; | |
// When the request loads, check whether it was successful | |
request.onload = function () { | |
if (request.status === 200) { | |
// If successful, resolve the promise by passing back the request response | |
resolve(request.response); | |
} else { | |
// If it fails, reject the promise with a error message | |
reject(new Error('Image didn\'t load successfully; error code:' + request.statusText)); | |
} | |
}; | |
request.onerror = function () { | |
// Also deal with the case when the entire request fails to begin with | |
// This is probably a network error, so reject the promise with an appropriate message | |
reject(new Error('There was a network error.')); | |
}; | |
// Send the request | |
request.send(); | |
}); | |
} | |
function loadImage() { | |
'use strict'; | |
// Get a reference to the body element, and create a new image object | |
var body = document.querySelector('body'), | |
myImage = new Image(); | |
myImage.crossOrigin = ""; // or "anonymous" | |
// Call the function with the URL we want to load, but then chain the | |
// promise then() method on to the end of it. This contains two callbacks | |
imgLoad('http://i.imgur.com/YzkSFCW.png').then(function (response) { | |
// The first runs when the promise resolves, with the request.reponse specified within the resolve() method. | |
var imageURL = window.URL.createObjectURL(response); | |
myImage.src = imageURL; | |
body.appendChild(myImage); | |
// The second runs when the promise is rejected, and logs the Error specified with the reject() method. | |
}, function (Error) { | |
console.log(Error); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment