The JavaScript ecosystem moves quickly. One minute, we're building monolithic Node.js servers. The next, it's all about serverless functions and running code at the edge on platforms like Cloudflare or Vercel. Staying current can feel like a full-time job.

Hono is built on top of Web Standards – the same Request and Response objects in your browser – which means your code is naturally portable across almost any JavaScript runtime.

This guide is a deep dive into this powerful little framework, designed to help you build real, production-ready applications. We’ll skip the quick "Hello, World!" and jump straight into the patterns and features you will actually use, with plenty of detailed code examples along the way.

Table of Contents

• What You Will Learn in This Guide

• Prerequisites for Following Along

• How to Set Up a Professional Hono Project

• How to Understand Hono's Core API

• The Context Object in Depth

• How to Use Advanced Features for Production Apps

• Deployment Guide for Hono

What You Will Learn in This Guide

By the end of this tutorial, you will be able to:

• Structure a Hono project for both development and production.

• Implement advanced routing patterns.

• Leverage the full power of the Context object to manage requests and pass data between middleware.

• Write complex custom middleware for authentication, logging, and error handling.

• Validate incoming data using the official Zod validator for robust APIs.

• Build a small, server-rendered application with JSX components.

• Deploy a Hono application to various modern hosting platforms.

Prerequisites for Following Along

This is an in-depth guide, but it assumes you have some foundational knowledge. Before you start, you should have:

• Node.js installed: Version 18 or higher is recommended.

• A code editor: Visual Studio Code is a great choice.

• Familiarity with TypeScript: You should understand basic types, functions, and async/await.

• Basic command-line knowledge: You should be comfortable running commands in your terminal.

How to Set Up a Professional Hono Project

You can get started with Hono using a single command. This will create a new project directory with a recommended structure and configuration files. When prompted, select the nodejs template and choose to install dependencies with your preferred package manager (for example, npm).

npm create hono@latest hono-production-app

The command will guide you through the setup:

> npx create-hono hono-production-app

create-hono version 0.19.2
✔ Using target directory … hono-production-app
✔ Which template do you want to use? nodejs
✔ Do you want to install project dependencies? Yes
✔ Which package manager do you want to use? npm
✔ Cloning the template
✔ Installing project dependencies
🎉 Copied project files
Get started with: cd hono-production-app

Now, navigate into your new directory: cd hono-production-app. Let's look at the files that were created:

• package.json: Defines your project's dependencies and scripts.

• tsconfig.json: The TypeScript configuration file.

• src/index.ts: The entry point of your application.

Now, you can run npm run dev to start your development server. Navigate to http://localhost:3000, and you will see "Hello Hono!".

How to Understand Hono's Core API

Hono's API is designed to be minimal, which makes it easy to learn – yet incredibly powerful.

How to Use Advanced Routing Techniques

You may already know app.get() and app.post() from Express, but Hono's router can do much more.

1. How to Route with Regular Expressions

You can constrain a URL parameter to match a specific regular expression. For example, to make sure an :id parameter only accepts numbers, you can do this:

// Only match routes like /users/123, not /users/abc
app.get('/users/:id{[0-9]+}', (c) => {
  const id = c.req.param('id')
  return c.text(`Fetching data for user ID: ${id}`)
})

2. How to Use Optional and Wildcard Routes

You can define routes that match multiple paths using wildcards (*) or handle optional parameters.

// This will match /files/image.png, /files/docs/report.pdf, and so on.
app.get('/files/*', (c) => {
  // c.req.path will contain the full matched path
  return c.text(`You are accessing the file at: ${c.req.path}`)
})

// The '?' makes the '/:format?' part of the URL optional
// This will match both /api/posts and /api/posts/json
app.get('/api/posts/:format?', (c) => {
  const format = c.req.param('format')
  if (format === 'json') {
    return c.json({ message: 'Here are the posts in JSON format.' })
  }
  return c.text('Here are the posts in plain text.')
})

3. How to Group Routes with app.route()

For larger applications, you should organize your routes into logical groups. The app.route() method is perfect for this. It allows you to create modular routers and mount them on a specific prefix.

Let's create a more complex API structure for a blog.

src/routes/posts.ts

import { Hono } from 'hono'

// Create a new router instance specifically for posts
const posts = new Hono()

posts.get('/', (c) => c.json({ posts: [] }))
posts.post('/', (c) => c.json({ message: 'Post created' }, 201))
posts.get('/:id', (c) => c.json({ post: { id: c.req.param('id') } }))

export default posts

src/routes/authors.ts

import { Hono } from 'hono'

const authors = new Hono()

authors.get('/', (c) => c.json({ authors: [] }))
authors.get('/:id', (c) => c.json({ author: { id: c.req.param('id') } }))

export default authors

src/index.ts

import { serve } from '@hono/node-server'
import { Hono } from 'hono'
import { appendTrailingSlash } from 'hono/trailing-slash';
import posts from './routes/posts.js'
import authors from './routes/authors.js'

const app = new Hono()

app.use(appendTrailingSlash());

app.route('/posts/', posts)
app.route('/authors/', authors)

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

serve({
  fetch: app.fetch,
  port: 3000
}, (info) => {
  console.log(`Server is running on http://localhost:${info.port}`)
})

This pattern keeps your main index.ts file clean and makes your application much easier to navigate and maintain.

The Context Object in Depth

The Context (c) is the heart of Hono. It's an object that gets passed to every middleware and route handler, containing all the information related to the current request. It's essentially a container for the request (c.req) methods for creating a response (c.json, c.html, c.text), as well as a special property for passing data between middleware (c.set and c.get).

While this covers its most common and useful properties, the full Context object contains more. For a comprehensive list of all available properties and methods, you can refer to the official Hono documentation.

Let's explore how you can use the context object to pass data between middleware and handlers, a crucial technique for things like authentication.

