@axproo/core

Librairie centralisée pour gérer la communication HTTP, la gestion des erreurs et l’authentification dans les projets Vue 3.

Elle fournit un client HTTP basé sur Axios, normalisé avec des interceptors et un adapter pour simplifier l’accès aux APIs.

Table des matières

• Installation
• Configuration
• Structure du projet
• Utilisation
• Interceptors
• Adapter
• Exemples
  • Utilisation dans Vue 3
  • Cas avancés
    • Upload de fichiers
    • Streaming de données
    • Requêtes simultanées
    • Timeouts et retries

Installation

npm install @axproo/core axios

⚠️ Axios doit être installé dans le projet qui utilise @axproo/core.

Configuration

Le client HTTP se configure via getHttpClient avec les options suivantes :

import { getHttpClient } from '@axproo/core';

const client = getHttpClient({
    baseURL: import.meta.env.VITE_API_URL || '',
    getToken: () => localStorage.getItem('token'),
    isInternal: true, // true pour les utilisateurs internes, false pour API externe
});

• **baseURL** : URL de base de l’API.
• **getToken** : Fonction retournant le JWT (si utilisé).
• **isInternal** : Permet de différencier les utilisateurs internes (cookies httpOnly) et externes (JWT + cookies).

Structure du projet

@axproo/core/
├─ src/
│  ├─ adapters/
│  │  └─ axios.ts          # Adapter pour normaliser l’utilisation d’Axios
│  ├─ interceptors/
│  │  ├─ auth.ts           # Gestion de l’authentification
│  │  ├─ error.ts          # Gestion des erreurs API
│  │  └─ response.ts       # Normalisation des réponses
│  ├─ types.ts             # Types TypeScript (HttpClient, options, etc.)
│  └─ client.ts            # Client centralisé
├─ dist/
├─ package.json
└─ README.md

Utilisation

Créer un client

import { getHttpClient } from '@axproo/core';

const client = getHttpClient({
  baseURL: 'https://api.monapp.com',
  getToken: () => localStorage.getItem('token'),
  isInternal: true,
});

Requêtes HTTP

// GET
const form = await client.get('forms/show/auth_login');

// POST
const result = await client.post('forms/submit', { email, password });

Les réponses sont normalisées via l’interceptor response pour retourner directement data.

Interceptors

Auth Interceptor

Gère l’authentification pour les requêtes :

• Internes : cookies httpOnly.
• Externes : JWT + cookies.

import { createAuthInterceptor } from './interceptors/auth';

axios.interceptors.request.use(
  createAuthInterceptor({
    getToken: () => localStorage.getItem('token'),
    isInternal: true,
  })
);

Response Interceptor

Normalise les réponses API pour toujours retourner le data principal.

import { createResponseInterceptor } from './interceptors/response';

axios.interceptors.response.use(createResponseInterceptor());

Error Interceptor

Gère les erreurs HTTP globalement et permet de centraliser le traitement.

import { createErrorInterceptor } from './interceptors/error';

axios.interceptors.response.use(undefined, createErrorInterceptor());

Adapter

L’adapter expose les méthodes classiques (get, post, put, delete) sur le client tout en utilisant les interceptors.

import { createAxiosAdapter } from './adapter';
import axios from 'axios';

const instance = axios.create({ baseURL: 'https://api.monapp.com' });
const client = createAxiosAdapter(instance);

// Utilisation
client.get('forms/show/auth_login');
client.post('forms/submit', { email, password });

Exemples

Utilisation dans Vue 3

<script setup lang="ts">
import { onMounted } from 'vue';
import { getHttpClient } from '@axproo/core';

const client = getHttpClient({
  baseURL: import.meta.env.VITE_API_URL || '',
  getToken: () => localStorage.getItem('token'),
  isInternal: true,
});

onMounted(async () => {
  try {
    const form = await client.get('forms/show/auth_login');
    console.log('Form data:', form);
  } catch (error) {
    console.error('API error:', error);
  }
});
</script>

Les réponses sont directement le contenu data de l’API, grâce au response interceptor.

Cas avancés

Upload de fichiers

Pour uploader un fichier, utilisez FormData et la méthode post :

import { getHttpClient } from '@axproo/core'

const client = getHttpClient({
  baseURL: import.meta.env.VITE_API_URL,
  getToken: () => localStorage.getItem('jwt')
})

async function uploadFile(file: File) {
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await client.post('upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
    console.log('Upload successful:', response);
  } catch (error) {
    console.error('Upload failed:', error);
  }
}

Streaming de données

Pour récupérer des données en streaming (ex: téléchargement d’un gros fichier) :

async function downloadFile(url: string, filename: string) {
  try {
    const response = await client.get(url, {
      responseType: 'blob',
    });

    const blob = new Blob([response]);
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
  } catch (error) {
    console.error('Download failed:', error);
  }
}

Requêtes simultanées

Pour exécuter plusieurs requêtes en parallèle :

async function fetchMultipleData() {
  try {
    const [users, posts] = await Promise.all([
      client.get('users'),
      client.get('posts'),
    ]);
    console.log('Users:', users);
    console.log('Posts:', posts);
  } catch (error) {
    console.error('One or more requests failed:', error);
  }
}

Timeouts et retries

Pour configurer un timeout ou des retries, étendez la configuration Axios :

const client = getHttpClient({
  baseURL: 'https://api.monapp.com',
  getToken: () => localStorage.getItem('token'),
  isInternal: true,
  timeout: 10000, // 10 secondes
});

// Pour les retries, utilisez un interceptor personnalisé ou une librairie comme axios-retry