How to Pass Params in Axios GET Request (2026)

How to Pass Params in Axios GET Request (2026)

Axios is the most popular HTTP client for JavaScript, used in both browser and Node.js environments. One of the most common tasks when working with REST APIs is sending query parameters with GET requests.

This guide covers every method for passing parameters in Axios GET requests, from basic usage to advanced patterns like array serialization, custom serializers, and interceptors.

Basic Params with the `params` Object

The cleanest way to pass query parameters is through the params config option:

import axios from 'axios';

const response = await axios.get('https://api.example.com/users', {
  params: {
    page: 1,
    limit: 20,
    sort: 'created_at'
  }
});

// Resulting URL: https://api.example.com/users?page=1&limit=20&sort=created_at

Axios automatically serializes the params object into a query string and appends it to the URL. You do not need to manually construct the URL.

Method Comparison

Here are all the ways to pass parameters in Axios GET requests:

Method	Example	Best For
params object	axios.get(url, { params: {...} })	Most use cases
URL string	axios.get(url + '?key=value')	Simple, static params
Template literals	axios.get(`${url}?key=${value}`)	Quick one-offs
URLSearchParams	axios.get(url, { params: new URLSearchParams(...) })	Form-encoded data
paramsSerializer	Custom function	Complex serialization

Passing Different Data Types

Strings and Numbers

Simple values are serialized directly:

const response = await axios.get('/api/products', {
  params: {
    category: 'electronics',
    minPrice: 100,
    maxPrice: 500,
    inStock: true
  }
});

// URL: /api/products?category=electronics&minPrice=100&maxPrice=500&inStock=true

Arrays

By default, Axios serializes arrays using bracket notation:

const response = await axios.get('/api/products', {
  params: {
    ids: [1, 2, 3, 4, 5]
  }
});

// Default URL: /api/products?ids[]=1&ids[]=2&ids[]=3&ids[]=4&ids[]=5

Different APIs expect different array formats. Use paramsSerializer to customize:

import qs from 'qs';

// Comma-separated: ?ids=1,2,3,4,5
const response = await axios.get('/api/products', {
  params: { ids: [1, 2, 3, 4, 5] },
  paramsSerializer: (params) => {
    return qs.stringify(params, { arrayFormat: 'comma' });
  }
});

// Repeated keys: ?ids=1&ids=2&ids=3&ids=4&ids=5
const response2 = await axios.get('/api/products', {
  params: { ids: [1, 2, 3, 4, 5] },
  paramsSerializer: (params) => {
    return qs.stringify(params, { arrayFormat: 'repeat' });
  }
});

// Bracket notation: ?ids[0]=1&ids[1]=2&ids[2]=3
const response3 = await axios.get('/api/products', {
  params: { ids: [1, 2, 3, 4, 5] },
  paramsSerializer: (params) => {
    return qs.stringify(params, { arrayFormat: 'indices' });
  }
});

Nested Objects

For APIs that accept nested parameters:

import qs from 'qs';

const response = await axios.get('/api/search', {
  params: {
    filter: {
      status: 'active',
      role: 'admin'
    },
    pagination: {
      page: 1,
      perPage: 25
    }
  },
  paramsSerializer: (params) => {
    return qs.stringify(params, { encode: false });
  }
});

// URL: /api/search?filter[status]=active&filter[role]=admin&pagination[page]=1&pagination[perPage]=25

Null and Undefined Values

By default, Axios omits undefined values but includes null:

const response = await axios.get('/api/users', {
  params: {
    name: 'John',
    email: undefined,  // Omitted from URL
    phone: null         // Included as ?phone=
  }
});

// URL: /api/users?name=John&phone=

To skip both null and undefined:

const cleanParams = (params) => {
  return Object.fromEntries(
    Object.entries(params).filter(([_, v]) => v != null)
  );
};

const response = await axios.get('/api/users', {
  params: cleanParams({
    name: 'John',
    email: undefined,
    phone: null
  })
});

// URL: /api/users?name=John

Using URLSearchParams

The native URLSearchParams API works directly with Axios:

const params = new URLSearchParams();
params.append('search', 'laptop');
params.append('category', 'electronics');
params.append('category', 'computers'); // Duplicate keys supported

const response = await axios.get('/api/products', { params });

// URL: /api/products?search=laptop&category=electronics&category=computers

This is useful when you need to add parameters dynamically:

const params = new URLSearchParams();