The c.set() and c.get() methods allow you to store and retrieve typed data within the context of a single request.

Replace src/index.ts with this example for authentication:

import { Hono } from 'hono'
import type { Context, Next } from 'hono'

// Define a type for the variables we will store in the context
type AppVariables = {
  user: {
    id: string
    name: string
    roles: string[]
  }
}

// Use a generic to tell our Hono app about the variables type
const app = new Hono<{ Variables: AppVariables }>()

// Middleware to "authenticate" a user from a header
const authMiddleware = async (c: Context, next: Next) => {
  const userId = c.req.header('X-User-ID')
  if (!userId) {
    return c.json({ error: 'Missing X-User-ID header' }, 401)
  }

  // In a real app, you would fetch this from a database
  const user = {
    id: userId,
    name: 'Jane Doe',
    roles: ['admin', 'editor'],
  }

  // Use c.set() to attach the user data to the context
  c.set('user', user)

  await next()
}

app.get('/admin/dashboard', authMiddleware, (c) => {
  // Use c.get() to retrieve the typed user data
  const user = c.get('user')

  if (!user.roles.includes('admin')) {
    return c.json({ error: 'Forbidden' }, 403)
  }

  return c.json({
    message: `Welcome to the admin dashboard, ${user.name}!`,
    userId: user.id,
  })
})

export default app

Let's break down the important parts of the code above.

• Typed context variables: We define a TypeScript type AppVariables and pass it as a generic to our Hono app new Hono<{ Variables: AppVariables }>(). This is a powerful feature that gives us full type-safety for our context variables, preventing typos and ensuring that the data we store and retrieve is exactly what we expect it to be.

• Custom middleware: The authMiddleware is a custom function that runs before our route handler. It inspects the incoming request's headers (c.req.header('X-User-ID')).

• Storing data: If a valid header is found, the middleware uses c.set('user', user) to store the user object on the context. This data is now available to any subsequent middleware or route handler for the same request.

• Retrieving data: The route handler app.get('/admin/dashboard', ...) then uses c.get('user') to retrieve the user object. Hono's type system ensures that c.get('user') returns a variable with the type { id: string; name: string; roles: string[]; }.

• Flow control: If the user is missing or doesn't have the "admin" role, the middleware or handler can immediately send an error response using c.json() and a status code, preventing the request from proceeding further.

Now, run npm run dev.

You can test with curl (add header):

curl -H "X-User-ID: 123" http://localhost:3000/admin/dashboard

This will return a welcome message.

Without the header:

curl http://localhost:3000/admin/dashboard

This will return a 401 error.

This demonstrates how to pass typed data securely and efficiently between middleware and route handlers.

How to Use Advanced Features for Production Apps

Now we're ready to tackle the features you'll use every day in production: advanced middleware, data validation, and building full-stack applications.

How to Use Advanced Middleware Patterns

Hono has a powerful set of built-in middleware, including JWT and caching. These are not separate libraries you have to install, but rather functions that come with the Hono package itself.

Step 1: Replace src/index.ts with this example for JWT and caching:

import { Hono } from 'hono'
import { serve } from '@hono/node-server'
import { jwt, sign } from 'hono/jwt'

const app = new Hono()
const SECRET = 'my-secret-key' // Use an environment variable in production!

// Create a simple in-memory cache store
const cacheStore = new Map();

// Custom caching middleware for Node.js
app.use('/api/public-data', async (c, next) => {
  const cacheKey = c.req.url;

  // Check if the response is in our cache
  if (cacheStore.has(cacheKey)) {
    const cachedItem = cacheStore.get(cacheKey);
    console.log('Serving from custom in-memory cache.');
    return new Response(cachedItem.body, { headers: cachedItem.headers });
  }

  // If not in cache, proceed to the route handler
  await next();

  // After the handler returns, clone and store the response
  if (c.res) {
    const newResponse = c.res.clone();
    const body = await newResponse.text();
    const headers = Object.fromEntries(newResponse.headers.entries());
    cacheStore.set(cacheKey, { body, headers });
    console.log('Storing response in custom in-memory cache.');
  }
});

// Login to get a JWT
app.post('/login', async (c) => {
  const { username } = await c.req.json()
  if (username === 'admin') {
    const payload = {
      sub: username,
      role: 'admin',
      exp: Math.floor(Date.now() / 1000) + 60 * 5, // 5 minutes expiration
    }
    const token = await sign(payload, SECRET)
    return c.json({ token })
  }
  return c.json({ error: 'Invalid credentials' }, 401)
})

// Protected route
app.get(
  '/api/protected',
  jwt({ secret: SECRET }),
  (c) => {
    const payload = c.get('jwtPayload')
    return c.json({ message: 'You have access!', payload })
  }
)

// Cached route
app.get(
  '/api/public-data',
  async (c) => {
    console.log('Executing handler with delay...');
    await new Promise(resolve => setTimeout(resolve, 1000)) // Simulate a delay
    return c.json({ data: 'This is some public data that rarely changes.' })
  }
)

serve({ fetch: app.fetch, port: 3000 }, (info) => {
  console.log(`Server is running on http://localhost:${info.port}`)
})

The code above shows two different types of middleware in action.

First, JWT middleware (jwt) is a powerful way to secure your routes. When we call jwt({ secret: SECRET }), we're telling Hono to check for a valid JWT in the Authorization header of the incoming request. If a valid token is found, it decodes the payload and attaches it to the context, where we can retrieve it with c.get('jwtPayload'). If no token is found or if the token is invalid, the middleware automatically stops the request and returns a 401 Unauthorized error.

We also have Custom Cache Middleware which demonstrates the power of Hono's middleware system for in-memory caching. The middleware first checks an in-memory Map to see if a response for the current URL already exists. If it does, it immediately returns the cached response, preventing the route handler from ever being executed. If the response is not in the cache, it allows the request to continue to the handler. After the handler returns, the middleware intercepts the response and stores a copy in the cache before sending it back to the client. This is a robust and reliable pattern for Node.js environments.

