Introduction à @rxliuli/vista : une bibliothèque d'intercepteurs de requêtes unifiée pour Fetch et XHR avec prise en charge du middleware.

@rxliuli/vista est une puissante bibliothèque d'intercepteurs de requêtes homogènes qui prend en charge l'interception unifiée des requêtes Fetch/XHR. Il vous permet d'intervenir à différentes étapes du cycle de vie de la demande, permettant diverses fonctions telles que le suivi, la modification et la moquerie des demandes.

Caractéristiques

• ? Prend en charge l'interception des requêtes Fetch et XHR
• ? Utiliser un modèle middleware, flexible et facile à étendre
• ? Interventions d'accompagnement avant et après les demandes
• ? Données de requête et de réponse modifiables
• ? Zéro dépendance, taille compacte
• ? Prend en charge l'environnement du navigateur uniquement

Installation

npm install @rxliuli/vista
# Or
yarn add @rxliuli/vista
# Or
pnpm add @rxliuli/vista

Utilisation de base

import { Vista } from '@rxliuli/vista'

new Vista()
  .use(async (c, next) => {
    console.log('Request started:', c.req.url)
    await next()
  })
  .use(async (c, next) => {
    await next()
    console.log('Response data:', await c.res.clone().text())
  })
  .intercept()

Cas d'utilisation avancés

Ajouter des en-têtes de requête globaux

new Vista()
  .use(async (c, next) => {
    c.req.headers.set('Authorization', 'Bearer token')
    await next()
  })
  .intercept()

Cache des résultats de la demande

const cache = new Map()

new Vista()
  .use(async (c, next) => {
    const key = c.req.url
    if (cache.has(key)) {
      c.res = cache.get(key).clone()
      return
    }
    await next()
    cache.set(key, c.res.clone())
  })
  .intercept()

La demande a échoué, veuillez réessayer

new Vista()
  .use(async (c, next) => {
    const maxRetries = 3
    let retries = 0

    while (retries < maxRetries) {
      try {
        await next()
        break
      } catch (err) {
        retries++
        if (retries === maxRetries) throw err
      }
    }
  })
  .intercept()

Réponse de modification dynamique

new Vista()
  .use(async (c, next) => {
    await next()
    if (c.req.url === 'https://example.com/example') {
      const json = await c.res.json()
      json.id = 2
      c.res = new Response(JSON.stringify(json), c.res)
    }
  })
  .intercept()

Référence API

Classe Vista

Classe d'intercepteur principale, fournissant les méthodes suivantes :

• use(middleware) : Ajouter un middleware
• intercept() : Commencez à intercepter les requêtes
• destroy() : Arrêtez d'intercepter les requêtes

Contexte middleware

La fonction middleware reçoit deux paramètres :

• contexte : contient des informations sur la demande et la réponse
  • req : objet de requête res : Objet de réponse
  • type : type de demande, récupération ou xhr
• suivant : Appeler la fonction du prochain middleware ou de la requête originale

FAQ

1. Comment arrêter l'interception ?

   const vista = new Vista()
   vista.intercept()
   // When not needed
   vista.destroy()

1. Prend-il en charge les opérations asynchrones ?
   Oui, le middleware prend en charge la syntaxe async/await.

2. Est-il compatible avec l'interception des requêtes dans Node.js ?

Non, il prend uniquement en charge l'interception des requêtes dans le navigateur.

Merci

• xhook : Une bibliothèque qui implémente l'interception xhr, utile pour l'implémentation de certaines fonctionnalités.
• hono : Un excellent framework de serveur Web qui fournit beaucoup d'inspiration dans son API.

Directives de contribution

Bienvenue pour soumettre des problèmes et des demandes de tirage !

Licence

Licence MIT

Essayez-le et racontez-moi votre expérience, accueillez toute erreur ou commentaire sur une fonctionnalité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!