// Build params conditionally
if (searchTerm) params.append('q', searchTerm);
if (category) params.append('category', category);
if (minPrice) params.append('min_price', minPrice);
if (maxPrice) params.append('max_price', maxPrice);

const response = await axios.get('/api/search', { params });

Setting Default Params with Interceptors

For parameters that should be included in every request (like API keys or locale), use request interceptors:

const apiClient = axios.create({
  baseURL: 'https://api.example.com'
});

apiClient.interceptors.request.use((config) => {
  config.params = {
    api_key: process.env.API_KEY,
    locale: 'en',
    ...config.params  // Merge with request-specific params
  };
  return config;
});

// Every request now includes api_key and locale
const response = await apiClient.get('/users', {
  params: { page: 1 }
});

// URL: https://api.example.com/users?api_key=xxx&locale=en&page=1

Setting Default Params on an Instance

You can also set default params when creating an Axios instance:

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  params: {
    api_key: process.env.API_KEY,
    format: 'json'
  }
});

// These defaults merge with per-request params
const response = await apiClient.get('/data', {
  params: { page: 2 }
});

// URL: https://api.example.com/data?api_key=xxx&format=json&page=2

TypeScript: Typed Params

For TypeScript projects, define an interface for your parameters:

interface UserSearchParams {
  q?: string;
  page: number;
  limit: number;
  role?: 'admin' | 'user' | 'moderator';
  active?: boolean;
}

async function searchUsers(params: UserSearchParams) {
  const response = await axios.get<{ users: User[]; total: number }>(
    '/api/users',
    { params }
  );
  return response.data;
}

// Type-safe parameter passing
const result = await searchUsers({
  q: 'john',
  page: 1,
  limit: 20,
  role: 'admin'
});

Encoding Special Characters

Axios encodes parameters automatically, but some APIs require specific encoding:

// Axios handles encoding automatically
const response = await axios.get('/api/search', {
  params: {
    q: 'hello world & goodbye',  // Encoded as hello%20world%20%26%20goodbye
    tag: 'c++'                     // Encoded as c%2B%2B
  }
});

// To prevent double encoding if params are already encoded:
const response2 = await axios.get('/api/search', {
  params: { q: 'pre-encoded%20value' },
  paramsSerializer: (params) => {
    return qs.stringify(params, { encode: false });
  }
});

Real-World Example: Paginated API Client

Here is a complete example combining multiple techniques:

import axios from 'axios';
import qs from 'qs';

const api = axios.create({
  baseURL: 'https://api.example.com/v2',
  timeout: 10000,
  paramsSerializer: (params) => {
    return qs.stringify(params, {
      arrayFormat: 'comma',
      skipNulls: true
    });
  }
});

// Add auth token to every request
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Paginated fetch with filters
async function fetchProducts(filters = {}) {
  const { data } = await api.get('/products', {
    params: {
      page: filters.page || 1,
      per_page: filters.perPage || 20,
      sort_by: filters.sortBy || 'created_at',
      order: filters.order || 'desc',
      categories: filters.categories,   // Array: serialized as comma-separated
      min_price: filters.minPrice,
      max_price: filters.maxPrice,
      search: filters.search
    }
  });

  return data;
}

// Usage
const products = await fetchProducts({
  page: 2,
  categories: ['electronics', 'gadgets'],
  minPrice: 50,
  sortBy: 'price'
});

// URL: /products?page=2&per_page=20&sort_by=price&order=desc&categories=electronics,gadgets&min_price=50

Common Mistakes to Avoid

Mistake	Problem	Fix
Putting params in data	GET requests ignore the data field	Use params not data
Manual URL construction	Breaks with special characters	Use the params object
Forgetting paramsSerializer	Default array format may not match API	Set serializer per-instance
Not handling empty values	Sends ?key= or ?key=undefined	Filter out nullish values
Double encoding	%2520 instead of %20	Use encode: false if pre-encoded

Wrapping Up

The params object in Axios handles the vast majority of GET request parameter needs. For more complex scenarios involving arrays, nested objects, or custom serialization, combine params with the qs library and paramsSerializer. Use interceptors and instance defaults to keep your code DRY when the same parameters need to accompany every request.

If you are building applications that call AI APIs for image generation, video creation, or voice synthesis, try Hypereal AI free -- 35 credits, no credit card required. Our REST API follows the same conventions covered in this guide, making integration straightforward with Axios or any HTTP client.