Step 2: Run npm run dev.

Step 3: Test the login endpoint with curl:

First, let's test the login endpoint to get a JWT. Open a new terminal and run the following command. The command sends a POST request to the /login endpoint with username: "admin" in the request body.

curl -X POST http://localhost:3000/login -H "Content-Type: application/json" -d '{"username": "admin"}'

This will return a JSON object with a JWT. Copy this token for the next step.

Now, let's test the protected route. We'll use the token we just received in the Authorization header. Replace <your_jwt_token> with the token you copied.

curl http://localhost:3000/api/protected -H "Authorization: Bearer <your_jwt_token>"

You should get a success message with the decoded payload.

Finally, let's test the cached route. You’ll need to run a production build and run the file with node for this to work.

First, run the following command. The 1000 millisecond delay in the code will make this request take about a second.

curl -o /dev/null -s -w 'Total: %{time_total}s\n' http://localhost:3000/api/public-data

Immediately run the exact same command again. This time, the response will be almost instantaneous because our custom cache middleware served the response directly from its in-memory store, completely bypassing the setTimeout in the route handler. Run it a third time, and you'll see a similar near-instantaneous response.

Here's an example of what your terminal output should look like when testing the cache. The first request took around 1 second, but subsequent requests were a matter of milliseconds.

How to Create a Global Error Handler

You can define a single global error handler with app.onError(). This is useful for handling unexpected errors in a centralized way, such as validation failures.

Add the following code to your src/index.ts:

app.get('/users/:id', (c) => {
  const id = c.req.param('id')
  if (isNaN(Number(id))) {
    throw new Error('User ID must be a number.')
  }
  return c.text(`User ID is ${id}`)
})

app.onError((err, c) => {
  console.error(`${err}`)
  return c.json({
    success: false,
    message: err.message,
  }, 500)
})

Now, if you visit http://localhost:3000/users/abc, you will get a JSON error response instead of an uncaught exception.

How to Handle Validation with Zod

For robust APIs, data validation is essential. Hono integrates seamlessly with Zod, a popular TypeScript-first schema validation library.

Step 1: Install the necessary dependencies:

npm install zod @hono/zod-validator

Step 2: Replace src/index.ts with the validation example:

import { Hono } from 'hono'
import { serve } from '@hono/node-server'
import { z } from 'zod'
import { zValidator } from '@hono/zod-validator'

const app = new Hono()

// Define a Zod schema for the user creation data
const createUserSchema = z.object({
  username: z.string().min(3).max(20),
  email: z.string().email(),
  age: z.number().int().positive(),
  tags: z.array(z.string()).optional(),
})

app.post(
  '/users',
  zValidator('json', createUserSchema), // Use zValidator middleware
  (c) => {
    // The validated data is available on c.req.valid()
    const user = c.req.valid('json')
    console.log(`Creating user: ${user.username} with email ${user.email}`)
    return c.json({
      success: true,
      message: 'User created successfully!',
      user: user,
    }, 201)
  }
)

serve({ fetch: app.fetch, port: 3000 }, (info) => {
  console.log(`Server is running on http://localhost:${info.port}`)
})

This is how the Zod validation is working:

1. We first define a schema called createUserSchema using z.object(). This schema is a blueprint for the expected data structure. We use Zod's built-in methods like z.string().min(3), z.string().email(), and z.number().int().positive() to specify validation rules for each property. For example, username must be a string between 3 and 20 characters, email must be a valid email format, and age must be a positive integer.

2. We then apply the zValidator middleware to our route handler. The first argument, 'json', tells the middleware to validate the incoming request's JSON body. The second argument, createUserSchema, tells it which schema to use for the validation.

3. The zValidator middleware automatically does the heavy lifting. When a request hits the /users endpoint, it will parse the JSON body and attempt to validate it against createUserSchema. If the data is invalid (for example, the email is not in a valid format), the middleware will immediately stop the request and return a 400 Bad Request status with a detailed error message, all without us having to write any manual checks.

4. If the data is valid, the middleware makes it available on the Context object, which we can access with c.req.valid('json'). Hono's type system ensures that this data is correctly typed according to the Zod schema, so we can use it safely in our handler.

Step 3: Run npm run dev.

Step 4: Test with curl (valid data):

curl -X POST http://localhost:3000/users -H "Content-Type: application/json" -d '{"username": "testuser", "email": "test@example.com", "age": 25}'

This will return a success message.

Test with invalid data (for example, bad email):

curl -X POST http://localhost:3000/users -H "Content-Type: application/json" -d '{"username": "testuser", "email": "invalid-email", "age": 25}'

This will automatically return a 400 status with a detailed error message from Zod.

How to Build a Full-Stack App with JSX

Hono supports server-side rendering with JSX, allowing you to build full-stack applications without needing a separate framework.

Step 1: Create src/components/Layout.tsx:

import { html } from 'hono/html'

export const Layout = (props: { title: string; children?: any }) => html`
  <!DOCTYPE html>
  <html>
    <head>
      <title>${props.title}</title>
      <style>
        body { font-family: sans-serif; background: #f4f4f4; color: #333; }
        .container { max-width: 800px; margin: 2rem auto; padding: 1rem; background: white; border-radius: 8px; }
        header { border-bottom: 1px solid #ccc; padding-bottom: 1rem; }
        footer { margin-top: 2rem; text-align: center; font-size: 0.8rem; color: #777; }
      </style>
    </head>
    <body>
      <div class="container">
        <header>
          <h1>${props.title}</h1>
        </header>
        <main>
          ${props.children}
        </main>
        <footer>
          <p>Powered by Hono</p>
        </footer>
      </div>
    </body>
  </html>
`

Step 2: Create src/components/PostItem.tsx:

export const PostItem = (props: { post: { id: number; title: string; author: string } }) => (
  <article style="border-bottom: 1px solid #eee; padding: 1rem 0;">
    <h3><a href={`/posts/${props.post.id}`}>{props.post.title}</a></h3>
    <p><em>By {props.post.author}</em></p>
  </article>
)

Step 3: Update src/index.tsx:

import { Hono } from 'hono'
import { serve } from '@hono/node-server'
import { Layout } from './components/Layout'
import { PostItem } from './components/PostItem'

const app = new Hono()

// Mock data
const posts = [
  { id: 1, title: 'Getting Started with Hono', author: 'Alice' },
  { id: 2, title: 'Advanced Middleware Patterns', author: 'Bob' },
  { id: 3, title: 'Deploying Hono to the Edge', author: 'Charlie' },
]

app.get('/', (c) => {
  return c.html(
    <Layout title="My Hono Blog">
      <h2>Recent Posts</h2>
      {posts.length > 0
        ? posts.map(post => <PostItem post={post} />)
        : <p>No posts yet!</p>
      }
    </Layout>
  )
})

serve({ fetch: app.fetch, port: 3000 }, (info) => {
  console.log(`Server is running on http://localhost:${info.port}`)
})

Make sure to update the dev script in your package.json file to have src/index.tsx as the starting point.

"dev": "tsx watch src/index.tsx"

Step 4: Run npm run dev and visit http://localhost:3000. You will see a fully rendered blog page with the list of posts.

Deployment Guide for Hono

You have built your application, and now it's time to share it with the world. Here’s how you can deploy your Hono app to some of the most popular platforms.

How to Deploy to Node.js

For a traditional server environment, you can use the @hono/node-server adapter and a process manager like pm2 for production.

src/index.ts:

import { serve } from '@hono/node-server'
import app from './app' // Assuming your Hono app is in app.ts

serve({ fetch: app.fetch, port: 3000 })

You will then build your TypeScript to JavaScript and run pm2 start dist/index.js to run it in the background.

How to Deploy to Cloudflare Workers

Hono's true power lies in its portability. The create hono command can set up a project specifically for Cloudflare Workers.

Run the following command and select the cloudflare-workers template:

npm create hono@latest my-app-hono-cloudflare-worker

create-hono version 0.19.2
✔ Using target directory … my-app-hono-cloudflare-worker
? Which template do you want to use?
  aws-lambda
  bun
❯ cloudflare-workers
  cloudflare-workers+vite
  deno
  fastly
  lambda-edge

The setup process is identical to the Node.js example, but the project structure is optimized for Cloudflare.

Once the project is set up, you only need to type one command to deploy your application to Cloudflare:

wrangler deploy

This command will prompt you to log in to your Cloudflare account and will handle the entire deployment process automatically.

Conclusion

You've made it! We’ve covered a lot in this guide. You started with a professional project setup and moved all the way through advanced routing, context management, complex middleware patterns, robust data validation, and full-stack JSX components.

You now have the knowledge and the tools to build serious, production-ready applications with Hono. Its simple API doesn't limit its power. Rather, it enhances it by getting out of your way and letting you focus on building great features. And with its helpful portability, you can be confident that the application you build today can be deployed to the platforms of tomorrow.

The web development ecosystem will continue to evolve, but by building on Web Standards, Hono is a framework that's built to last.

To continue your journey, I highly recommend exploring the official Hono documentation, which is full of even more examples and guides.

Then, in 2015, a promise-based API request, the Fetch API, was built into JavaScript ES6 to ease the process. After that, libraries like Axios and Alova also appeared.

But why would anyone consider using a third-party API when the lightweight inbuilt Fetch API is an effective option? Well, Axios and Alova provide more than just fetching simple JSON responses. While Axios automates the parsing of JSON and provides shorthand methods for requests, Alova caches responses which prevents making new requests that are redundant.

So which should you stick to – Fetch API, Axios, or Alova?

In this guide, we’ll examine each of these tools based on their features, performance, and project suitability. Walk with me…

Table of Contents

1. Prerequisites

2. The Fetch API

   • Key Features of the Fetch API

   • Limitations of the Fetch API

3. Axios

   • Key Features of Axios

   • Limitations of Axios

4. Alova

   • Key Features of Alova

   • Limitations of Alova

5. Feature-by-Feature Comparison

6. Use Cases and Best Scenarios

   • When to Use Fetch API

   • When to Use Axios

   • When to Use Alova

7. Community and Ecosystem

   • Ecosystem and Integrations

8. Conclusion

Prerequisites

Before you start this tutorial, you should have a basic understanding of JavaScript and ES6+ features, such as async/await, arrow functions, and object destructuring. Being familiar with the fetch() API will also be helpful, as we’ll compare it with Axios and Alova.

You should also have a fundamental knowledge of HTTP methods (GET, POST, PUT, DELETE, PATCH) and handling API responses based on status codes to better understand the API examples.

While this tutorial focuses on JavaScript, some examples use React. So you should be familiar with React and understand the basics of components, state, and hooks (like useState and useEffect). Alova also works with frameworks like Vue and Svelte.

Basic experience with package managers (NPM or Yarn) is useful for installing dependencies like Axios and Alova. And understanding Node.js and browser environments will help, as Alova works in both contexts.

Lastly, familiarity with state management and caching concepts will enhance your understanding of Alova’s features, as it integrates state management and caching directly into API requests.

The Fetch API

Fetch API is a promise-based API request feature in JavaScript that was released to replace the old callback-based XMLHttpRequest (XHP). Unlike the old tool, Fetch API is compatible with modern website features, including service workers and Cross-Origin Resource Sharing (CORS).

With this tool, calling API data is as simple as making a fetch() request on the API URL, as shown below:

fetch("https://fakestoreapi.com/products")

