分(fen)配(pei)給運行時的HTTP請(qing)求的事件(jian)類型(xing)。詳細定義請(qing)參見(jian)MDN官方(fang)文檔FetchEvent。

上下文

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

屬性

• event.request Request
  • 觸發FetchEvent的HTTP請求。

方法

當運行(xing)(xing)時(shi)腳本收到請求時(shi)，運行(xing)(xing)時(shi)將觸發FetchEvent，然(ran)后觸發事件類型(xing)為fetch事件偵(zhen)聽器進行(xing)(xing)處理。事件處理程序可(ke)以調用event對象(xiang)的(de)以下方(fang)法來(lai)進行(xing)(xing)控制：

• event.respondWith( response Request|Promise ) void
  • 攔截請求并發送自定義響應。
  • 必須調用respondWith()進行有效的響應，否則運行時會報錯。

生命周期

當(dang)邊(bian)緣接收到一(yi)(yi)個(ge)請(qing)求，該請(qing)求的(de)URL映(ying)射到用戶函數時，FetchEvent生命周期開始；這時運(yun)行時觸(chu)發一(yi)(yi)個(ge)事(shi)件，并創建一(yi)(yi)個(ge)FetchEvent對象傳(chuan)遞給運(yun)行時的(de)第(di)一(yi)(yi)個(ge)注冊為fetch的(de)事(shi)件處(chu)理程序。

事件處(chu)理(li)程(cheng)序可(ke)以使用(yong)respondWith()來攔截請求并允許用(yong)戶發送(song)自(zi)定義(yi)響(xiang)應。

如果fetch事件處(chu)(chu)理(li)程(cheng)序(xu)未調用respondWith()，則運行時會將事件傳遞到下一個注冊的fetch事件處(chu)(chu)理(li)程(cheng)序(xu)。

addEventListener('fetch', (event) => {
    event.respondWith(handle(event));
});

async function handle(event) {
    // 1.異步發起一個fetch請求，但是我們不使用await，所以該請求會并行執行
    fetch("//www.daliqc.cn");
    // 2.立刻發起回復。這個回復hello world發回給客戶端時，前面發起的fetch可能沒有執行完畢。
    return "hello world";
}

相關參考

示例代碼：返回HTML頁面

示例代碼：返回JSON內容