基于Web API標準進行設計。fetch()函數用于發起獲取資源的請求。

Fetch是完全異步的線程，只要你不使用await，Fetch就不會阻塞腳本執行。

詳細定義請參見MDN官方文檔WorkerOrGlobalScope.fetch()。

用法

await fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // GET, POST, PUT, DELETE, etc.
    redirect: 'follow' // manual, follow, error
  })

定義

fetch(input: string | Request, init?: RequestInit): Promise<Response>

參數

• input ：string | Request

  • 必選，定義要獲取的資源。這可能是：

    • 一個String字符串，包含要獲取資源的URL。
    • 一個Request對象。

    
                        
    注意
                        
    目前只支持域名，不支持IP地址，HTTP請求對應的端口為80，HTTPS請求對應的端口為443。
                        
                      
                      

• init ：
  • 可選，一個配置項對象，包括所有對請求的設置。可選的參數有：

    • method : 請求使用的方法，如GET、POST。

    • headers : 請求的頭信息，形式為Headers的對象或包含ByteString值的對象字面量。

    • body : 請求的body信息：可能是一個Blob（即將支持）、BufferSource、FormData（即將支持）、URLSearchParams或者USVString對象。注意GET或HEAD方法的請求不能包含body信息。

    • redirect ：可用的redirect模式:

      • follow：自動重定向（即將支持）。
      • error：如果產生重定向將自動終止并且拋出一個錯誤（即將支持）。
      • manual：手動處理重定向。

      
                          
      說明
                          
      默認值為manual，即不主動跟隨3xx，如果需要跟隨3xx，需將redirect設置為follow。
                          
                        
                        

    • credentials、referrer、referrerPolicy、cache和integrity暫無意義。

示例

Fetch URL

addEventListener("fetch", event => {
    return event.respondWith(
        fetch("//www.daliqc.cn")
    )
})

帶構建函數

async function handleRequest() {
    const init = {
        headers: {
            "content-type": "application/json;charset=UTF-8",
        },
        redirect: "follow"
    }
    const response = await fetch(url, init)
    return new Response(response, init)
}

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

相關參考

示例代碼：發起網絡請求獲取遠程資源