The fetch() returns the server’s promise which is fulfilled with a response object. Then, you pass in some optional arguments to configure the response as JSON or text, attach it to a variable, and use the data.

let products;

  fetch("https://fakestoreapi.com/products")

    .then((res) => res.json())

    .then((data) => {

      products = data

      console.log(products)

    })

    .catch((error) => console.error("Error fetching data:", error))

In the code above, the fetch() requests API data from the URL. The response res gets parsed as JSON res.json. Then, the resulting data is attached to the products variable and logged on the console.

Since Node.js v17.5, the Fetch API has been available natively, eliminating the reliance on external packages like node-fetch, got, or cross-fetch for handling HTTP requests. This native support in both browsers and Node.js removes the need for additional dependencies, reducing the overall bundle size of your application. With this built-in functionality, the Fetch API has become the go-to tool for making asynchronous API calls in JavaScript applications.

Key Features of the Fetch API

Promises-based syntax

As I mentioned earlier, the Fetch API uses a promise-based syntax that sends a promise from the server and executes it with a response object. While the .then chaining can be optimal for simple requests, using several .thens can lead to callback hell and give you a hard time tracking errors. This is why the async/await alternative is a more optimal solution. Check out the code example below:

const fetchData = async () => {

      try {

        const response = await fetch("https://fakestoreapi.com/products");

        if (!response.ok) {

          throw new Error(`HTTP error! Status: ${response.status}`);

        }

        const data = await response.json();

        products = data

        console.log(products); //

      } catch (error) {

        console.error("Error fetching data:", error);

      }

    };

    fetchData();

As shown above, the fetch makes a get request. Then, the server returns an error status if the response is not ok (returns an error status like error 404). Then, the response gets parsed as JSON and used.

Keep in mind that all methods passed on the response are asynchronous, including the fetch() and the json() parsing.

Supports the GET, POST, PUT, PATCH and DELETE methods

GET, used to receive responses, is the Fetch API’s default method. So when you’re using it, you don’t have to define it explicitly or attach a body. But for methods that send requests like POST, PUT, PATCH and DELETE, you must specify their method and attach a body.

All these methods send requests to the backend. You can send data to the server with POST, completely replace an existing resource with new data using PUT, partially update with PATCH, or remove the resource with DELETE.

1. Here’s how you can define a method:

In the code below, I set the POST method to send data to the specified API:

const response = await fetch("https://example.com/products1", {

          method: "POST"

          //...

        });

Apart from posting data, you can also clear data on the server using DELETE:

const response = await fetch("https://example.com/products1", {

      method: "DELETE"

      //...

    });

2. Then, define the header:

Defining the header lets the server understand the type of content you are sending for proper data handling. As shown here, the header asks the server to store the content as a JSON file and set the authorization token to my-classified-token. Keep in mind that the token is the API key that will be used to verify user identity upon use.

const response = await fetch("https://example.com/products1", {

          method: "POST",

          header: {

            "Content-Type": "application-json",

            "Authorization": "Bearer my-classified-token",

          }

          //..

        });

Here is a full list of parameters that can be passed into the header:

3. Next, attach the body:

After specifying the header, you then attach the body. The body is the data being sent to the backend server. It cannot be used with the GET method which only fetches responses. Besides, the information attached should always be in a valid format that matches the content type specified in the headers. You can add as much value as you require to the body.

const response = await fetch("https://example.com/products1", {

          method: "POST",

          header: {

            "Content-Type": "application-json",

            "Authorization": "Bearer my-classified-token",

          },

          body: JSON.stringify({ name: "Laptop", price: 1200 })

        });

Streaming Data

It is also worth noting that the Fetch API facilitates large data handling via streaming. It receives copious data in chunks instead of loading the whole data and buffering in the process. So it data displays real-time as they arrive. Here is a simple example of streaming:

 const fetchData = async () => {

const response = await fetch('https://www.example.com/large-text-file.txt');

      const reader = response.body.getReader();

      const decoder = new TextDecoder();

      while (true) {

        const { done, value } = await reader.read();

        if (done) break;

        const chunk = decoder.decode(value, { stream: true });

        console.log(chunk); // Process the chunk (e.g., display it in UI)

      }

      console.log('Stream complete');

    }

    fetchData();

Fetching Documents with the DOM Parser

Unlike its predecessor, XHP, which can directly return a document, Fetch API can’t achieve the same results without using the DOM Parser. To use it, you have to set the response type to text, then convert to a document using the DOMParser. Here is an example:

fetch("example.xml")

  .then(res => res.text()) // Get raw text

  .then(data => {

    const parser = new DOMParser();

    const doc = parser.parseFromString(data, "text/xml"); // Convert text to Document

    console.log(doc); // Now it's a Document object

  })

  .catch(console.error);

Request Cancellation with AbortController

Previously, the Fetch API couldn’t abort requests. But it is now possible with AbortController and AbortSignal. But the AbortController API is not native either, which means there is extra bundle and set up required.

Limitations of the Fetch API

Response Flexibility or No automatic JSON parsing

Depends on how you see it. Having to specify whether you want your response as JSON res.json() or text res.text() or blob res.blob() lets you set which response type you want from the get go. But it can also be a limitation since most API fetches are in JSON. This means that alternatives like Axios, which sets defaults as res.json(), helps write shorter and cleaner code, and is therefore often preferred by developers.

No built-in request/response interceptors

Unlike Axios, Fetch API does not have built-in methods that intercept and modify requests or responses. This limitation means you have to write boilerplate code to create a custom interceptor.

For instance, via interception, you can attach an Authorization token automatically before sending requests or asking all 401 errors to automatically reload when receiving responses. With the Fetch API, you have to wrap the fetch() in a function to do that, which means more lines of code.

Here is some code built to mimic request/ response interception:

