The Fetch API is not that new and most developers have used it at some point to retrieve resources... Tagged with javascript, webdev, development, frontend.

Dev.to is a community platform for developers, offering resources, discussions, and networking opportunities to empower individuals in their coding journey. Developers can learn new programming languages, frameworks, and tools, engage in discussions on best practices, and share their experiences with fellow developers to enhance their skills and grow their professional network.

Learn how to handle errors when using the Fetch API and understand the best practices for error handling. Discover different approaches, such as using try/catch and checking the response status, and how to combine them for better error handling.

Fetch API, do you really know how to handle errors?

Best way to handle errors using Fetch API

One method I have started to use which I prefer to nesting is to chain on a .catch to the end even when using await. Then you can do an assertion on what comes back
<code>const expected = await myPromise().catch(()=&gt;({error: 'error'}))</code>

It is a good article. I took a couple of things.

check here advanced way to handle fetch error in react app : <a href="https://github.com/idurar/idurar-erp-crm/blob/master/frontend/src/request/request.js" target="_blank" rel="noopener nofollow">https://github.com/idurar/idurar-erp-crm/blob/master/frontend/src/request/request.js</a>
IDURAR is open source erp crm based on mern-stack Node.js React.js MongoDB ANT Design : <a href="https://github.com/idurar/idurar-erp-crm" target="_blank" rel="noopener nofollow">https://github.com/idurar/idurar-erp-crm</a>
<img src="https://media.daily.dev/image/upload/s--L0g90BJa--/f_auto/v1705484105/ugc/content_5d984065-cd82-4528-9051-0ea96ff7c6a4" alt="Screenshot 2024-01-17 at 10.34.47 AM">

Hello, good article.
I have something to share with you guys, a optimized method to fetch data from api in javascript:
<h2>The function</h2>
<pre><code class="language-javascript">async function fetchApiData(url, options = {}, retries = 3, backoff = 300) {
 try {
 const response = await fetch(url, options);
 if (!response.ok) { // or check for specific status codes if needed
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 return await response.json();
 } catch (error) {
 if (retries &gt; 0) {
 console.warn(`Retrying... (${retries} attempts left)`, error);
 await new Promise(resolve =&gt; setTimeout(resolve, backoff));
 return fetchApiData(url, options, retries - 1, backoff * 2);
 } else {
 console.error(&#x27;API request failed:&#x27;, error);
 throw error;
 }
 }
}
</code></pre>
<h2>Usage</h2>
<pre><code class="language-javascript">fetchApiData(&#x27;https://api.example.com/data&#x27;)
 .then(data =&gt; console.log(&#x27;Fetched data:&#x27;, data))
 .catch(error =&gt; console.error(&#x27;Failed to fetch data:&#x27;, error));
</code></pre>
<h2>1. options Argument</h2>
The options argument in the fetchApiData function is an object that allows you to customize various aspects of the HTTP request. This can include:
Method: The HTTP method to use, such as GET, POST, PUT, DELETE, etc.
Headers: Any HTTP headers you want to set for the request, typically including content type or authentication tokens.
Body: The body of the request, which is necessary for methods like POST or PUT. It’s usually in JSON format.
Mode: The mode you want to use for the request, such as cors, no-cors, or same-origin.
Credentials: Indicates whether the browser should send cookies with the request. Options include same-origin, include, or omit.
Cache: Dictates how the request should interact with the browser’s cache.
<h3>Example:</h3>
<pre><code class="language-javascript">let options = {
 method: &#x27;POST&#x27;,
 headers: { &#x27;Content-Type&#x27;: &#x27;application/json&#x27; },
 body: JSON.stringify(data)
};
</code></pre>
<h2>2. retries Argument</h2>
The retries argument is a number that specifies how many times the function should attempt to re-fetch the data in case of a failure. This is useful for handling transient errors or network issues that might temporarily disrupt the API service. After each failed attempt, the function waits for a specified duration (controlled by the backoff argument) before trying again.
<h2>3. backoff Argument</h2>
The backoff argument is used to implement an exponential backoff strategy. This is a technique where the time interval between retries progressively increases. It helps to efficiently manage server load and network congestion. The initial backoff delay is set by this argument, and with each retry, this delay is doubled.
For instance, if backoff is initially set to 300 milliseconds, the delays between retries will be 300ms, 600ms, 1200ms, and so on. This prevents the client from repeatedly hitting the server in quick succession, which can exacerbate network or server issues.
Thanks again for the article :)