-
-
Save alexedwards/a175f4da955cbf57cf2c10f6798a8a6f to your computer and use it in GitHub Desktop.
| <!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> |
It's understandable, a little "clunky" perhaps?
I haven't written JS docs so I'm a little hesitant to give exact text, but..:
- See good terminology for the first paragraph @ https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
- "We use the then() method on the promise to schedule two callback functions..."
- I don't think it's really "scheduling", so maybe say "We use the then() method on the promise to set up two callback functions..."
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).
@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 😃 👍
@jkananen Could I use your JavaScript expertise and ask if the following text is an accurate description of what is going on in the above code? I'm not certain that my terminology is totally correct!
document.addEventListener('DOMContentLoaded', function(){...})adds a listener which waits for the HTML document to loaded and parsed, before executing the given function. In our case, this means that thefetch()function won't be called until the HTML is fully loaded by a web browser.fetch()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 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 schedule two callback functions to be executed when the promise is resolved: the first callback function is executed iffetch()is successful, and the second is executed in the event of a failure.response.text()to read the response body to completion. This is also asynchronous and returns a promise, so in another callback function we use thedocument.querySelector("output").innerHTML = textcommand to replace the contents of the<output>tag in our HTML with the text from the response body.fetch(), we replace the contents of the<output>tag with the error message.