const customFetch = async (url, options = {}) => {

      // Request Interception

      const modifiedOptions = {

          ...options,

          headers: {

              'Content-Type': 'application/json',

              Authorization: Bearer ${localStorage.getItem("token")}, // Interceptor behavior

              ...options.headers

          }

      };



      try {

          const response = await fetch(url, modifiedOptions);



          // Response Interception

          if (!response.ok) {

              console.error("Intercepted Error:", response.status);

          }



          return await response.json();

      } catch (error) {

          console.error("Fetch error intercepted:", error);

          throw error;

      }

  };

  // Usage (No need to set headers manually)

  customFetch('https://api.example.com/data')

      .then(data => console.log(data))

      .catch(error => console.error(error));

Error handling requires additional logic

The Fetch API only rejects network errors, not failed HTTP status codes like 404 or 501. This means that when a fetching request fails, it does not return a 404 Not Found or 500 Internal Server Error unless you configure that with additional code. But Axios does.

fetch('https://jsonplaceholder.typicode.com/invalid-url')

  .then(response => {

    if (!response.ok) { // Manually handle non-2xx responses

      throw new Error(`HTTP Error! Status: ${response.status}`);

    }

    return response.json();

  })

  .then(data => console.log(data))

  .catch(error => console.log('Error:', error.message));

Axios

After XHP was replaced with the Fetch API, Axios emerged in 2016 to address some issues with the new JavaScript-native fetching tool. Built on top of XHP, Axios quickly gained widespread adoption due to combining many Fetch API promise-based features with some methods on the legacy XMLHttpRequest. In no time, it became a popular choice amongst developers.

Axios stands out because it:

• Automates JSON parsing

• Has a built-in method to intercept and modify requests and responses

• Automates error handling

• Automates timeout handling

• Can track upload and download progress

And many more features.

In particular, Axios is widely loved because it reduces boilerplate code. Since most API requests encode data with JSON, Axios sets its default parsing to accordingly, which means you don’t have to define JSON again. And why worry anyway, since developers use far fewer res.text() and res.blob() API responses in comparison.

const fetchData = async () => {

    const response = await axios.get('https://api.example.com/data');

    console.log(response.data); // JSON is already parsed

  };

Now, compare that to a like-for-like fetching with Fetch API:

const fetchData = async () => {

    const response = await fetch('https://api.example.com/data');

    const data = await response.json(); // Extra step

    console.log(data);

  };

Yeah, there’s an extra line, right? That could mean several lines of code for larger codebases.

Key Features of Axios

Automatic JSON Parsing

As explained above, you don’t have to call res.json() again while using Axios, since the method is automatically set. But what happens, in rare cases, when you want to fetch a blob or text using Axios? Then, you have to set the response type accordingly. Here’s how you can do that:

const fetchData = async () => {
    const response = await axios.get('https://api.example.com/data', {
      responseType: 'text', // Treats response as plain text
    });

    console.log(response.data); // Plain text string
  };

Built-in Interceptors to Modify Requests and Responses

Axios comes with its built-in interceptors to intercept and modify API responses or requests. Interceptors can help set authorization tokens for requests or modify global responses and errors before they render. Use the .interceptors.request.use() for requests and .interceptors.response.use() for responses.

import axios from "axios";

  const apiClient = axios.create({

      baseURL: "https://api.example.com",

      headers: {

          'Content-Type': 'application/json'

      }

  });



  // Request Interceptor: Attach Authorization headers

  apiClient.interceptors.request.use(config => {

      config.headers.Authorization = Bearer ${localStorage.getItem("token")};

      return config;

  }, error => Promise.reject(error));

  // Usage: Axios automatically includes the Authorization header

  apiClient.get("/data")

      .then(response => console.log(response.data))

      .catch(error => console.error(error));

To achieve that with Fetch API, you will have to write an interceptor wrapper on your API, which needs far more boilerplate code.

Request cancellation with CancelToken

Although now deprecated, Axios used to have its native request cancellation method known as CancelToken. But now, the AbortController API is regarded as a globally-recognized and reliable method for request abortion.

Error Handling

Axios handles errors better by automatically rejecting all non-2xx status codes like Error 404 and 501. You do not need to check any response.ok message:

axios.get('https://jsonplaceholder.typicode.com/invalid-url')

  .then(response => console.log(response.data))

  .catch(error => {

    console.log('Error Status:', error.response?.status); // Axios auto-rejects non-2xx responses

    console.log('Error Message:', error.message);

  });

Built-in Progress Tracking

Axios incorporates XHP methods like onDownloadProgress and onUploadProgress. This inbuilt feature facilitates tracking download and uploads progress. Whereas with the Fetch API, you’d need ReadableStream to achieve similar results.

Here is an example showing how you can use onUploadProgress:

axios.post(url, data, {

    onUploadProgress: progressEvent => console.log(progressEvent.loaded)

  });

Supports Other Methods, too

Just like the Fetch API, Axios’ default Method is GET. But you can use the POST, PUT, PATCH or DELETE methods using axios.request(). Here’s how:

import axios from "axios";

  axios.request({

      method: "POST",

      url: "https://api.example.com/users",

      body: { name: "Abdullah", age: 25 }, // Request body

      headers: {

          "Authorization": Bearer ${localStorage.getItem("token")},

          "Content-Type": "application/json"

      }

  })

  .then(response => console.log(response.data))

  .catch(error => console.error("Axios Request Error:", error));

Axios also provides a shorthand with methods like axios.get, axios.post, axios.put, axios.patch, and axios.delete, as shown below:

// POST Request

axios.post("https://api.example.com/users",

  { name: "Abdullah", age: 25 }, // Request body

  { headers: { "Content-Type": "application/json" } }

)

.then(response => console.log(response.data))

.catch(error => console.error("Axios POST Error:", error));

// PUT Request

axios.put("https://api.example.com/users/123",

  { name: "Updated Name" }, // Updated data

  { headers: { "Authorization": Bearer ${localStorage.getItem("token")} } }

)

.then(response => console.log(response.data))

.catch(error => console.error("Axios PUT Error:", error));

// DELETE Request

axios.delete("https://api.example.com/users/123", {

  headers: { "Authorization": Bearer ${localStorage.getItem("token")} }

})

.then(response => console.log("User deleted successfully"))

.catch(error => console.error("Axios DELETE Error:", error));

Limitations of Axios

Slightly larger bundle size

Axios adds 35 kb of extra bundle, while FetchAPI adds 0. While Axios clearly offers more features than Fetch in every other metric, you have to make do with the larger bundle size. And in an age where lightweight and fast applications are often preferred, you might not want that load.

Dependency on third-party maintenance

Depending on a third-party option for something as crucial as API might not be desirable. So a native tool like the Fetch API, built within JavaScript, offers more reliability.

Alova

Alova is a request management library that combines simple API fetching with other functionalities like state management, hooks, and caching, amongst many others.

While we use react-query and SWR to process Axios-fetched data, Alova saves you those extra installations and coding by providing these methods natively. The all-in-one alternative not only fetches responses and sends requests, but also merges requests, caches responses, and optimizes them for UI frameworks.

Built in 2022, Alova’s adoption is still early but nonetheless seems promising. It is supported on browsers, Node.js, and most frameworks, including Vue, React, Svelte, and vanilla JavaScript. But it has limited usage for Angular.js.

At just 10kb, it is about 3 times smaller than Axios, making it a more lightweight alternative for building fast applications.

You can also use Alova to either replace react-query to facilitate Axios or be the one-stop-shop for everything API integration-related.

Here is a simple Alova fetch:

const response = await alovaInstance.Get('https://jsonplaceholder.typicode.com').send();

console.log(response); // Response data

When you are fetching Alova on React components, you can use the createAlova() to set parameters and useRequest() to manage state.

import React from "react";

import { createAlova, useRequest } from "alova";

import GlobalFetch from "alova/GlobalFetch";

// Initialize Alova

