Edge Developer Platform
  • Edge Functions
    • Overview
    • Getting Started
    • Operation Guide
      • Function Management
      • Function Trigger
    • Runtime APIs
      • addEventListener
      • Cache
      • Cookies
      • Encoding
      • Fetch
      • FetchEvent
      • Headers
      • Request
      • Response
      • Streams
        • ReadableStream
        • ReadableStreamBYOBReader
        • ReadableStreamDefaultReader
        • TransformStream
        • WritableStream
        • WritableStreamDefaultWriter
      • Web Crypto
      • Web standards
      • Images
        • ImageProperties
    • Sample Functions
      • Returning an HTML Page
      • Returning a JSON Object
      • Fetch Remote Resources
      • Authenticating a Request Header
      • Modifying a Response Header
      • Performing an A/B Test
      • Setting Cookies
      • Performing Redirect Based on the Request Location
      • Using the Cache API
      • Caching POST Requests
      • Responding in Streaming Mode
      • Merging Resources and Responding in Streaming Mode
      • Protecting Data from Tampering
      • Rewriting a m3u8 File and Configuring Authentication
      • Adaptive Image Resize
      • Image Adaptive WebP
      • Customize Referer restriction rules
      • Remote Authentication
      • HMAC Digital Signature
      • Naming a Downloaded File
      • Obtaining Client IP Address
    • Best Practices
      • Adaptive Image Format Conversion via Edge Functions
Docs Overview/
Edge Developer Platform/
Edge Functions/
Runtime APIs/
Fetch/

Fetch

The Fetch API is designed based on the standard Web API Fetch. You can add fetch to the edge function runtime to initiate an async request to fetch remote.

Description

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

Parameters

Parameter name
Type
Required
Description
request
string | Request
Yes
Requested resource.
requestInit
No
Initial configuration items of the request object. For more information, see RequestInit.

Advanced Features

With fetch, you can pass in specific parameters for finer configuration of EdgeOne node caching, fetching from the origin, image processing and redirection.

Accessing EdgeOne nodes or fetching from the origin

When a client request comes to a domain name domain name connected to EdgeOne (such as www.example.com), if the request triggers an edge function, fetch(www.example.com) is executed in the edge function. The request is directed to the cache on the EdgeOne node. If no cache is hit, the request is redirected to the origin.
Restrictions and requirements:
1. The domain name is connected to EdgeOne and the request triggers the edge function.
2. HOST of request.url specified in fetch(request) is the same as the HOST of client request URL.
3. HOST of request.headers.host specified in fetch(request) is the same as the HOST of client request URL.
Use fetch(event.request) to obtain the cache from EdgeOne nodes and pull resources from the origin if no cache is hit.
addEventListener('fetch', (event) => {
  //Use `fetch(event.request)` to obtain the cache from EdgeOne nodes and pull resources from the origin if no cache is hit.
  const response = fetch(event.request);
  
  event.respondWith(response);
});
Use fetch(url) to obtain the cache from EdgeOne nodes and pull resources from the origin if no cache is hit.
addEventListener('fetch', (event) => {
  event.respondWith(handleEvent(event));
});

async function handleEvent(event) {
  const { request } = event;
  const urlInfo = new URL(request.url);
  // origin-pull URL rewrite
  const url = `${urlInfo.origin}/h5/${urlInfo.pathname}`;
  
  // fetch(url) collected EdgeOne CDN Cache and origin-pull.
  const response = await fetch(url);
  return response;
}

Image processing

You can use requestInit.eo.image to scale images or convert the image format. For details, see ImageProperties.
Note:
To use fetch(request, requestInit) to process images, the requirements for using fetch to obtain cache and pull from the origin must be met.

Redirection

fetch supports 3xx redirect status codes. You can use the second parameter requestInit.redirect to specify the redirect status code. For more information, see RequestInit.
Redirect rules conform to the Fetch Standard. The follow rules vary based on the status code.
Status code
Redirect Rule
301 and 302
Replaces the POST method with the GET method.
303
Replaces all request methods except for HEAD and GET with the GET method.
307 and 308
Retains the original request method.
Important
The redirect address is obtained from the Location response header. If Location does not exist, no redirect action is taken.
The value of the Location can be an absolute URL or a relative URL. For more information, see RFC-3986: URI Reference.

Runtime limits

If you use fetch to initiate a request in an edge function, take note of the following limits:
Number of times: Each time an edge function runs, fetch can be initiated for a maximum of 64 times. If the limit is exceeded, the exceeding requests fail and exceptions are returned.
Number of concurrencies: Each time an edge function runs, fetch can be initiated at a maximum concurrency of 8. If the limit is exceeded, the exceeding requests are postponed until a running fetch is resolved.
Note
Each redirect is counted as a request and has a higher priority than newly-initiated fetch requests.

References

MDN documentation: Fetch
Sample functions: Obtaining Remote Resources and Responding to the Client