Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

33 lines (32 sloc) 1.23 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple fetch()</title>
</head>
<body>
<script>
// Call the fetch() method to fetch the image, and store it in a variable
fetch('coffee.jpg')
// Use a then() block to respond to the promise's successful completion
// by taking the returned response and running blob() on it to transform it into a blob
.then(response => response.blob())
// blob() also returns a promise; when it successfully completes it returns
// The blob object in the callback
.then(myBlob => {
// Create an object URL that points to the blob object
let objectURL = URL.createObjectURL(myBlob);
// Create an <img> element to display the blob (it's an image)
let image = document.createElement('img');
// Set the src of the <img> to the object URL so the image displays it
image.src = objectURL;
// Append the <img> element to the DOM
document.body.appendChild(image);
})
// If there is a problem, log a useful error message to the console
.catch(e => {
console.log('There has been a problem with your fetch operation: ' + e.message);
});
</script>
</body>
</html>
You can’t perform that action at this time.