Axios Params vs Data: What Is the Difference?

When making HTTP requests using Axios, configuring how you send information to the server is crucial for API communication. Two of the most common configuration options are params and data. While both are used to pass information to an endpoint, they function in completely different ways, attach data to different parts of the HTTP request, and are intended for distinct HTTP methods. This guide outlines the core differences, use cases, and syntax for both options.

What is params in Axios?

The params property is used to send URL query parameters. When you specify params, Axios serializes the key-value pairs and appends them to the end of the request URL following a question mark (?).

Key Characteristics of params:

• Location: Appended directly to the URL string (e.g., /users?role=admin&page=2).
• HTTP Methods: Primarily used with GET, DELETE, and HEAD requests where a request body is typically not sent.
• Data Types: Plain objects or URLSearchParams instances.
• Visibility: Fully visible in the browser address bar, server access logs, and network history.
• Limitations: Size is limited by maximum URL length constraints enforced by browsers and servers. Sensitive data (like passwords or tokens) should never be passed via params.

Example Using params:

axios.get('/api/products', {
  params: {
    category: 'electronics',
    sort: 'price_asc'
  }
});
// Resulting Request: GET /api/products?category=electronics&sort=price_asc

What is data in Axios?

The data property is used to send a request body payload. Instead of modifying the URL, Axios packages this information inside the body of the HTTP request.

Key Characteristics of data:

• Location: Transmitted inside the HTTP message body.
• HTTP Methods: Primarily used with POST, PUT, PATCH, and occasionally DELETE.
• Data Types: Objects (automatically serialized to JSON by default), strings, FormData, Blob, ArrayBuffer, or Stream.
• Visibility: Not visible in the URL; can only be inspected via network payloads.
• Payload Size: Can handle large datasets, file uploads, and complex nested JSON structures.

Example Using data:

axios.post('/api/products', {
  name: 'Wireless Headphones',
  price: 99.99,
  inStock: true
});
// Resulting Request: POST /api/products
// Request Body: {"name":"Wireless Headphones","price":99.99,"inStock":true}

Summary of Differences

Choosing the Right Option

• Use params when you need to filter, paginate, sort, or query resources without altering server state.
• Use data when you need to create, update, or send structured resources, sensitive credentials, or file uploads to the server.