1、快速開(kāi)始

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

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

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

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

async function rawJsonResponse(json) {

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

至此，我們完成了一個(gè)獲取請(qǐng)求-根據(jù)請(qǐng)求執(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ù)說(shuō)明

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

new Request(input [, init]) 

參數(shù)說(shuō)明

input: 可傳URL或Request對(duì)象。當(dāng)你想修改URL時(shí)，需在此參數(shù)位置傳入U(xiǎn)RL。但你想修改其他屬性時(shí)，此參數(shù)位置傳入已存在的Request對(duì)象以繼承屬性。

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

new Response(body, init)

參數(shù)說(shuō)明

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