const alovaInstance = createAlova({

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

// GET request with useRequest

const Profile = () => {

  const { data, loading, error } = useRequest(() => alovaInstance.Get("https://jsonplaceholder.typicode.com"));

  if (loading) return <p>Loading...</p>;

  if (error) return <p>Error fetching profile</p>;

  return <div>Username: {data.username}</div>;

};

export default Profile;

Key Features of Alova

One-Stop Shop

For some functionalities that come built into Alova, Fetch API or Axios might need additional libraries like react-query or SWR to fulfill.

Request Sharing Prevents Redundant Requests

Alova fuses identical requests. Let’s say several components ask for the same data from the API. The Fetch API and Axios send multiple identical requests to the server which creates traffic. But Alova merges them, sends a single request, and shares its response across all components, which reduces network traffic.

State Management

With tools like Fetch API and Axios, you have to manage data, loading, and error states manually. Alova lets you do that on the go within a single line of code. Here is how it looks:

//...

const { data, loading, error } = useRequest(alova.Get("/posts/1"));

//...

Advanced Request Management

Alova offers several request management functionalities with each tailored to specific use cases. With its request management, you can request preload for data to be used later, cache data to prevent reload, manage form submission, handle pagination, and automate refetching when needed. Check out their docs to read more.

Multi-Level Caching

You can also use Alova to cache data, especially when the response isn’t constantly changing and does not need refetching. Unlike react-query that simply stores caches in RAM, Alova offers a more flexible framework.

Its three-pronged caching modes include the memory mode, cache occupying mode, and recovery mode. While memory mode stores data in the RAM, recovery mode persistently stores it in a Local Storage and is made available for longer periods and even offline. Meanwhile, the occupying mode prevents duplicate or redundant requests coming in quick succession.

Independent on any component, cached data can be accessed anywhere in the app if the request URL and parameters match. These features lower traffic going to servers, reduce buffering, and help facilitating a swifter and better user experience.

//...

// Initialize Alova instance

const alovaInstance = createAlova({

  baseURL: "https://jsonplaceholder.typicode.com",

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

// Define GET request

const getPosts = alovaInstance.Get("/posts", {

  cache: {

    mode: "memory", // Caches in memory

    expires: 1000 * 60 * 5, // Expires in 5 minutes

  },

});

const PostList = () => {

  const { data, loading, error } = useRequest(getPosts);

  if (loading) return <p>Loading...</p>;

  if (error) return <p>Error fetching data</p>;

  //...

};

In the example above, Alova caches the response using the memory mode cache: {mode: "memory"} and sets the cache expiration to 5 minutes expires: 1000 * 60 * 5. You can change “memory” to “recovery” if you want a longer storage duration.

Usage Flexibility

You can use Alova with either Axios or the Fetch API. Here is an example where I fetched data using Axios and complemented it with Alova state management.

//...

// Initialize Alova

const alovaInstance = createAlova({

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

// Manage state with Alova

const { data: posts, setData } = useSnapshot([]);

const fetchPosts = async () => {

  const response = await axios.get("https://jsonplaceholder.typicode.com/posts");

  setData(response.data); // Store data in Alova state

};

//...

Supports Other Methods

Alova also makes GET its default option while supporting other methods like POST, PATCH, PUT and DELETE. Here is how to use POST in Alova, for example:

import React, { useState } from "react";

import { createAlova, useRequest } from "alova";

import GlobalFetch from "alova/GlobalFetch";

const alovaInstance = createAlova({

  baseURL: "https://jsonplaceholder.typicode.com",

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

const PostForm = () => {

  const [title, setTitle] = useState("");

  const { send: createPost } = useRequest(alovaInstance.Post("/posts", { title }), { immediate: false });

  createPost().then(console.log)

};

export default PostForm;

Of course, it has shorthand methods too:

import React, { useState } from "react";

import { createAlova, useRequest } from "alova";

import GlobalFetch from "alova/GlobalFetch";

const alova = createAlova({

  baseURL: "https://jsonplaceholder.typicode.com",

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

const { send: createPost } = useRequest(alova.Post("/posts", { title: "New Post" }), { immediate: false });

const { send: updatePost } = useRequest(alova.Put("/posts/1", { title: "Updated Post" }), { immediate: false });

const { send: patchPost } = useRequest(alova.Patch("/posts/1", { title: "Patched Post" }), { immediate: false });

createPost().then(console.log);

updatePost().then(console.log);

patchPost().then(console.log);

Bundle Size

Alova is three times smaller than Axios, but that does not even tell the full story. With Axios and the Fetch API, you need different libraries to handle caching, request deduplication, and retries. But Alova has everything in-built. So using Axios and Fetch API in real code production will always require more bundles than Axios. And overall, Alova facilitates lighter-weight applications compared to Axios and sometimes the Fetch API as well.

Limitations of Alova

Adoption Is Still Low

While writing this article, I had a hard time getting enough resources on Alova. And that is because it only debuted in July 2022 which means adoption is still early. So, troubleshooting Alova might be problematic since there are fewer Alova-themed API communities, as well as fewer StackOverflow answers, Youtube Tutorials, or GitHub contributions.

Potential Stability & Long-Term Maintenance Risks

Newer libraries have a higher risk of abandonment. Axios has been around for years, while Alova is still growing. Besides, it has fewer production use cases and battle-tested applications compared to Axios and Fetch.

Learning Curve

Alova’s learning curve can take some getting used to because it handles API requests differently from tools like Axios or the Fetch API.

Instead of making requests directly, you work with request instances and manage state within Alova’s system. This requires learning new ways to structure API calls and use features like caching and request merging. While it may feel unfamiliar at first, it can help reduce redundant API calls and improve performance once you understand it.

Fewer Third Party Integrations

Alova has fewer third-party libraries built specifically for it, requiring more manual work for compatibility with existing tools.

Feature-by-Feature Comparison

Use Cases and Best Scenarios

Choosing the right HTTP client for your project depends on several factors, including project complexity, dependencies, and performance considerations. Let’s explore when it’s best to use the Fetch API, Axios, or Alova.

When to Use Fetch API

1. Suitable for Lightweight Projects and Simple Requests

The Fetch API is built into modern browsers and is ideal for handling basic HTTP requests without adding dependencies. If your project requires only simple GET, POST, or DELETE requests with minimal configurations, Fetch API is a great choice.

2. When Working in Environments Where Third-Party Libraries Are Restricted

Certain enterprise or security-sensitive applications may restrict the use of external libraries. Since the Fetch API is built into the browser, it remains a viable option when third-party packages like Axios or Alova are not allowed.

3. When Minimal Dependencies Are Preferred

Since Fetch API is native to JavaScript, it does not require installing extra libraries, making it perfect for projects that need to keep dependencies low. This can be particularly beneficial for small lightweight apps or static websites.

When to Use Axios

1. Ideal for Backend-Heavy Applications or Complex APIs

For projects that require multiple API calls, error handling, and efficient request management, Axios is a solid choice. It allows concurrent requests, request cancellation, and improved control over HTTP headers.

2. When Automatic JSON Handling, Interceptors, and Robust Error Handling Are Needed

Axios simplifies working with JSON data by automatically parsing responses. It also provides built-in interceptors for request and response transformations, as well as superior error handling compared to Fetch API.

3. Useful When Working with Node.js in Full-Stack Applications

Axios works both in the browser and in Node.js, making it an excellent choice for full-stack applications where a unified API client is needed across the frontend and backend.

When to Use Alova

1. When Working with Frontend-Heavy Applications (React, Vue, Svelte)

Alova integrates well with frontend frameworks and state management tools, making it a great choice for single-page applications (SPAs) that depend on smooth data fetching, pagination, and updates.

2. Best for Projects Requiring Optimized Caching and Data Synchronization

Alova is designed for performance optimization and better caching strategies. It is suitable for applications that rely on real-time data synchronization and need to minimize redundant network requests.

3. When Performance Optimization and Reduced Network Load Are Priorities

With its intelligent caching mechanisms, Alova can significantly reduce API call frequency, thereby improving the overall performance of the application. It is especially useful in scenarios where network efficiency is crucial, such as mobile applications or progressive web apps (PWAs).

Community and Ecosystem

The community and ecosystem surrounding an HTTP client can impact ease of use, available learning resources, and integration with other tools. Let's explore how the Fetch API, Axios, and Alova are perceived in 2025.

Ecosystem and Integrations

While Fetch API is widely supported, developers often supplement it with additional libraries for improved caching, timeouts, and request queuing. This can lead to increased development effort compared to using an out-of-the-box solution like Axios or Alova.

Meanwhile, Axios benefits from a well-established ecosystem with a variety of plugins and extensions, making it easy to integrate with different backend architectures, authentication systems, and request monitoring tools.

Alova is designed to work seamlessly with modern state management libraries such as React Query and Vue Query. These integrations make it an attractive choice for developers focused on optimizing frontend data fetching strategies.

Conclusion

Choosing between the Fetch API, Axios, and Alova depends on your project’s needs and priorities. The Fetch API is best for lightweight applications that require minimal dependencies, while Axios is a robust choice for full-stack applications and backend-heavy environments. Alova, on the other hand, is an excellent option for optimizing data fetching and caching in frontend-focused applications.

As developers explore new ways to enhance performance and reduce network load, Alova's adoption is expected to grow, particularly in SPAs and PWAs. But Axios remains a reliable and widely adopted solution, while the Fetch API continues to be the fundamental building block for HTTP requests in JavaScript.