Skip to content

Commit

Permalink
Add response status handling and new events.
Browse files Browse the repository at this point in the history
  • Loading branch information
@hmvictor
hmvictor committed Jul 20, 2020
1 parent 66fb11c commit 2db6f74
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 32 deletions.
63 changes: 46 additions & 17 deletions fetchEvents.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const proxiedFetch = window.fetch;
window.fetch = function(url, init) {
document.dispatchEvent(
window.dispatchEvent(
new CustomEvent(
"fetchStart",
{
Expand All @@ -12,22 +12,51 @@ window.fetch = function(url, init) {
)
);
const promise=proxiedFetch.apply(this, arguments);
promise.then((response) => {
document.dispatchEvent(new CustomEvent("fetchComplete", {
detail: {
url: url,
init: init,
response: response
}
}));
}, (error) => {
document.dispatchEvent(new CustomEvent("fetchFail", {
detail: {
url: url,
init: init,
error: error
}
}));
promise.then(response => {
if(response.ok) {
window.dispatchEvent(
new CustomEvent("fetchResponseSuccess", {
detail: {
url: url,
init: init,
response: response
}
}));
} if(response.status >= 400 && response.status < 600) {
window.dispatchEvent(
new CustomEvent("fetchResponseError", {
detail: {
url: url,
init: init,
response: response
}
}));
}
window.dispatchEvent(
new CustomEvent("fetchComplete", {
detail: {
url: url,
init: init,
response: response
}
}));
}, error => {
window.dispatchEvent(
new CustomEvent("fetchError", {
detail: {
url: url,
init: init,
error: error
}
}));
window.dispatchEvent(
new CustomEvent("fetchComplete", {
detail: {
url: url,
init: init,
error: error
}
}));
});
return promise;
};
45 changes: 30 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,28 +19,42 @@ <h1 id="title" class="text-center">Functionality without compromises</h1>
<div class="form-group">
<h2>fetchEvents.js - Document Scope Fetch Events</h2>
<br/>
<p>Add event listeners to the document object and execute code when a fetch happens.</p>
<p>Add event listeners to the window object and execute code when a fetch happens.</p>
<table class="table table-sm">
<caption>Available events</caption>
<thead>
<tr>
<th>Event Name</th>
<th>Description</th>
<th>Event Detail Properties</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>fetchStart</code></td>
<td>Right before the fetch is started</td>
<td><code>event.detail.url, event.detail.init</code></td>
</tr>
<tr>
<td><code>fetchComplete</code></td>
<td><code>fetchResponseSuccess</code></td>
<td>When the response status is in 200-299 range.</td>
<td><code>event.detail.url, event.detail.init, event.detail.response</code></td>
</tr>
<tr>
<td><code>fetchFail</code></td>
<td><code>fetchResponseError</code></td>
<td>When the response status is in 400-599 range.</td>
<td><code>event.detail.url, event.detail.init, event.detail</code></td>
</tr>
<tr>
<td><code>fetchError</code></td>
<td>When there was any network error.</td>
<td><code>event.detail.url, event.detail.init, event.detail.error</code></td>
</tr>
<tr>
<td><code>fetchComplete</code></td>
<td>Final event independently if there was an error or response.</td>
<td><code>event.detail.url, event.detail.init, event.detail.response (if there was a response), event.detail.error (if there was an error)</code></td>
</tr>
</tbody>
</table>
<p>Example:</p>
Expand Down Expand Up @@ -74,11 +88,11 @@ <h4>
<code>
//Register listeners in javascript
<br/>
document.addEventListener("fetchStart", event => {});
window.addEventListener("fetchStart", event => {});
<br/>
document.addEventListener("fetchComplete", event => {});
window.addEventListener("fetchResponseSuccess", event => {});
<br/>
document.addEventListener("fetchFail", event => {});
window.addEventListener("fetchError", event => {});
</code>
</p>
<div>
Expand All @@ -92,21 +106,22 @@ <h4>
<br/>
</div>
<script type="module">
document.addEventListener("fetchStart", event => {
window.addEventListener("fetchStart", event => {
if(window.logId) {
document.getElementById(window.logId).innerHTML="Fetch start. Url: ["+event.detail.url+"]. HTTP Method: ["+event.detail.init.method+"]";
}
});
document.addEventListener("fetchComplete", event => {
if(window.logId && event.detail.response.status === 200) {
event.detail.response.json().then(content => {
document.getElementById(window.logId).innerHTML+="<br/>Fetch complete. Url: ["+event.detail.url+"]. HTTP Method: ["+event.detail.init.method+"]. Response: "+content+".";
});
}
window.addEventListener("fetchResponseSuccess", event => {
event.detail.response.json().then(content => {
document.getElementById(window.logId).innerHTML+="<br/>Fetch response success. Url: ["+event.detail.url+"]. HTTP Method: ["+event.detail.init.method+"]. Response: "+content+".";
});
});
window.addEventListener("fetchResponseError", event => {
document.getElementById(window.logId).innerHTML+="<br/>Fetch response error. Url: ["+event.detail.url+"]. HTTP Method: ["+event.detail.init.method+"]. Status: ["+event.detail.response.status+"]";
});
document.addEventListener("fetchFail", event => {
window.addEventListener("fetchError", event => {
if(window.logId) {
document.getElementById(window.logId).innerHTML+="<br/>Fetch fail. Url: ["+event.detail.url+"]. HTTP Method: ["+event.detail.init.method+"].";
document.getElementById(window.logId).innerHTML+="<br/>Fetch error. Url: ["+event.detail.url+"]. HTTP Method: ["+event.detail.init.method+"]. Error: "+event.detail.error;
}
});
</script>
Expand Down

0 comments on commit 2db6f74

Please sign in to comment.