Last active
March 21, 2021 09:45
-
-
Save alexedwards/a175f4da955cbf57cf2c10f6798a8a6f to your computer and use it in GitHub Desktop.
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <body> | |
| <h1>Simple CORS</h1> | |
| <output></output> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| fetch("http://localhost:4000/v1/healthcheck").then( | |
| function (response) { | |
| response.text().then(function (text) { | |
| document.querySelector("output").innerHTML = text; | |
| }); | |
| }, | |
| function(err) { | |
| document.querySelector("output").innerHTML = err; | |
| } | |
| ); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
A lot better now!
One thought:
In the 'failure' callback we replace the contents of the <div id="output"> tag with the error message.
=>
In the 'failure' callback we replace the contents of the <div id="output"> element with the error message.
Or, maybe better yet with a closing </div> tag:
=>
In the 'failure' callback we replace the contents of the <div id="output"></div> element with the error message.
A <div> tag without a closing </div> looks funny to me.
@jkananen Done! Thank you for the help 😃 👍
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@jkananen Thanks very much! You're right --- it did feel too clunky and heavy. I've tried to simplify it and work in your suggestions:
fetch()function to make a request to our API healthcheck endpoint. By default this sends aGETrequest, but it's also possible to configure this to use different HTTP methods and add custom headers. We'll explain how to do that later.fetch()method works asynchronously and returns a promise. We use thethen()method on the promise to set up two callback functions: the first callback is executed iffetch()is successful, and the second is executed if there is a failure.response.text(), and usedocument.getElementById("output").innerHTMLto replace the contents of<div id="output">with this response body.<div id="output">tag with the error message.document.addEventListener('DOMContentLoaded', function(){...}), which essentially means thatfetch()won't be called until the user's web browser has completely loaded the HTML document.