Spaces:
Sleeping
Sleeping
File size: 2,985 Bytes
d97b8f9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | # Centralized API Calls with Axios Interceptors
This directory contains the implementation of a centralized API client using Axios with interceptors for the PM Tool application.
## Structure
- `axios-instance.ts`: Contains the core Axios instance with configured interceptors for authentication, error handling, etc.
- `api-utils.ts`: Contains utility functions for common HTTP methods (GET, POST, PUT, PATCH, DELETE) with standardized error handling and response formatting.
- `index.ts`: Exports all API functionality for easier importing.
## Features
- **Authentication**: Automatically adds authentication tokens to each request
- **Error Handling**: Centralized error handling with custom error messages
- **Response Formatting**: Standardized response format for all API calls
- **Token Refresh**: Support for token refresh flow (to be implemented)
- **File Uploads**: Special handling for file uploads with progress tracking
## Usage
### Basic API Calls
Import the API functions from the library:
```typescript
import { get, getList, post, put, patch, del } from '../lib/api/api-utils';
```
Then use them in your service:
```typescript
// GET a single item
const response = await get<User>('/api/users/1');
// GET a list of items
const response = await getList<User>('/api/users');
// POST to create a new item
const response = await post<User, UserCreateRequest>('/api/users', newUser);
// PUT to update an item
const response = await put<User, UserUpdateRequest>('/api/users/1', updatedUser);
// PATCH to partially update an item
const response = await patch<User>('/api/users/1', { name: 'Updated Name' });
// DELETE an item
const response = await del('/api/users/1');
```
### File Uploads
```typescript
import { uploadFile } from '../lib/api/api-utils';
// Upload a file with progress tracking
const response = await uploadFile(
'/api/documents',
file,
{ documentType: 'invoice' },
(progress) => {
console.log(`Upload progress: ${progress}%`);
}
);
```
### Direct Access to Axios Instance
If you need more control, you can import the Axios instance directly:
```typescript
import { apiClient } from '../lib/api';
// Use it directly
const response = await apiClient.get('/api/custom-endpoint');
```
## Response Format
All API calls return a standardized response format:
```typescript
interface ResponseData<T> {
data: T; // The actual response data
success: boolean; // Whether the request was successful
message: string; // A message describing the result
}
```
## Error Handling
Errors are automatically handled and transformed into the same response format with:
- `success` set to `false`
- `data` set to a default value (empty object or array)
- `message` containing the error message
## Authentication
The API client automatically adds the authentication token to each request if available in localStorage. |