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> |
@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:
- We use the
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. - The
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. - In our 'successful' callback we read the response body with
response.text(), and usedocument.getElementById("output").innerHTMLto replace the contents of<div id="output">with this response body. - In the 'failure' callback we replace the contents of the
<div id="output">tag with the error message. - This logic is all wrapped up in a
document.addEventListener('DOMContentLoaded', function(){...}), which essentially means thatfetch()won't be called until the user's web browser has completely loaded the HTML document.
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
It's understandable, a little "clunky" perhaps?
I haven't written JS docs so I'm a little hesitant to give exact text, but..:
I'd personally use a
<div>tag with an id or a class selector instead of<output>tag, but perhaps that's a matter of preference. I rarely, if ever, see<output>tag and using it might cause unnecessary confusion (I had to stop and see https://caniuse.com/?search=output).