@rxliuli/vista是一個(gè)強(qiáng)大的同構(gòu)請(qǐng)求攔截器庫，支援Fetch/XHR請(qǐng)求的統(tǒng)一攔截。它允許您在請(qǐng)求生命週期的不同階段進(jìn)行幹預(yù)，實(shí)現(xiàn)請(qǐng)求監(jiān)控、修改和模擬等各種功能。

特徵

• ？同時(shí)支援Fetch和XHR請(qǐng)求攔截
• ？使用中間件模式，靈活且易於擴(kuò)充
• ？在請(qǐng)求之前和之後支持幹預(yù)
• ？可修改的請(qǐng)求和回應(yīng)資料
• ？零依賴，體積緊湊
• ？僅支援瀏覽器環(huán)境

安裝

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

基本用法

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

進(jìn)階用例

新增全域請(qǐng)求頭

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

請(qǐng)求結(jié)果緩存

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

請(qǐng)求失敗，請(qǐng)重試

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

動(dòng)態(tài)修改回應(yīng)

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

API參考

遠(yuǎn)景級(jí)

主攔截器類，提供以下方法：

• use(middleware): 新增中間件
• Intercept()：開始攔截請(qǐng)求
• destroy()：停止攔截請(qǐng)求

中介軟體上下文

中介軟體接收兩個(gè)參數(shù)：

• context：包含請(qǐng)求和回應(yīng)訊息
  • req：請(qǐng)求對(duì)象 res：回應(yīng)對(duì)象
  • type：請(qǐng)求類型，fetch或xhr
• next：呼叫下一個(gè)中間件或原始請(qǐng)求的函數(shù)

常問問題

1. 如何停止攔截？

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

1. 是否支援非同步操作？
   是的，中間件支援 async/await 語法。

2. Node.js 中是否支援?dāng)r截請(qǐng)求？

不可以，僅支援在瀏覽器中攔截請(qǐng)求。

謝謝

• xhook：一個(gè)實(shí)現(xiàn)xhr攔截的函式庫，有助於一些功能的實(shí)作。
• hono：優(yōu)秀的Web伺服器框架，它的API提供了許多靈感。

貢獻(xiàn)指南

歡迎提交問題和拉取請(qǐng)求！

執(zhí)照

麻省理工學(xué)院許可證

試試看並告訴我您的體驗(yàn)，歡迎任何錯(cuò)誤或功能回饋。

以上是@rxliuli/vista 簡介：一個(gè)用於 Fetch 和 XHR 的統(tǒng)一請(qǐng)求攔截器庫，具有中間件支援。的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！