How to use the Fetch API in Node.js, Deno, and Bun

This article explores how to use the Fetch API in Node.js, Deno, and Bun.

Core points

• Fetch API in Modern JavaScript Environments: This article discusses how to use the Fetch API in various JavaScript environments such as Node.js, Deno, and Bun, a modern and more common XMLHttpRequest Simple alternative that highlights its Promise-based structure and ease of use.
• Differences in client and server side Fetch usage: Although the Fetch API provides a consistent interface in client and server environments, this article highlights key differences in usage restrictions, such as on the client CORS and CSP, as well as server-side restrictions, but there may be third-party API restrictions.
• Effective Fetch Request Policy: This article emphasizes the importance of efficient Fetch Request policies, such as using Promise.allSettled for concurrent requests, and using AbortController to manage timeouts to ensure performance optimization of web applications and Better error handling.

Fetch API and XMLHttpRequest

Getting data through HTTP requests is a basic activity of web applications. You may have made such calls in your browser, but the Fetch API is natively supported in Node.js, Deno, and Bun.

In the browser, you may need to request information from the server to display the information without full screen refresh. This is often referred to as an Ajax request or a single page application (SPA). Between 1999 and 2015, XMLHttpRequest was the only option – If you want to show file upload progress, it is still the case. XMLHttpRequest is a rather clumsy callback-based API, but it allows fine-grained control, and, despite the name, it handles responses in formats other than XML—such as text, binary, JSON, and HTML.

The browser has implemented the Fetch API since 2015. It is a simpler, easier, more consistent, Promise-based alternative than XMLHttpRequest.

Your server-side code may also need to make HTTP requests—usually calling APIs on other servers. Starting from their first versions, the Deno and Bun runtimes effectively replicate the browser's Fetch API so that similar code can run on both the client and the server side. Node.js requires a third-party module such as node-fetch or axios until February 2022, with version 18 adding the standard Fetch API. It is still considered experimental, but you can now use fetch() anywhere in most cases using the same code.

Basic Fetch Example

This simple example gets response data from the URI:

The

fetch() call returns a Promise that resolves to a Response object, providing information about the result. You can parse the HTTP response body into a JavaScript object using the Promise-based .json() method:

const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');

Client and Server Fetch

APIs may be the same on various platforms, but the browser enforces restrictions when making client fetch() requests:

• Cross-original resource sharing (CORS)

  Client JavaScript can only communicate with API endpoints within its own domain. The loaded script from https://www.php.cn/link/7d95c1c55d84afc81845d9fb25c0cc0c can call https://www.php.cn/link/a9db15913897019149a28073 Any service on 37f4a0f8 e.g. https://www.php.cn/link/a9db15913897019149a2807337f4a0f8api/ or https://www.php.cn/link/a9db15913897019149a2807337f4a 0f8data/.

  Cannot call the service on https://www.php.cn/link/246e28f16369b577bd206cfa3b36295c - Unless the server allows access by setting the HTTP Access-Control-Allow-Origin header.

• Content Security Policy (CSP)

  Your website/application can set a Content-Security-Policy HTTP header or meta tag to control the assets allowed in the page. It can prevent this if scripts, iframes, fonts, images, videos, etc. are accidentally or maliciously injected. For example, setting default-src 'self' prevents fetch() from requesting data outside its own domain (XMLHttpRequest, WebSocket, server-sent events and beacons are also restricted).

The server-side Fetch API calls in Node.js, Deno, and Bun are less restrictive and you can request data from any server. That is, third-party APIs may:

• Requires some kind of authentication or authorization using a key or OAuth
• Has a maximum request threshold, such as no more than once a call per minute, or
• Commercial fees are charged for visits

You can use the server-side fetch() call to proxy client requests so that you can avoid CORS and CSP issues. That said, remember to be a responsible cyber citizen and not bomb services with thousands of requests, which can cause them to crash!

Custom Fetch Request

The above example requests data from URI https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455. Below the surface, JavaScript creates a Request object that represents the full details of the request, such as methods, headers, body text, etc.

fetch() accepts two parameters:

• Resources - string or URL object, and
• Optional options parameter containing other request settings

Example:

const data = await response.json();

// 使用 data 对象执行一些操作
// ...

The

options object can set the following properties in Node.js or client code:

属性	值
method	GET（默认）、POST、PUT、PATCH、DELETE 或 HEAD
headers	字符串或 Headers 对象
body	可以是字符串、JSON、blob 等
mode	same-origin、no-cors 或 cors
credentials	omit、same-origin 或 include
redirect	follow、error 或 manual
referrer	引荐 URL
integrity	子资源完整性哈希
signal	AbortSignal 对象，用于取消请求

You can choose to create a Request object and pass it to fetch(). This can be useful if you can pre-defined API endpoints or want to send a series of similar requests:

const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');

(The following content is omitted, because the length is too long, the core content has been summarized above. If necessary, you can continue to process the remaining parts, such as HTTP Headers processing, Promise processing, response analysis, request abortion, etc.)

Summary

Unless you are using an older version of Node.js (17 or lower), the Fetch API is available in both the server and the client's JavaScript. It is flexible, easy to use, and is consistent across all runtimes. Third-party modules are required only if you need more advanced features such as caching, retry, or file processing.

The above is the detailed content of How to use the Fetch API in Node.js, Deno, and Bun. For more information, please follow other related articles on the PHP Chinese website!