1、快速開始

如果我們想把請求HOOK住，我們需要一個特定的TRIGGER；此處我們的TRIGGER是addEventListener()，也就是我們所有功能的入口，我們一般都按照如下方式HOOK住請求。

addEventListener('fetch', event => {
    return event.respondWith(handleRequest(event))
})

然后，我們就可以在handleRequest方法中，實現(xiàn)我們想要的邏輯。其中我們一般需要拿到請求的內(nèi)容request，request包含在event內(nèi)，可以按照如下方式獲??；request對象中，包含了url、headers、method等屬性，比如我們想獲取url，則可以按照如下方式獲??；例如，我們想根據(jù)不同url返回不同的內(nèi)容，則可以針對url進行判斷并返回不同內(nèi)容。

async function handleRequest(event) {
    const { request } = event
    const { url } = request

    if (url.endsWith('/router1')) {
       return rawJsonResponse({result: 'a'})
    }
    if (url.endsWith('/router2')) {
       return rawJsonResponse({result: 'b'})
    }
}

最后，我們需要構造一個response返回給瀏覽器；為了返回能夠被瀏覽器正確顯示，我們需要指定content-type，可以按照如下方式指定headers中的content-type；通過new一個Response對象，我們可以生成一個返回，并把headers信息添加進去，就可以生成一個返回。

async function rawJsonResponse(json) {

    const init = {
       headers: {
         'content-type': 'application/json;charset=UTF-8',
       },
     }
     return new Response(JSON.stringify(json), init)
}

至此，我們完成了一個獲取請求-根據(jù)請求執(zhí)行不同邏輯-生成返回并返回的流程，完整代碼如下。

async function rawJsonResponse(json) {
 const init = {
   headers: {
     'content-type': 'application/json;charset=UTF-8',
   },
 }
 return new Response(JSON.stringify(json), init)
}


async function rawJsonResponse(json) {
   const init = {
       headers: {
           'content-type': 'application/json;charset=UTF-8',
       },
   }
   return new Response(JSON.stringify(json), init)
}

async function handleRequest(event) {
   const { request } = event
   const { url } = request

   if (url.endsWith('/router1')) {
       return rawJsonResponse({ result: 'a' })
   }
   if (url.endsWith('/router2')) {
       return rawJsonResponse({ result: 'b' })
   }
}

addEventListener('fetch', event => {
   return event.respondWith(handleRequest(event))
})

2、函數(shù)接口

addEventListener（type, event => {…})) 

參數(shù)說明

type: type固定為’fetch’。 event: event包含三個方法，respondWith()、passThroughOnException()、waitUntil()。 respondWith()方法為請求提供自定義的返回。 passThroughOnException()方法會在代碼出現(xiàn)異常時直接從源站獲取內(nèi)容，以避免代碼異常影響正常訪問。 waitUntil()方法可以延長時間的生命周期，當代碼邏輯里存在響應時間較長的其他服務調用時，可以使用該方法。

new Request(input [, init]) 

參數(shù)說明

input: 可傳URL或Request對象。當你想修改URL時，需在此參數(shù)位置傳入URL。但你想修改其他屬性時，此參數(shù)位置傳入已存在的Request對象以繼承屬性。

init (可選): 修改Request屬性時，可傳入需要修改的參數(shù)?？蛇x參數(shù)如下： method: 請求方法，如GET、POST。 headers: 請求頭。 body: 請求數(shù)據(jù)。當請求方法為GET或HEAD時，Request不包含body。 redirect: 重定向方式，可選follow, error, or manual。默認為manual。

new Response(body, init)

參數(shù)說明

body (可選): Response的body，可以是以下格式中的一種： BufferSource FormData ReadableStream URLSearchParams USVString init (可選): 可以自定義Response的屬性。 status: 狀態(tài)碼，比如：200。 statusText: 狀態(tài)，比如：OK。 headers: Response的headers。

更多內(nèi)容可以參考：

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

https://developer.mozilla.org/zh-CN/docs/Web/API/Request/Request

https://developer.mozilla.org/zh-CN/docs/Web/API/Response/Response