Скачать или смотреть How to Effectively Catch HTTP Errors Using Fetch in JavaScript

Learn how to handle HTTP errors when using the fetch API in JavaScript. Understand the solution and improve your error handling skills for better asynchronous programming.
---
This video is based on the question https://stackoverflow.com/q/66641185/ asked by the user 'utsavojha95' ( https://stackoverflow.com/u/14919359/ ) and on the answer https://stackoverflow.com/a/66641472/ provided by the user 'rmiguelrivero' ( https://stackoverflow.com/u/3950738/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Writing a function to catch http errors while using fetch to get data from api-endpoint

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Handling HTTP Errors with Fetch in JavaScript

When working with APIs, it’s common to face issues like network failures or HTTP errors. A common mistake is not handling these errors correctly in your code. In this guide, we'll explore an example of how to effectively manage HTTP errors while using the fetch method in JavaScript to get data from an API endpoint.

The Problem: HTTP Errors in Fetch

Imagine you are trying to fetch user data from the GitHub API. You use the following function to make the fetch request:

[[See Video to Reveal this Text or Code Snippet]]

However, in this example, you are encountering issues when checking for errors. Let's break down what might be going wrong in the handleErrors function where we check if the response is okay.

The Solution: Correctly Handling Errors

Understanding the Error Function

Your initial implementation of the handleErrors function looks like this:

[[See Video to Reveal this Text or Code Snippet]]

Issues with the Initial Implementation:

Input Argument Mistake: The input to handleErrors is not the original response object. Instead, it’s the parsed result of res.json(), which appears to be an array or object. Therefore, trying to access res.ok can lead to unexpected results or errors since it’s undefined.

Error Handling Logic: Because of the incorrect input, the condition if (!res.ok) will always evaluate to true throwing an error every time.

Revising the Error Function

To correct this, you only need to ensure you are checking res.ok before parsing the response to JSON. Here’s an improved approach for managing your fetch responses:

[[See Video to Reveal this Text or Code Snippet]]

Refactoring for Clarity

To enhance readability and abide by the principle of single responsibility, consider refactoring your code into separate functions. For instance:

[[See Video to Reveal this Text or Code Snippet]]

The Simplified Run Function

This leads to a cleaner main execution function:

[[See Video to Reveal this Text or Code Snippet]]

What Does !! Operator Do?

You might have seen the !! operator used in some contexts. The !! essentially converts a truthy or falsy value into a Boolean (true or false). For example, !!undefined returns false because undefined is a falsy value.

Tips for Learning Asynchronous Programming

Explore Resources: Websites like MDN Web Docs and freeCodeCamp are excellent for learning about asynchronous programming and AJAX.

Practice: Experiment with small fetch requests and gradually implement error handling.

Conclusion

When implementing fetch, make sure to properly handle potential HTTP errors. By refining your error handling strategy and separating responsibilities in your code, you'll not only catch errors more effectively but also create cleaner, more maintainable code.

Happy coding!