Configuring the Fetch Client for specific needs like setting default headers, handling timeouts, or implementing retry logic can enhance application performance and reliability.
Setting Default Headers for JSON and Token Authorization
Setting default headers ensures that every request sent via the Fetch Client includes these headers, maintaining consistency and reducing redundancy in your code.
This configuration adds a simple caching layer, storing responses in a map and retrieving them for identical subsequent requests. It ensures faster response times for repeated requests to the same endpoints with the same parameters.
Simple Retry Logic on Network Failure
This example sets up a retry mechanism that retries the request up to three times with a one-second delay between attempts, but only for certain types of errors (like network errors).
function createRetryInterceptor(retries: number, delay: number) {
return {
response(response, request) {
return response;
},
responseError(error, request) {
if (retries > 0 && shouldRetry(error)) {
retries--;
return new Promise(resolve => setTimeout(resolve, delay))
.then(() => http.fetch(request));
}
throw error;
}
};
}
function shouldRetry(error) {
// Define logic to determine if the request should be retried
// For example, retry on network errors but not on HTTP 4xx or 5xx errors
return error instanceof TypeError; // Network errors are TypeErrors in fetch
}
http.configure(config => {
config.withInterceptor(createRetryInterceptor(3, 1000)); // Retry 3 times, 1-second delay
});
The Fetch client provides a default implementation of retry interceptor similar like above, with more options for configuration. It's enabled when called httpClient.configure(c => c.withRetry(...))