Rumah >hujung hadapan web >tutorial js >Pengenalan kepada @rxliuli/vista: Pustaka pemintas permintaan bersatu untuk Fetch dan XHR dengan sokongan middleware.

Pengenalan kepada @rxliuli/vista: Pustaka pemintas permintaan bersatu untuk Fetch dan XHR dengan sokongan middleware.

Patricia Arquette
Patricia Arquetteasal
2025-01-07 00:19:40740semak imbas

Introduction to @rxliuli/vista: A unified request interceptor library for both Fetch and XHR with middleware support.
Introduction to @rxliuli/vista: A unified request interceptor library for both Fetch and XHR with middleware support.

@rxliuli/vista ialah perpustakaan pemintas permintaan homogen yang berkuasa yang menyokong pemintasan bersatu permintaan Ambil/XHR. Ia membolehkan anda campur tangan pada peringkat kitaran hayat permintaan yang berbeza, mendayakan pelbagai fungsi seperti pemantauan permintaan, pengubahsuaian dan ejekan.

Ciri-ciri

  • ? Menyokong kedua-dua pemintasan permintaan Fetch dan XHR
  • ? Gunakan corak perisian tengah, fleksibel dan mudah dikembangkan
  • ? Sokong intervensi sebelum dan selepas permintaan
  • ? Data permintaan dan respons yang boleh diubah suai
  • ? Kebergantungan sifar, saiz padat
  • ? Menyokong persekitaran pelayar sahaja

Pemasangan

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

Penggunaan Asas

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()

Kes Penggunaan Lanjutan

Tambahkan pengepala permintaan global

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

Minta Cache Keputusan

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()

Permintaan gagal, sila cuba semula

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()

Respons ubah suai dinamik

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()

Rujukan API

Kelas Vista

Kelas pemintas utama, menyediakan kaedah berikut:

  • use(middleware): Tambah middleware
  • intercept(): Mula memintas permintaan
  • destroy(): Berhenti memintas permintaan

Konteks Middleware

Fungsi middleware menerima dua parameter:

  • konteks: Mengandungi maklumat permintaan dan respons
    • req: Minta objek res: Objek respons
    • jenis: Jenis permintaan, ambil atau xhr
  • seterusnya: Panggil fungsi perisian tengah seterusnya atau permintaan asal

Soalan Lazim

  1. Bagaimana untuk menghentikan pemintasan?
   const vista = new Vista()
   vista.intercept()
   // When not needed
   vista.destroy()
  1. Adakah ia menyokong operasi tak segerak?
    Ya, perisian tengah menyokong sintaks async/menunggu.

  2. Adakah ia menyokong permintaan memintas dalam Node.js?

Tidak, ia hanya menyokong permintaan memintas dalam penyemak imbas.

Terima kasih

  • xhook: Perpustakaan yang melaksanakan pemintasan xhr, membantu pelaksanaan beberapa ciri.
  • hono: Rangka kerja pelayan web yang sangat baik yang memberikan banyak inspirasi dalam APInya.

Garis Panduan Sumbangan

Selamat datang untuk menyerahkan Isu dan Permintaan Tarik!

Lesen

Lesen MIT

Cuba dan beritahu saya pengalaman anda, mengalu-alukan sebarang ralat atau maklum balas ciri.

Atas ialah kandungan terperinci Pengenalan kepada @rxliuli/vista: Pustaka pemintas permintaan bersatu untuk Fetch dan XHR dengan sokongan middleware.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn