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
Lepaskan: 2025-01-07 00:19:40
asal
667 orang telah melayarinya

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
Salin selepas log masuk

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()
Salin selepas log masuk

Kes Penggunaan Lanjutan

Tambahkan pengepala permintaan global

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

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()
Salin selepas log masuk

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()
Salin selepas log masuk

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()
Salin selepas log masuk

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()
Salin selepas log masuk
  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!

sumber:dev.to
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan