kimu-core 0.4.1 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.editorconfig +116 -30
- package/.gitattributes +81 -11
- package/.github/FUNDING.yml +8 -8
- package/.github/kimu-copilot-instructions.md +3779 -3779
- package/.github/workflows/deploy-demo.yml +39 -39
- package/.nvmrc +1 -0
- package/.prettierignore +44 -0
- package/.prettierrc +16 -0
- package/FUNDING.md +31 -31
- package/icon.svg +10 -10
- package/kimu-core-0.5.0.tgz +0 -0
- package/package.json +10 -3
- package/scripts/minify-css-assets.js +82 -82
- package/src/core/index.ts +47 -47
- package/src/core/kimu-global-styles.ts +136 -136
- package/src/core/kimu-reactive.ts +196 -196
- package/src/extensions/{kimu-home → app-root}/component.ts +5 -5
- package/src/extensions/extensions-manifest.json +4 -4
- package/src/main.ts +3 -3
- package/src/modules-repository/api-axios/CHANGELOG.md +48 -48
- package/src/modules-repository/api-axios/QUICK-REFERENCE.md +178 -178
- package/src/modules-repository/api-axios/README.md +304 -304
- package/src/modules-repository/api-axios/api-axios-service.ts +355 -355
- package/src/modules-repository/api-axios/examples.ts +293 -293
- package/src/modules-repository/api-axios/index.ts +19 -19
- package/src/modules-repository/api-axios/interfaces.ts +71 -71
- package/src/modules-repository/api-axios/module.ts +41 -41
- package/src/modules-repository/api-core/CHANGELOG.md +42 -42
- package/src/modules-repository/api-core/QUICK-REFERENCE.md +192 -192
- package/src/modules-repository/api-core/README.md +435 -435
- package/src/modules-repository/api-core/api-core-service.ts +289 -289
- package/src/modules-repository/api-core/examples.ts +432 -432
- package/src/modules-repository/api-core/index.ts +8 -8
- package/src/modules-repository/api-core/interfaces.ts +83 -83
- package/src/modules-repository/api-core/module.ts +30 -30
- package/src/modules-repository/event-bus/README.md +273 -273
- package/src/modules-repository/event-bus/event-bus-service.ts +176 -176
- package/src/modules-repository/event-bus/module.ts +30 -30
- package/src/modules-repository/notification/README.md +423 -423
- package/src/modules-repository/notification/module.ts +30 -30
- package/src/modules-repository/notification/notification-service.ts +436 -436
- package/src/modules-repository/router/README.it.md +61 -10
- package/src/modules-repository/router/README.md +61 -10
- package/src/modules-repository/router/router-config.ts.example +61 -0
- package/src/modules-repository/router/router.ts +18 -0
- package/src/modules-repository/state/README.md +409 -409
- package/src/modules-repository/state/module.ts +30 -30
- package/src/modules-repository/state/state-service.ts +296 -296
- package/src/modules-repository/theme/README.md +311 -267
- package/src/modules-repository/theme/module.ts +30 -30
- package/src/modules-repository/theme/pre-build.js +40 -40
- package/src/modules-repository/theme/theme-service.ts +411 -389
- package/src/modules-repository/theme/themes/theme-cherry-blossom.css +78 -78
- package/src/modules-repository/theme/themes/theme-cozy.css +111 -111
- package/src/modules-repository/theme/themes/theme-cyberpunk.css +150 -150
- package/src/modules-repository/theme/themes/theme-dark.css +79 -79
- package/src/modules-repository/theme/themes/theme-forest.css +171 -171
- package/src/modules-repository/theme/themes/theme-gold.css +100 -100
- package/src/modules-repository/theme/themes/theme-high-contrast.css +126 -126
- package/src/modules-repository/theme/themes/theme-lava.css +101 -101
- package/src/modules-repository/theme/themes/theme-lavender.css +90 -90
- package/src/modules-repository/theme/themes/theme-light.css +79 -79
- package/src/modules-repository/theme/themes/theme-matrix.css +103 -103
- package/src/modules-repository/theme/themes/theme-midnight.css +81 -81
- package/src/modules-repository/theme/themes/theme-nord.css +94 -94
- package/src/modules-repository/theme/themes/theme-ocean.css +84 -84
- package/src/modules-repository/theme/themes/theme-retro80s.css +343 -343
- package/src/modules-repository/theme/themes/theme-sunset.css +62 -62
- package/src/modules-repository/theme/themes-config-default.json +19 -0
- package/src/modules-repository/theme/themes-config.d.ts +27 -27
- package/src/modules-repository/theme/{themes-config.json → themes-config.json.example} +223 -213
- /package/src/extensions/{kimu-home → app-root}/lang/en.json +0 -0
- /package/src/extensions/{kimu-home → app-root}/lang/it.json +0 -0
- /package/src/extensions/{kimu-home → app-root}/style.css +0 -0
- /package/src/extensions/{kimu-home → app-root}/view.html +0 -0
|
@@ -1,304 +1,304 @@
|
|
|
1
|
-
# API Axios Module
|
|
2
|
-
|
|
3
|
-
Advanced HTTP client module for KIMU Framework based on the **Axios** library.
|
|
4
|
-
|
|
5
|
-
## Overview
|
|
6
|
-
|
|
7
|
-
The `api-axios` module provides an enhanced HTTP client with advanced features like interceptors, automatic retries, request cancellation, progress tracking, and response caching.
|
|
8
|
-
|
|
9
|
-
## Key Features
|
|
10
|
-
|
|
11
|
-
### ✨ Advanced Features Over api-core
|
|
12
|
-
|
|
13
|
-
1. **Request/Response Interceptors**
|
|
14
|
-
- Modify requests before they are sent
|
|
15
|
-
- Transform responses before they reach your code
|
|
16
|
-
- Handle errors globally
|
|
17
|
-
|
|
18
|
-
2. **Automatic Retry Logic**
|
|
19
|
-
- Configurable retry attempts
|
|
20
|
-
- Exponential backoff strategy
|
|
21
|
-
- Retry only on specific error conditions
|
|
22
|
-
|
|
23
|
-
3. **Request Cancellation**
|
|
24
|
-
- Cancel pending requests
|
|
25
|
-
- Avoid memory leaks from unmounted components
|
|
26
|
-
- Manage concurrent requests
|
|
27
|
-
|
|
28
|
-
4. **Progress Tracking**
|
|
29
|
-
- Upload progress callbacks
|
|
30
|
-
- Download progress callbacks
|
|
31
|
-
- Real-time feedback for large transfers
|
|
32
|
-
|
|
33
|
-
5. **Response Caching**
|
|
34
|
-
- Cache GET requests
|
|
35
|
-
- Configurable TTL (Time To Live)
|
|
36
|
-
- Reduce network traffic and improve performance
|
|
37
|
-
|
|
38
|
-
6. **Better Error Handling**
|
|
39
|
-
- Standardized error format
|
|
40
|
-
- Original error preservation
|
|
41
|
-
- Error interceptors for global handling
|
|
42
|
-
|
|
43
|
-
#### 📋 Feature Comparison: api-core vs api-axios
|
|
44
|
-
|
|
45
|
-
| Funzione | api-core | api-axios |
|
|
46
|
-
|-------------------------------|:--------:|:---------:|
|
|
47
|
-
| HTTP Methods | ✅ | ✅ |
|
|
48
|
-
| Query Parameters | ✅ | ✅ |
|
|
49
|
-
| Custom Headers | ✅ | ✅ |
|
|
50
|
-
| Timeout | ✅ | ✅ |
|
|
51
|
-
| Request Interceptors | ❌ | ✅ |
|
|
52
|
-
| Response Interceptors | ❌ | ✅ |
|
|
53
|
-
| Error Interceptors | ❌ | ✅ |
|
|
54
|
-
| Automatic Retry | ❌ | ✅ |
|
|
55
|
-
| Request Cancellation | ❌ | ✅ |
|
|
56
|
-
| Progress Tracking | ❌ | ✅ |
|
|
57
|
-
| Response Caching | ❌ | ✅ |
|
|
58
|
-
| Bundle Size | ~2KB | ~15KB |
|
|
59
|
-
| Dependencies | 0 | axios |
|
|
60
|
-
|
|
61
|
-
**Legenda:** ✅ = supportato, ❌ = non supportato
|
|
62
|
-
|
|
63
|
-
## Installation
|
|
64
|
-
|
|
65
|
-
The module is already part of KIMU-Core. To use it:
|
|
66
|
-
|
|
67
|
-
```bash
|
|
68
|
-
npm install axios
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
## Basic Usage
|
|
72
|
-
|
|
73
|
-
### Import the Service
|
|
74
|
-
|
|
75
|
-
```typescript
|
|
76
|
-
import { apiAxiosService } from '../../modules/api-axios/api-axios-service';
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
### Simple GET Request
|
|
80
|
-
|
|
81
|
-
```typescript
|
|
82
|
-
const response = await apiAxiosService.get('https://api.example.com/data');
|
|
83
|
-
console.log(response.data);
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
### POST Request with Data
|
|
87
|
-
|
|
88
|
-
```typescript
|
|
89
|
-
const response = await apiAxiosService.post(
|
|
90
|
-
'https://api.example.com/users',
|
|
91
|
-
{ name: 'John', email: 'john@example.com' }
|
|
92
|
-
);
|
|
93
|
-
console.log(response.data);
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
## Advanced Features
|
|
97
|
-
|
|
98
|
-
### Request with Retry
|
|
99
|
-
|
|
100
|
-
```typescript
|
|
101
|
-
const response = await apiAxiosService.request(
|
|
102
|
-
'GET',
|
|
103
|
-
'https://api.example.com/data',
|
|
104
|
-
null,
|
|
105
|
-
{
|
|
106
|
-
retries: 3, // Retry up to 3 times
|
|
107
|
-
retryDelay: 1000 // Start with 1 second delay (exponential backoff)
|
|
108
|
-
}
|
|
109
|
-
);
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
### Cached GET Request
|
|
113
|
-
|
|
114
|
-
```typescript
|
|
115
|
-
// First call - fetches from server
|
|
116
|
-
const response1 = await apiAxiosService.get(
|
|
117
|
-
'https://api.example.com/data',
|
|
118
|
-
{ useCache: true }
|
|
119
|
-
);
|
|
120
|
-
|
|
121
|
-
// Second call - returns cached data (if within TTL)
|
|
122
|
-
const response2 = await apiAxiosService.get(
|
|
123
|
-
'https://api.example.com/data',
|
|
124
|
-
{ useCache: true }
|
|
125
|
-
);
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
### Configure Cache TTL
|
|
129
|
-
|
|
130
|
-
```typescript
|
|
131
|
-
// Set cache to expire after 10 minutes
|
|
132
|
-
apiAxiosService.setCacheTTL(10 * 60 * 1000);
|
|
133
|
-
|
|
134
|
-
// Clear all cached data
|
|
135
|
-
apiAxiosService.clearCache();
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
### Request with Progress Tracking
|
|
139
|
-
|
|
140
|
-
```typescript
|
|
141
|
-
const response = await apiAxiosService.post(
|
|
142
|
-
'https://api.example.com/upload',
|
|
143
|
-
formData,
|
|
144
|
-
{
|
|
145
|
-
onUploadProgress: (event) => {
|
|
146
|
-
const percentComplete = Math.round((event.loaded * 100) / event.total);
|
|
147
|
-
console.log(`Upload: ${percentComplete}%`);
|
|
148
|
-
},
|
|
149
|
-
onDownloadProgress: (event) => {
|
|
150
|
-
const percentComplete = Math.round((event.loaded * 100) / event.total);
|
|
151
|
-
console.log(`Download: ${percentComplete}%`);
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
);
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
### Request Cancellation
|
|
158
|
-
|
|
159
|
-
```typescript
|
|
160
|
-
// Create a cancel token
|
|
161
|
-
const cancelToken = apiAxiosService.createCancelToken();
|
|
162
|
-
|
|
163
|
-
// Make a request with the cancel token
|
|
164
|
-
const requestPromise = apiAxiosService.get(
|
|
165
|
-
'https://api.example.com/large-data',
|
|
166
|
-
{
|
|
167
|
-
axiosConfig: {
|
|
168
|
-
cancelToken: cancelToken.token
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
);
|
|
172
|
-
|
|
173
|
-
// Cancel the request if needed
|
|
174
|
-
cancelToken.cancel('User cancelled the request');
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
### Request Interceptor
|
|
178
|
-
|
|
179
|
-
```typescript
|
|
180
|
-
// Add authentication token to all requests
|
|
181
|
-
apiAxiosService.addRequestInterceptor(async (config) => {
|
|
182
|
-
const token = await getAuthToken();
|
|
183
|
-
config.headers = config.headers || {};
|
|
184
|
-
config.headers['Authorization'] = `Bearer ${token}`;
|
|
185
|
-
return config;
|
|
186
|
-
});
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
### Response Interceptor
|
|
190
|
-
|
|
191
|
-
```typescript
|
|
192
|
-
// Transform all responses
|
|
193
|
-
apiAxiosService.addResponseInterceptor(async (response) => {
|
|
194
|
-
console.log('Response received:', response.status);
|
|
195
|
-
// You can modify the response here
|
|
196
|
-
return response;
|
|
197
|
-
});
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
### Error Interceptor
|
|
201
|
-
|
|
202
|
-
```typescript
|
|
203
|
-
// Handle errors globally
|
|
204
|
-
apiAxiosService.addErrorInterceptor(async (error) => {
|
|
205
|
-
if (error.status === 401) {
|
|
206
|
-
console.log('Unauthorized - redirecting to login');
|
|
207
|
-
// Redirect to login page
|
|
208
|
-
}
|
|
209
|
-
});
|
|
210
|
-
```
|
|
211
|
-
|
|
212
|
-
## Migration from api-core
|
|
213
|
-
|
|
214
|
-
The `api-axios` module maintains the same interface as `api-core` for basic operations, making migration simple:
|
|
215
|
-
|
|
216
|
-
```typescript
|
|
217
|
-
// Before (api-core)
|
|
218
|
-
import { apiCoreService } from '../../modules/api-core/api-core-service';
|
|
219
|
-
const response = await apiCoreService.get('https://api.example.com/data');
|
|
220
|
-
|
|
221
|
-
// After (api-axios) - same interface!
|
|
222
|
-
import { apiAxiosService } from '../../modules/api-axios/api-axios-service';
|
|
223
|
-
const response = await apiAxiosService.get('https://api.example.com/data');
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
## When to Use api-axios vs api-core
|
|
227
|
-
|
|
228
|
-
### Use **api-core** when:
|
|
229
|
-
- You need a minimal, zero-dependency solution
|
|
230
|
-
- Your requests are simple and don't need advanced features
|
|
231
|
-
- Bundle size is critical
|
|
232
|
-
- You want maximum control over the HTTP implementation
|
|
233
|
-
|
|
234
|
-
### Use **api-axios** when:
|
|
235
|
-
- You need request/response interceptors
|
|
236
|
-
- You want automatic retry logic
|
|
237
|
-
- You need request cancellation
|
|
238
|
-
- You want upload/download progress tracking
|
|
239
|
-
- Response caching would improve performance
|
|
240
|
-
- You're building a complex application with many API calls
|
|
241
|
-
|
|
242
|
-
## Performance Considerations
|
|
243
|
-
|
|
244
|
-
- **Bundle Size**: Axios adds ~13KB (minified + gzipped) to your bundle
|
|
245
|
-
- **Memory**: Caching consumes memory - use `clearCache()` periodically
|
|
246
|
-
- **Network**: Retries increase network traffic - use wisely
|
|
247
|
-
|
|
248
|
-
## Error Handling
|
|
249
|
-
|
|
250
|
-
All errors are transformed to the standard `ApiError` format:
|
|
251
|
-
|
|
252
|
-
```typescript
|
|
253
|
-
try {
|
|
254
|
-
const response = await apiAxiosService.get('https://api.example.com/data');
|
|
255
|
-
} catch (error: ApiError) {
|
|
256
|
-
console.error('Status:', error.status);
|
|
257
|
-
console.error('Message:', error.message);
|
|
258
|
-
console.error('Data:', error.data);
|
|
259
|
-
console.error('Original:', error.originalError);
|
|
260
|
-
}
|
|
261
|
-
```
|
|
262
|
-
|
|
263
|
-
## TypeScript Support
|
|
264
|
-
|
|
265
|
-
Full TypeScript support with generic types:
|
|
266
|
-
|
|
267
|
-
```typescript
|
|
268
|
-
interface User {
|
|
269
|
-
id: number;
|
|
270
|
-
name: string;
|
|
271
|
-
email: string;
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
const response = await apiAxiosService.get<User>('https://api.example.com/user/1');
|
|
275
|
-
// response.data is typed as User
|
|
276
|
-
console.log(response.data.name);
|
|
277
|
-
```
|
|
278
|
-
|
|
279
|
-
## Best Practices
|
|
280
|
-
|
|
281
|
-
1. **Use interceptors for cross-cutting concerns** (auth, logging, error handling)
|
|
282
|
-
2. **Enable caching for static or slowly-changing data**
|
|
283
|
-
3. **Use retry logic for non-critical requests**
|
|
284
|
-
4. **Cancel requests when components unmount**
|
|
285
|
-
5. **Track progress for large file uploads/downloads**
|
|
286
|
-
6. **Set appropriate timeouts** for different types of requests
|
|
287
|
-
7. **Clear cache periodically** to manage memory
|
|
288
|
-
|
|
289
|
-
## Dependencies
|
|
290
|
-
|
|
291
|
-
- `axios`: ^1.6.0 (peer dependency)
|
|
292
|
-
|
|
293
|
-
## License
|
|
294
|
-
|
|
295
|
-
This module is part of KIMU Framework and follows the same license (MPL-2.0).
|
|
296
|
-
|
|
297
|
-
## Author
|
|
298
|
-
|
|
299
|
-
**UnicòVerso** - Marco Di Pasquale
|
|
300
|
-
|
|
301
|
-
## Related
|
|
302
|
-
|
|
303
|
-
- [api-core](../api-core/README.md) - Minimal native HTTP client
|
|
304
|
-
- [KIMU Framework](https://github.com/UnicoVerso/kimu-core)
|
|
1
|
+
# API Axios Module
|
|
2
|
+
|
|
3
|
+
Advanced HTTP client module for KIMU Framework based on the **Axios** library.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
The `api-axios` module provides an enhanced HTTP client with advanced features like interceptors, automatic retries, request cancellation, progress tracking, and response caching.
|
|
8
|
+
|
|
9
|
+
## Key Features
|
|
10
|
+
|
|
11
|
+
### ✨ Advanced Features Over api-core
|
|
12
|
+
|
|
13
|
+
1. **Request/Response Interceptors**
|
|
14
|
+
- Modify requests before they are sent
|
|
15
|
+
- Transform responses before they reach your code
|
|
16
|
+
- Handle errors globally
|
|
17
|
+
|
|
18
|
+
2. **Automatic Retry Logic**
|
|
19
|
+
- Configurable retry attempts
|
|
20
|
+
- Exponential backoff strategy
|
|
21
|
+
- Retry only on specific error conditions
|
|
22
|
+
|
|
23
|
+
3. **Request Cancellation**
|
|
24
|
+
- Cancel pending requests
|
|
25
|
+
- Avoid memory leaks from unmounted components
|
|
26
|
+
- Manage concurrent requests
|
|
27
|
+
|
|
28
|
+
4. **Progress Tracking**
|
|
29
|
+
- Upload progress callbacks
|
|
30
|
+
- Download progress callbacks
|
|
31
|
+
- Real-time feedback for large transfers
|
|
32
|
+
|
|
33
|
+
5. **Response Caching**
|
|
34
|
+
- Cache GET requests
|
|
35
|
+
- Configurable TTL (Time To Live)
|
|
36
|
+
- Reduce network traffic and improve performance
|
|
37
|
+
|
|
38
|
+
6. **Better Error Handling**
|
|
39
|
+
- Standardized error format
|
|
40
|
+
- Original error preservation
|
|
41
|
+
- Error interceptors for global handling
|
|
42
|
+
|
|
43
|
+
#### 📋 Feature Comparison: api-core vs api-axios
|
|
44
|
+
|
|
45
|
+
| Funzione | api-core | api-axios |
|
|
46
|
+
|-------------------------------|:--------:|:---------:|
|
|
47
|
+
| HTTP Methods | ✅ | ✅ |
|
|
48
|
+
| Query Parameters | ✅ | ✅ |
|
|
49
|
+
| Custom Headers | ✅ | ✅ |
|
|
50
|
+
| Timeout | ✅ | ✅ |
|
|
51
|
+
| Request Interceptors | ❌ | ✅ |
|
|
52
|
+
| Response Interceptors | ❌ | ✅ |
|
|
53
|
+
| Error Interceptors | ❌ | ✅ |
|
|
54
|
+
| Automatic Retry | ❌ | ✅ |
|
|
55
|
+
| Request Cancellation | ❌ | ✅ |
|
|
56
|
+
| Progress Tracking | ❌ | ✅ |
|
|
57
|
+
| Response Caching | ❌ | ✅ |
|
|
58
|
+
| Bundle Size | ~2KB | ~15KB |
|
|
59
|
+
| Dependencies | 0 | axios |
|
|
60
|
+
|
|
61
|
+
**Legenda:** ✅ = supportato, ❌ = non supportato
|
|
62
|
+
|
|
63
|
+
## Installation
|
|
64
|
+
|
|
65
|
+
The module is already part of KIMU-Core. To use it:
|
|
66
|
+
|
|
67
|
+
```bash
|
|
68
|
+
npm install axios
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Basic Usage
|
|
72
|
+
|
|
73
|
+
### Import the Service
|
|
74
|
+
|
|
75
|
+
```typescript
|
|
76
|
+
import { apiAxiosService } from '../../modules/api-axios/api-axios-service';
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Simple GET Request
|
|
80
|
+
|
|
81
|
+
```typescript
|
|
82
|
+
const response = await apiAxiosService.get('https://api.example.com/data');
|
|
83
|
+
console.log(response.data);
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### POST Request with Data
|
|
87
|
+
|
|
88
|
+
```typescript
|
|
89
|
+
const response = await apiAxiosService.post(
|
|
90
|
+
'https://api.example.com/users',
|
|
91
|
+
{ name: 'John', email: 'john@example.com' }
|
|
92
|
+
);
|
|
93
|
+
console.log(response.data);
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Advanced Features
|
|
97
|
+
|
|
98
|
+
### Request with Retry
|
|
99
|
+
|
|
100
|
+
```typescript
|
|
101
|
+
const response = await apiAxiosService.request(
|
|
102
|
+
'GET',
|
|
103
|
+
'https://api.example.com/data',
|
|
104
|
+
null,
|
|
105
|
+
{
|
|
106
|
+
retries: 3, // Retry up to 3 times
|
|
107
|
+
retryDelay: 1000 // Start with 1 second delay (exponential backoff)
|
|
108
|
+
}
|
|
109
|
+
);
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Cached GET Request
|
|
113
|
+
|
|
114
|
+
```typescript
|
|
115
|
+
// First call - fetches from server
|
|
116
|
+
const response1 = await apiAxiosService.get(
|
|
117
|
+
'https://api.example.com/data',
|
|
118
|
+
{ useCache: true }
|
|
119
|
+
);
|
|
120
|
+
|
|
121
|
+
// Second call - returns cached data (if within TTL)
|
|
122
|
+
const response2 = await apiAxiosService.get(
|
|
123
|
+
'https://api.example.com/data',
|
|
124
|
+
{ useCache: true }
|
|
125
|
+
);
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Configure Cache TTL
|
|
129
|
+
|
|
130
|
+
```typescript
|
|
131
|
+
// Set cache to expire after 10 minutes
|
|
132
|
+
apiAxiosService.setCacheTTL(10 * 60 * 1000);
|
|
133
|
+
|
|
134
|
+
// Clear all cached data
|
|
135
|
+
apiAxiosService.clearCache();
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### Request with Progress Tracking
|
|
139
|
+
|
|
140
|
+
```typescript
|
|
141
|
+
const response = await apiAxiosService.post(
|
|
142
|
+
'https://api.example.com/upload',
|
|
143
|
+
formData,
|
|
144
|
+
{
|
|
145
|
+
onUploadProgress: (event) => {
|
|
146
|
+
const percentComplete = Math.round((event.loaded * 100) / event.total);
|
|
147
|
+
console.log(`Upload: ${percentComplete}%`);
|
|
148
|
+
},
|
|
149
|
+
onDownloadProgress: (event) => {
|
|
150
|
+
const percentComplete = Math.round((event.loaded * 100) / event.total);
|
|
151
|
+
console.log(`Download: ${percentComplete}%`);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
);
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
### Request Cancellation
|
|
158
|
+
|
|
159
|
+
```typescript
|
|
160
|
+
// Create a cancel token
|
|
161
|
+
const cancelToken = apiAxiosService.createCancelToken();
|
|
162
|
+
|
|
163
|
+
// Make a request with the cancel token
|
|
164
|
+
const requestPromise = apiAxiosService.get(
|
|
165
|
+
'https://api.example.com/large-data',
|
|
166
|
+
{
|
|
167
|
+
axiosConfig: {
|
|
168
|
+
cancelToken: cancelToken.token
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
);
|
|
172
|
+
|
|
173
|
+
// Cancel the request if needed
|
|
174
|
+
cancelToken.cancel('User cancelled the request');
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### Request Interceptor
|
|
178
|
+
|
|
179
|
+
```typescript
|
|
180
|
+
// Add authentication token to all requests
|
|
181
|
+
apiAxiosService.addRequestInterceptor(async (config) => {
|
|
182
|
+
const token = await getAuthToken();
|
|
183
|
+
config.headers = config.headers || {};
|
|
184
|
+
config.headers['Authorization'] = `Bearer ${token}`;
|
|
185
|
+
return config;
|
|
186
|
+
});
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
### Response Interceptor
|
|
190
|
+
|
|
191
|
+
```typescript
|
|
192
|
+
// Transform all responses
|
|
193
|
+
apiAxiosService.addResponseInterceptor(async (response) => {
|
|
194
|
+
console.log('Response received:', response.status);
|
|
195
|
+
// You can modify the response here
|
|
196
|
+
return response;
|
|
197
|
+
});
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
### Error Interceptor
|
|
201
|
+
|
|
202
|
+
```typescript
|
|
203
|
+
// Handle errors globally
|
|
204
|
+
apiAxiosService.addErrorInterceptor(async (error) => {
|
|
205
|
+
if (error.status === 401) {
|
|
206
|
+
console.log('Unauthorized - redirecting to login');
|
|
207
|
+
// Redirect to login page
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
## Migration from api-core
|
|
213
|
+
|
|
214
|
+
The `api-axios` module maintains the same interface as `api-core` for basic operations, making migration simple:
|
|
215
|
+
|
|
216
|
+
```typescript
|
|
217
|
+
// Before (api-core)
|
|
218
|
+
import { apiCoreService } from '../../modules/api-core/api-core-service';
|
|
219
|
+
const response = await apiCoreService.get('https://api.example.com/data');
|
|
220
|
+
|
|
221
|
+
// After (api-axios) - same interface!
|
|
222
|
+
import { apiAxiosService } from '../../modules/api-axios/api-axios-service';
|
|
223
|
+
const response = await apiAxiosService.get('https://api.example.com/data');
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
## When to Use api-axios vs api-core
|
|
227
|
+
|
|
228
|
+
### Use **api-core** when:
|
|
229
|
+
- You need a minimal, zero-dependency solution
|
|
230
|
+
- Your requests are simple and don't need advanced features
|
|
231
|
+
- Bundle size is critical
|
|
232
|
+
- You want maximum control over the HTTP implementation
|
|
233
|
+
|
|
234
|
+
### Use **api-axios** when:
|
|
235
|
+
- You need request/response interceptors
|
|
236
|
+
- You want automatic retry logic
|
|
237
|
+
- You need request cancellation
|
|
238
|
+
- You want upload/download progress tracking
|
|
239
|
+
- Response caching would improve performance
|
|
240
|
+
- You're building a complex application with many API calls
|
|
241
|
+
|
|
242
|
+
## Performance Considerations
|
|
243
|
+
|
|
244
|
+
- **Bundle Size**: Axios adds ~13KB (minified + gzipped) to your bundle
|
|
245
|
+
- **Memory**: Caching consumes memory - use `clearCache()` periodically
|
|
246
|
+
- **Network**: Retries increase network traffic - use wisely
|
|
247
|
+
|
|
248
|
+
## Error Handling
|
|
249
|
+
|
|
250
|
+
All errors are transformed to the standard `ApiError` format:
|
|
251
|
+
|
|
252
|
+
```typescript
|
|
253
|
+
try {
|
|
254
|
+
const response = await apiAxiosService.get('https://api.example.com/data');
|
|
255
|
+
} catch (error: ApiError) {
|
|
256
|
+
console.error('Status:', error.status);
|
|
257
|
+
console.error('Message:', error.message);
|
|
258
|
+
console.error('Data:', error.data);
|
|
259
|
+
console.error('Original:', error.originalError);
|
|
260
|
+
}
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
## TypeScript Support
|
|
264
|
+
|
|
265
|
+
Full TypeScript support with generic types:
|
|
266
|
+
|
|
267
|
+
```typescript
|
|
268
|
+
interface User {
|
|
269
|
+
id: number;
|
|
270
|
+
name: string;
|
|
271
|
+
email: string;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
const response = await apiAxiosService.get<User>('https://api.example.com/user/1');
|
|
275
|
+
// response.data is typed as User
|
|
276
|
+
console.log(response.data.name);
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
## Best Practices
|
|
280
|
+
|
|
281
|
+
1. **Use interceptors for cross-cutting concerns** (auth, logging, error handling)
|
|
282
|
+
2. **Enable caching for static or slowly-changing data**
|
|
283
|
+
3. **Use retry logic for non-critical requests**
|
|
284
|
+
4. **Cancel requests when components unmount**
|
|
285
|
+
5. **Track progress for large file uploads/downloads**
|
|
286
|
+
6. **Set appropriate timeouts** for different types of requests
|
|
287
|
+
7. **Clear cache periodically** to manage memory
|
|
288
|
+
|
|
289
|
+
## Dependencies
|
|
290
|
+
|
|
291
|
+
- `axios`: ^1.6.0 (peer dependency)
|
|
292
|
+
|
|
293
|
+
## License
|
|
294
|
+
|
|
295
|
+
This module is part of KIMU Framework and follows the same license (MPL-2.0).
|
|
296
|
+
|
|
297
|
+
## Author
|
|
298
|
+
|
|
299
|
+
**UnicòVerso** - Marco Di Pasquale
|
|
300
|
+
|
|
301
|
+
## Related
|
|
302
|
+
|
|
303
|
+
- [api-core](../api-core/README.md) - Minimal native HTTP client
|
|
304
|
+
- [KIMU Framework](https://github.com/UnicoVerso/kimu-core)
|