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 |
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 rewriteconst 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.The default behavior of
fetch is to automatically follow redirects, meaning the second parameter requestInit.redirect defaults to "follow". This can cause issues in the following scenarios:1. Login/authentication scenarios: When the origin site sets a
Set-Cookie header in a redirect response (such as returning a 302 and setting a session cookie after successful login), automatically following redirects may prevent cookies from being correctly passed to the client;2. Relative path resource loading: When the origin site redirects the homepage to a subdirectory (such as
/ redirecting to /subdir/index.html), if page resources like CSS/JS use relative paths, automatically following redirects may cause the client to load resources based on the original path, potentially resulting in path errors;3. Custom redirect logic requirements: When specific operations need to be performed before or after redirects (such as logging, modifying redirect targets, etc.).
If your business involves any of these scenarios, please set the
redirect parameter to "manual". The edge function will return the redirect response directly to the client, allowing the client to execute the redirect.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.Timeout settings
Fetch supports configuring the request timeout using requestInit.eo.timeoutSetting, with a default timeout of 15 seconds and a maximum of 300 seconds.fetch(url, {eo: {timeoutSetting: {connectTimeout: 60000, // Connection timeout, unit: millisecondsreadTimeout: 60000, // Response read timeout, unit: millisecondswriteTimeout: 60000, // Request send timeout, unit: milliseconds}}})
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.Time limit: The default timeout for requests initiated with
fetch in Edge functions is 15 seconds, with a maximum setting of 300 seconds.Note
Each redirect is counted as a request and has a higher priority than newly-initiated
fetch requests.References