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.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