基于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("https://www.ctyun.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())
})

相关参考

示例代码：发起网络请求获取远程资源