Fetch API

Fetch API方法定义

Fetch是完全异步的线程，只要您不使用await，Fetch就不会阻塞脚本执行。目前每次可以发起4个子请求。由于底层采用的是长连接，您无需担心性能，也不用主动处理连接池。

Fetch可以进行HTTP或HTTPS请求，每一次redirect都算一次请求。每一个Fetch最多可以支持12次redirect。

• 方法定义

  fetch(arg, init)，Fetch的详细定义请参见MDN官方文档WorkerOrGlobalScope.fetch()。

• 方法限制
  • 目前Fetch API只支持域名，不支持IP地址。HTTP请求对应的端口为80，HTTPS请求对应的端口为443。
  • init参数内部的credentials、referrer、 referrerPolicy、cache和integrity无任何意义。
  • redirect默认值为manual，即不主动跟随3xx。如果需要跟随3xx，需将redirect设置为follow。
  说明

  • 对浏览器内部的多种Fetch模式不做区分，例如CROS fetch，在CDN/DCDN上您可以Fetch任何源站。
  • 如果需要4个及以上的子请求时，请填写信息申请配额。
  • 请求URL的总长度不超过4 KB。
  • ER通过Fetch获取的gzip压缩资源默认解压。如不希望默认解压内容，请参见下方Decompress章节添加manual参数。
• 设置超时时间
  • Timeout函数

    /**
     * 请求超时控制实现
     *
     * @param {Number} timeout 超时等待时间，单位ms
     * @param {Object} config 超时配置
     *   - @param {Object|Funtion} handler 超时返回
     * @returns
     */
    const RequestTimeout = (timeout, config) => {
      return new Promise((resolve) => {
        const { handler = null } = config;
        let timer = setTimeout(() => {
          clearTimeout(timer);
          timer = null;
    
          const defaultRes = (typeof handler === 'function' ? handler() : handler) || {};
          resolve(defaultRes);
        }, timeout);
      });
    };

  • 调用示例

    const KV_TIMEOUT = 1000;
    let edgekv = new EdgeKV({
      namespace: KV_NS,
    });
    
    let kvRequest = edgekv.get(key, getType);
    let timeoutPromise = RequestTimeout(KV_TIMEOUT, {
      handler: {
        res: {},
        errorMessage: `kv request timeout (${KV_TIMEOUT}ms)`,
      }
    });
    
    let resp = await Promise.race([
      kvRequest,
      timeoutPromise,
    ]);
    
    if (resp === undefined) {
      return "kv not found, key = " + key;
    } else {
      return resp;
    }

Redirect

Decompress

CdnProxy

当您在ER内发起Fetch子请求时，默认由ER直接向公网发起HTTP请求（例如下图中的第6步），但您也可以用cdnProxy通过CDN/DCDN回源链路来代理请求（请求链路见下图中的5→3）。cdnProxy的用法是fetch("http://www.example.com", {cdnProxy: true}) 。cdnProxy参数只能在Fetch CDN/DCDN域名时使用，使用cdnProxy的好处在于Fetch请求可直接快速访问同节点的缓存文件，无需再次经过DNS解析至其它CDN/DCDN节点，可以减少网络耗时。

说明 您通过cdnProxy发起Fetch的域名（例如示例中的www.example.com）必须是已经接入阿里云CDN/DCDN的域名，否则会返回403。该方法会自动触发域名在CDN/DCDN上的所有配置，包括缓存、回源等规则。

content-length

Headers

• 定义

  Headers的定义，请参见MDN官方文档Headers。

• 限制

  header内部会记录内存消耗，header对象可以存储的最大header是8 KB。如果单个header对象超用，会触发JS exception。

• 黑名单
  header有黑名单，无法读写以下头，如果您读取会造成exception。

  • expect
  • te
  • trailer
  • upgrade
  • proxy-connection
  • connection
  • keep-alive
  • dnt
  • host
  • 其他内部头

Request

• 定义

  Request的定义，请参见MDN官方文档Request。

• 限制
  Request对象的以下属性没有实现，在CDN/DCDN上下文中没有意义。

  • context
  • credentials
  • destination
  • integrity
  • mode
  • referrer
  • referrerPolicy
  • cache
• 常见使用
  • 获得请求方法：request.method。
  • 获得请求url：request.url。
  • 获得请求头：request.headers。
  • 获得请求负载：request.body，body是一个ReadableStream对象。
  • 获得JSON：await request.json()。
  • 获得表单数据：await request.formData()。
  • 获得UTF8字符串：await request.text()。

  Request接口是标准的扩充，既可以忽略body，又确保body可以读完，且不会将内存读入JavaScript虚拟机，从而避免了GC造成的延时，确保请求流的body从底层的socket中全部读出。对于await request.ignore()，如果您不需要读取Fetch的body或者不感兴趣，建议所有的Fetch请求都调用request.ignore，可以有效提高性能，因为运行时会自动把读取完body的请求发送至连接池中供下次复用。

Response

• 定义

  Response的定义，请参见MDN官方文档Response。

• 限制

  Response对象的useFinalURLS和error属性没有实现，在CDN/DCDN上下文中没有意义。

• 常见使用
  • 获得回复码：response.status。
  • 获得回复reason phrase：response.statusText。
  • 获得回复头：response.headers。
  • 获得回复URL：response.url，表示该回复是对应的URL发送的。
  • 获得所有redirect的URL list，属于非标准：response.urlList，类似Request对象实现了body mixin，使用类似方法您可以获得body对象。

FormData

• 定义

  FormData的定义，请参见MDN官方文档FormData。

• 限制

  FormData类似Header，有内部大小限制，如果过大FormData会出现异常。如果把FormData当作HTTP body发送，默认的content-type是form-data/multipart。

URLSearchParams

• 定义

  URLSearchParams的定义，请参见MDN官方文档URLSearchParams()。

• 限制

  如果把URLSearchParams当作HTTPbody发送，默认的content-type是application/x-www-form-urlencode，最大限制为1000字节。

Blob和File

• 定义
  • Blob的定义，请参见MDN官方文档Blob。
  • File的定义，请参见MDN官方文档File。
• 限制

  为了与标准保持一致，ER提供了Blob和File这两个类。由于ER不支持读写文件，为了满足标准，您可以使用这两个类，如果使用这两个类提供给回复的body，content-type是Blob和File设置的mime type，和标准一致。