Error handling for JS fetch requests

The following example handles server and connectivity errors for javascript fetch requests.

<script>

function handleErrors(response) {
    if (!response.ok) throw new Error(response.status)
    return response
}

fetch('https://jsonplaceholder.typicode.com/todos/1')
    // handle network err/success
    .then(handleErrors)
    // use response of network on fetch Promise resolve
    .then(response => console.log("ok"))
    // handle fetch Promise error
    .catch(error => console.log('found an error: ', error))

</script>

handleErrors can be updated for handling different types of errors in different ways. This function is called whenever we get a response from the server (successful or failed). When we have a different type of error, like a DNS one, the catch block is called directly.

All errors are caught by the catch section, because server errors end up in throwing a new Error instance. Such Error instance can be extended to meet specific needs.

References

Leave a Reply