边缘开发者平台
  • 边缘函数
    • 概述
    • 快速指引
    • 操作指引
      • 函数管理
      • 触发配置
    • Runtime APIs
      • addEventListener
      • Cache
      • Cookies
      • Encoding
      • Fetch
      • FetchEvent
      • Headers
      • Request
      • Response
      • Streams
        • ReadableStream
        • ReadableStreamBYOBReader
        • ReadableStreamDefaultReader
        • TransformStream
        • WritableStream
        • WritableStreamDefaultWriter
      • Web Crypto
      • Web standards
      • Images
        • ImageProperties
    • 示例函数
      • 返回 HTML 页面
      • 返回 JSON
      • Fetch 远程资源
      • 请求头鉴权
      • 修改响应头
      • AB 测试
      • 设置 Cookie
      • 基于请求区域重定向
      • Cache API 使用
      • 缓存 POST 请求
      • 流式响应
      • 合并资源流式响应
      • 防篡改校验
      • m3u8 改写与鉴权
      • 图片自适应缩放
      • 图片自适应 WebP
      • 自定义 Referer 限制规则
      • 远程鉴权
      • HMAC 数字签名
      • 自定义下载文件名
      • 获取客户端 IP
    • 最佳实践
      • 通过边缘函数实现自适应图片格式转换
Docs Overview/
边缘开发者平台/
边缘函数/
Runtime APIs/
Fetch/

Fetch

基于 Web APIs 标准 Fetch API 进行设计。边缘函数运行时可使用 fetch 发起异步请求，获取远程资源。

描述

function fetch(request: string | Request, requestInit?: RequestInit): Promise<Response>

参数

参数名称
类型
必填
说明
request
string | Request
是
指定将要获取的请求资源。
requestInit
否
请求对象的初始化配置项。详情请参见 RequestInit。

高级功能

使用 fetch 时，可以通过传入特定参数实现更精细的控制和定制化逻辑。主要包含访问 EdgeOne 节点缓存或回源，图片处理，重定向。

访问 EdgeOne 节点缓存或回源

当客户端访问某个已接入 EdgeOne 站点的加速域名 时（如：www.example.com ），同时该请求触发了边缘函数执行，此时在该边缘函数中实现 fetch(www.example.com) 请求，该请求将访问 EdgeOne 节点缓存，若不存在缓存，则进行回源。
说明：fetch 访问 EdgeOne 节点缓存与回源，需满足以下条件：
1. 客户端访问 EdgeOne 接入站点的加速域名，同时该请求触发了边缘函数执行。
2. fetch(request) 指定的 request.url 中的 HOST 和客户端请求 URL 中的 HOST 相同。
3. fetch(request) 指定的 request.headers.host 和客户端请求头 HOST 值相同。
fetch(event.request) 获取 EdgeOne 缓存与回源。
addEventListener('fetch', (event) => {
  // fetch(event.request) 获取 EdgeOne CDN 缓存与回源。
  const response = fetch(event.request);
  
  event.respondWith(response);
});
fetch(url) 获取 EdgeOne 缓存与回源。
addEventListener('fetch', (event) => {
  event.respondWith(handleEvent(event));
});

async function handleEvent(event) {
  const { request } = event;
  const urlInfo = new URL(request.url);
  // 回源 URL 改写
  const url = `${urlInfo.origin}/h5/${urlInfo.pathname}`;
  
  // fetch(url) 获取 EdgeOne CDN 缓存与回源。
  const response = await fetch(url);
  return response;
}

图片处理

fetch 支持传入参数 requestInit.eo.image 对图片进行缩放或格式转换，详情参见图片处理的参数配置项 ImageProperties 。
说明：
使用 fetch(request, requestInit) 实现图片处理时，需要同时满足 fetch 获取 EdgeOne 节点缓存与回源的条件。

重定向

fetch 支持 3xx 重定向状态码。可使用第二个参数 requestInit.redirect 属性进行设置，更多重定向配置，请查看 RequestInit。
重定向规则遵从 Web APIs 标准 fetch API，针对不同状态码有不同的跟随规则：
状态码
重定向规则
301、302
POST 方法被转为 GET 方法。
303
除 HEAD / GET 外的所有方法都被转为 GET 方法。
307、308
保留原始方法。
注意
重定向的地址来源于响应头 Location，若无该响应头，则不会重定向。
响应头 Location 值可以是绝对 URL 或者相对 URL，详情参见 RFC-3986: URI Reference。

运行时限制

边缘函数中使用 fetch 发起请求，存在以下限制：
次数限制：边缘函数单次运行中可发起的 fetch 总次数为 64，超过该限制的 fetch 请求会请求失败，并抛出异常。
并发限制：边缘函数单次运行中允许发起 fetch 最大并发数为 8，超过该限制的 fetch 请求会被延迟发起，直到某个正在运行着的 fetch 被 resolve。
注意
每一次重定向都会计入请求次数，且其优先级高于新发起的 fetch 请求。

相关参考

MDN 官方文档：fetch
示例函数：获取远程资源返回