hs-fetch
v1.1.6
Published
**hs-fetch** is a TypeScript-based HTTP client library offering features like token management, retry logic, and timeout settings. It is designed to integrate seamlessly with frameworks like Next.js 14, supporting modern server and client-side rendering u
Downloads
634
Maintainers
Readme
hs-fetch
hs-fetch is a TypeScript-based HTTP client library offering features like token management, retry logic, and timeout settings. It is designed to integrate seamlessly with frameworks like Next.js 14, supporting modern server and client-side rendering use cases.
Note: Comprehensive E2E testing has been conducted using Cypress to ensure reliability and stability across various scenarios.
Key Features
- Token Management: Automatically checks for token expiration and refreshes tokens as needed. Handles multiple requests in a queue during token refresh, ensuring only one refresh occurs at a time.
- Retry Logic: Retries requests on failure for a specified number of times, with configurable delay intervals. Manages
401 Unauthorized
responses with a limit to prevent infinite loops. - Timeout Handling: Allows setting timeouts for requests, canceling them if the response takes too long.
- Hooks Support: Provides hooks for custom logic before and after requests.
- Next.js Integration: Options like
revalidate
andtags
for compatibility with Next.js ISR (Incremental Static Regeneration).
Installation
npm install hs-fetch
Usage Example
import Api from "hs-fetch";
// Create an API instance
const api = new Api({
baseUrl: "https://api.example.com",
getToken: () => localStorage.getItem("token"),
onRefreshToken: async () => {
// Implement token refresh logic
},
onRefreshTokenFailed: () => {
// Handle token refresh failure
},
authorizationType: "Bearer",
});
// Example GET request
const fetchData = async () => {
try {
const data = await api.get({
url: "/data",
query: { page: 1 },
revalidate: 60, // ISR revalidation
tags: ["data"], // ISR tags
});
console.log(data);
} catch (error) {
console.error("Error fetching data:", error);
}
};
// Example POST request
const postData = async () => {
try {
const response = await api.post({
url: "/data",
body: { name: "John Doe" },
onSuccess: (data) => {
console.log("Data posted successfully:", data);
},
onError: (error) => {
console.error("Error posting data:", error);
},
});
} catch (error) {
console.error("Error posting data:", error);
}
};
API Reference
Api
Class
The Api
class manages HTTP requests, handles token refresh, and implements retry logic.
Constructor
constructor(config: Partial<ApiConfig>)
Methods
get<T>(options: FetchOptions<T>): Promise<T>
post<T>(options: FetchOptions<T>): Promise<T>
put<T>(options: FetchOptions<T>): Promise<T>
patch<T>(options: FetchOptions<T>): Promise<T>
delete<T>(options: FetchOptions<T>): Promise<T>
These methods perform HTTP requests for their respective verbs, using FetchOptions for configuration.
FetchOptions
Interface
FetchOptions
allows you to customize your requests with various options.
interface FetchOptions<T = unknown> {
method?: string;
body?: T;
query?: Record<string, unknown>;
url: string;
headers?: Record<string, string>;
revalidate?: number;
tags?: string[];
retryCount?: number;
retryDelay?: number;
timeout?: number;
onSuccess?: (data: T) => void;
onError?: (error: Error) => void;
beforeRequest?: (url: string, options: RequestInit) => void;
afterResponse?: (response: Response) => void;
useToken?: boolean;
}