L'intégration de requêtes réseau dans les Mini Programmes WeChat peut être simplifiée grâce à des bibliothèques d'abstraction. mina-request est une solution populaire qui offre une interface conviviale pour gérer les appels HTTP.

Installation

Pour commencer, installez le package via npm :

npm install mina-request

Si vous rencontrez des problèmes d'installation, essayez d'utiliser le partage de connnexion de votre téléphone mobile.

Construction du projet npm

Après l'installation, il est souvent nécessaire de reconstruire les dépendances npm de votre projet WeChat. Ceci est généralement fait via l'interface de développement WeChat (Weixin DevTools) en sélectionnant "Outils" -> "Rapports de build npm".

Utilisation

L'utilisation de mina-request implique l'instanciation de la classe et la configuration des intercepteurs pour gérer l'authentification et la réponse.

Importation et Instanciation

import WxRequest from 'mina-request';
import { getStorage } from './storage'; // Supposons que ces fonctions existent pour la gestion du stockage local
import { ApiPathConst } from './constVar'; // Supposons que cette constante définisse le chemin de base de l'API

// Instanciation de WxRequest avec configuration personnalisée
const requestInstance = new WxRequest({
  baseURL: ApiPathConst, // URL de base pour toutes les requêtes
  timeout: 60000,      // Délai d'attente en millisecondes
  isLoading: false     // Désactive l'indicateur de chargement par défaut
});

Intercepteur de Requête

L'intercepteur de requête permet de modifier la configuration de la requête avant qu'elle ne soit envoyée. Un cas d'utilisation courant est l'ajout de jetons d'authentification aux en-têtes.

requestInstance.interceptors.request = (config) => {
  const token = getStorage('token'); // Récupération du token depuis le stockage local
  if (token) {
    // Ajout du token d'autorisation à l'en-tête si présent
    config.header.Authorization = `Bearer ${token}`;
  } else {
    // Assure que l'en-tête est vide si aucun token n'est trouvé pour éviter d'envoyer un token obsolète
    config.header.Authorization = '';
  }
  return config; // Retourne la configuration modifiée
};

Intercepteur de Réponse

L'intercepteur de réponse est crucial pour gérer les réponses du serveur, y compris les erreurs et les différents codes de statut.

requestInstance.interceptors.response = async (response) => {
  const { isSuccess, data, statusCode } = response;

  if (!isSuccess) {
    // Gestion des erreurs réseau générales
    // Supposons que 'toast' est une fonction utilitaire pour afficher des messages
    toast({ title: 'Erreur réseau', icon: 'error' });
    return Promise.reject(response);
  }

  let errorMessage = '';
  switch (data.status) {
    case 200:
      return data; // Succès, retourne les données de la réponse
    case 401: // Non authentifié
      // Logique de reconnexion ou de redirection vers la page de connexion
      // retryLogin(1); // Supposons que retryLogin existe
      return Promise.reject(response);
    case 403: // Interdit (permissions insuffisantes)
      // Affichage d'un message et potentiellement déconnexion
      await modal({ content: 'Permissions insuffisantes', showCancel: false }); // Supposons que 'modal' existe
      // clearStorage(); // Supposons que clearStorage existe
      // wx.navigateTo({ url: '/pages/login/login' });
      return Promise.reject(response);
    case 429: // Trop de requêtes
      errorMessage = "Trop de tentatives, veuillez réessayer plus tard !";
      break;
    case 404: // Non trouvé
      errorMessage = "Erreur : l'API demandée n'existe pas.";
      break;
    case 500: // Erreur serveur interne
      errorMessage = data.msg || "Une erreur interne du serveur s'est produite.";
      break;
    case 405: // Méthode non autorisée
      errorMessage = "Erreur : méthode HTTP non valide.";
      break;
    case 415: // Type de média non supporté
      errorMessage = "Erreur : type de contenu non pris en charge.";
      break;
    default:
      errorMessage = "Une erreur inattendue s'est produite. Veuillez contacter le support.";
      break;
  }

  if (errorMessage) {
    toast({ title: errorMessage, icon: 'error' });
    // Dans certains cas, on peut vouloir rejeter la promesse même après avoir affiché un message
    // return Promise.reject(response);
  }
  // Si un code d'erreur spécifique n'a pas conduit à un rejet, on retourne la réponse originale
  return response;
};

Exemple d'appel API

Une fois configuré, vous pouvez utiliser l'instance pour effectuer des appels API.

/**
 * Authentification via WeChat
 * @param {Object} params - Paramètres de la requête
 * @returns {Promise} - La promesse de la requête réseau
 */
export const requestWxLogin = async (params) => {
  // Utilisation de la méthode GET de l'instance configurée
  return await requestInstance.get('/api/Login/wxOnLogin/', params);
};