@rxliuli/vista 簡介：一個用於 Fetch 和 XHR 的統一請求攔截器庫，具有中間件支援。

@rxliuli/vista是一個強大的同構請求攔截器庫，支援Fetch/XHR請求的統一攔截。它允許您在請求生命週期的不同階段進行幹預，實現請求監控、修改和模擬等各種功能。

特徵

• ？同時支援Fetch和XHR請求攔截
• ？使用中間件模式，靈活且易於擴充
• ？在請求之前和之後支持幹預
• ？可修改的請求和回應資料
• ？零依賴，體積緊湊
• ？僅支援瀏覽器環境

安裝

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

進階用例

新增全域請求頭

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

請求結果緩存

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

請求失敗，請重試

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

    while (retries 



<h3>
  
  
  動態修改回應
</h3>



<pre class="brush:php;toolbar:false">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參考

遠景級

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

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

中介軟體上下文

中介軟體接收兩個參數：

• context：包含請求和回應訊息
  • req：請求對象 res：回應對象
  • type：請求類型，fetch或xhr
• next：呼叫下一個中間件或原始請求的函數

常問問題

1. 如何停止攔截？

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

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

2. Node.js 中是否支援攔截請求？

不可以，僅支援在瀏覽器中攔截請求。

謝謝

• xhook：一個實現xhr攔截的函式庫，有助於一些功能的實作。
• hono：優秀的Web伺服器框架，它的API提供了許多靈感。

貢獻指南

歡迎提交問題和拉取請求！

執照

麻省理工學院許可證

試試看並告訴我您的體驗，歡迎任何錯誤或功能回饋。

以上是@rxliuli/vista 簡介：一個用於 Fetch 和 XHR 的統一請求攔截器庫，具有中間件支援。的詳細內容。更多資訊請關注PHP中文網其他相關文章！