Learn Axios Requests & Responses Explained — Full Configuration Guide

Axios Requests & Responses Explained — Full Configuration Guide

DodaTech Updated Jun 6, 2026 16 min read

Axios gives you full control over every HTTP request — from custom headers and query parameters to timeouts, instances with shared defaults, request/response transforms, and cancellation — all through a single configuration object.

What You’ll Learn

By the end of this tutorial, you’ll understand every property of the Axios config object, set global and instance-level defaults, create reusable API clients with axios.create(), serialize query parameters, cancel in-flight requests, and transform data before sending or after receiving.

Prerequisites: This tutorial builds on our Axios Getting Started guide. You should know how to make GET and POST requests before diving into configuration.

Why Configuration Matters

Imagine you’re building an app that talks to a weather API. Every request needs the same base URL (https://api.weather.com/v2), the same API key header, and a 5-second timeout. Without configuration defaults, you’d repeat these values in every request — 50 times across your app. When the API key changes, you’d need to update it in 50 places.

Configuration lets you set these values once and reuse them everywhere. It’s like setting the default temperature on your oven — you can still change it for a specific dish, but most of the time the default saves you effort.

Real-world use: Durga Antivirus Pro uses Axios instances with shared configuration to communicate with multiple backend services — one instance for the threat database API, another for license verification, each with its own base URL, timeout, and authentication headers.

Where This Fits in Your Learning Path

    flowchart LR
    A["Axios Getting Started"] --> B["**Requests & Config**"]
    B --> C["Interceptors & Error Handling"]
    C --> D["Axios Advanced"]
    D --> E["Full-Stack API Apps"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style E fill:#22c55e,stroke:#16a34a,color:#22c55e

The Axios Config Object

Axios lets you pass a single configuration object to axios(config) instead of using the convenience methods like axios.get(). This gives you access to everything.

Think of the config object as a shipping label for your request. It tells Axios:

Where to send it (url, baseURL)
How to send it (method, headers)
What to include (params, data)
When to give up (timeout)
How to interpret the response (responseType)
How to modify it along the way (transformRequest, transformResponse)

const config = {
  // --- Where to send it ---
  url: '/users',
  method: 'get',
  baseURL: 'https://api.example.com',

  // --- What to include ---
  headers: {
    Authorization: 'Bearer token123',
    'X-Custom-Header': 'value',
  },
  params: { page: 1, limit: 10 },
  data: { name: 'Alice' },     // for POST/PUT/PATCH

  // --- Timing ---
  timeout: 5000,               // ms — 0 means no timeout

  // --- Response handling ---
  responseType: 'json',        // 'text', 'blob', 'arraybuffer', 'stream'

  // --- Authentication shortcut ---
  auth: { username: 'admin', password: 'secret' },

  // --- Modifiers ---
  transformRequest: [(data, headers) => { /* modify before send */ }],
  transformResponse: [(data) => { /* modify after receive */ }],

  // --- Cancel ---
  signal: null,                // AbortSignal

  // --- Progress ---
  onUploadProgress: (event) => {},
  onDownloadProgress: (event) => {},

  // --- Cross-origin ---
  withCredentials: false,

  // --- Status validation ---
  validateStatus: (status) => status >= 200 && status < 300,
}

const { data } = await axios(config)

You’ll rarely need all of these at once. The ones you’ll use most: url, method, baseURL, headers, params, data, timeout, signal.

Setting Defaults to Avoid Repetition

Defaults are a hierarchy. Axios merges them in this order (later overrides earlier):

Library defaults — built into Axios (like default method = get)
Global defaults — set on axios.defaults
Instance defaults — set on an instance created with axios.create()
Request-level config — passed to a specific request (highest priority)

Think of it like outfit layers. You start with underwear (library defaults), add a t-shirt (global), a jacket (instance), and finally a scarf (request-level). Each layer adds to or overrides what’s underneath.

Global Defaults

Set defaults on the main axios object. Every request you make will use them:

import axios from 'axios'

axios.defaults.baseURL = 'https://api.example.com'
axios.defaults.headers.common['Authorization'] = 'Bearer token123'
axios.defaults.timeout = 5000

Now every Axios request in your app uses these defaults:

// URL becomes https://api.example.com/users
const { data } = await axios.get('/users')

Why use global defaults? When your app talks to a single API server. Set the base URL once and use relative paths everywhere.

Instance Defaults (Recommended)

Create a separate Axios instance with its own defaults:

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' },
})

// All requests through `api` use these defaults
const users = await api.get('/users')
const user = await api.post('/users', { name: 'Bob' })

Why use instances? When your app talks to multiple APIs. Create one instance for the weather API, another for the user API:

const weatherApi = axios.create({ baseURL: 'https://api.weather.com/v2' })
const usersApi = axios.create({ baseURL: 'https://api.users.com/v1' })

Each instance is independent. Changes to one don’t affect the other.

Request-Level Config

Override any default for a single request:

const { data } = await api.get('/users', {
  timeout: 10000,           // override instance timeout
  headers: { 'X-Trace': 'abc-123' },  // extra header for this request
})

The request-level config is merged on top of the instance defaults. Headers are merged together, not replaced.

How Merging Works in Practice

axios.defaults.headers.common['Authorization'] = 'Bearer global'

const api = axios.create({
  baseURL: '/api',
  headers: { 'X-Instance': 'my-instance' },
})

// Final headers: Authorization + X-Instance + X-Trace-Id
const res = await api.get('/users', {
  headers: { 'X-Trace-Id': 'trace-001' },
})

The request ends up with all three headers. Axios merges deeply — it doesn’t replace the entire headers object.

Query Parameters and Serialization

Query parameters are the ?key=value part of a URL. They tell the server things like “page 2, 20 results per page, sorted by name.”

// The URL /users?page=2&limit=20&sort=name
const { data } = await axios.get('/users', {
  params: {
    page: 2,
    limit: 20,
    sort: 'name',
  },
})

Array Parameters

When you pass an array, Axios serializes it with duplicate keys:

const { data } = await axios.get('/search', {
  params: {
    q: 'javascript',
    tags: ['axios', 'http'],
  },
})
// URL: /search?q=javascript&tags=axios&tags=http

Custom Serialization with qs

Some backends expect a different format. For example, PHP expects tags[]=axios&tags[]=http. Use a custom serializer:

npm install qs

import qs from 'qs'

const { data } = await axios.get('/search', {
  params: {
    tags: ['axios', 'http'],
  },
  paramsSerializer: {
    serialize: (params) => qs.stringify(params, { indices: false }),
  },
})
// With indices: false → /search?tags=axios&tags=http
// Default behavior: /search?tags%5B%5D=axios&tags%5B%5D=http

Why does this matter? Different backends parse array parameters differently. The qs library lets you match your backend’s expected format exactly.

Request Cancellation

Sometimes you need to cancel a request. The user navigates away from a page before the data loads, or a search input changes faster than the API responds.

Since Axios v0.22+, cancellation uses the standard AbortController API — the same one used by the Fetch API.

Basic Cancellation

const controller = new AbortController()

// Start the request
axios.get('/slow-endpoint', {
  signal: controller.signal,
})

// Cancel it
controller.abort()
// The request promise rejects with a CanceledError

Cancellation with Timeout

// Auto-cancel after 3 seconds
const { data } = await axios.get('/data', {
  signal: AbortSignal.timeout(3000),
})

Cancelling Multiple Requests

Share one signal across several requests. Cancel them all at once:

const controller = new AbortController()

const requests = [
  axios.get('/api/users', { signal: controller.signal }),
  axios.get('/api/posts', { signal: controller.signal }),
  axios.get('/api/comments', { signal: controller.signal }),
]

// Cancel all if any one fails
Promise.all(requests).catch(() => controller.abort())

Why is this useful? In a dashboard that loads users, posts, and comments simultaneously — if the user navigates away, you cancel all three at once instead of wasting bandwidth.

Transform Functions

Transform functions let you modify data before the request is sent or after the response is received.

transformRequest

Runs before the request goes out. Use it to modify request data or headers:

const api = axios.create({
  transformRequest: [
    (data, headers) => {
      // Add a timestamp to every POST/PUT body
      if (data) {
        data._timestamp = Date.now()
      }
      return data
    },
    ...axios.defaults.transformRequest, // keep default JSON serialization
  ],
})

Important: Axios has a default transformRequest that serializes objects to JSON. If you add your own transform, you must include the default one (as shown above) or JSON serialization won’t happen.

transformResponse

Runs after the response arrives, before your await resolves. Use it to normalize data:

const api = axios.create({
  transformResponse: [
    ...axios.defaults.transformResponse,
    (data) => {
      // Convert snake_case API responses to camelCase
      if (typeof data === 'object' && data !== null) {
        return convertKeysToCamelCase(data)
      }
      return data
    },
  ],
})

Now every response from this instance has camelCase keys, even if the server sends snake_case.

Using the Config Object Directly

Instead of axios.get(url, config), you can pass everything as a single config object:

const { data } = await axios({
  method: 'post',
  url: '/users',
  baseURL: 'https://api.example.com',
  headers: { Authorization: 'Bearer token' },
  data: { name: 'Alice' },
  timeout: 3000,
})

This is equivalent to:

const { data } = await axios.post('/users', { name: 'Alice' }, {
  baseURL: 'https://api.example.com',
  headers: { Authorization: 'Bearer token' },
  timeout: 3000,
})

Use the config object form when you need to dynamically build the request method or have complex configuration.

Common Mistakes Beginners Make

1. Setting baseURL Without a Leading Slash on Paths

// Wrong: URL becomes /apiusers (missing slash)
axios.create({ baseURL: '/api' }).get('users')

// Correct: URL becomes /api/users
axios.create({ baseURL: '/api' }).get('/users')

When baseURL doesn’t end with / and the path doesn’t start with /, the two concatenate without a separator.

2. Mutating Config Objects Across Requests

const config = { headers: { Authorization: 'Bearer token' } }

// Wrong: mutates the shared config
config.headers['X-Trace'] = 'abc'
await axios.get('/users', config)

// Correct: use spread to create a new object each time
await axios.get('/users', {
  ...config,
  headers: { ...config.headers, 'X-Trace': 'abc' },
})

Mutating the shared object affects every request that uses it. This causes subtle, hard-to-find bugs.

3. Forgetting responseType for Binary Files

// Wrong: garbled text for binary data
const res = await axios.get('/file.pdf')

// Correct: tell Axios to expect binary data
const res = await axios.get('/file.pdf', { responseType: 'blob' })
const url = URL.createObjectURL(res.data)

Without responseType: 'blob', Axios treats the response as text. PDFs and images come out as gibberish.

4. Not Understanding Default Merge Order

axios.defaults.timeout = 3000
const api = axios.create({ timeout: 5000 })

// Wrong: thinks this request uses 3000
// Correct: request-level overrides both
api.get('/users', { timeout: 10000 }) // uses 10000

// Override hierarchy: instance (5000) > global (3000)
api.get('/users') // uses 5000

Remember: request > instance > global > library defaults.

5. Passing Body Data to GET Requests

// Wrong: GET requests don't have a body
axios.get('/users', { data: { name: 'Alice' } })

// Correct: use params instead
axios.get('/users', { params: { name: 'Alice' } })

GET requests send data via query parameters, not the request body. Sending a body with GET is technically allowed but most servers ignore it.

Practice Questions

What is the priority order when Axios merges defaults? Request-level config > instance defaults > global defaults > library defaults.
When should you use axios.create() instead of setting global defaults? When your app talks to multiple different APIs. Create separate instances with different base URLs and defaults.
What does the signal option do in an Axios config? It accepts an AbortSignal for cancelling the request. Pass controller.signal from an AbortController.
Why must you include ...axios.defaults.transformRequest when adding a custom transformRequest? Because Axios’s default transform serializes objects to JSON. Without it, your objects won’t be properly serialized before sending.
What happens if you don’t set responseType: 'blob' when downloading an image? Axios treats the response as text. The binary data gets corrupted into garbled string characters.

Challenge

Create an Axios instance for a task management API with:

Base URL: https://api.tasks.com/v1
Timeout: 8 seconds
Default headers: JSON content type, auth token from localStorage
A custom transformResponse that adds a computed isOverdue boolean to every task object
A function to cancel all in-flight requests when the user logs out

FAQ

What is the difference between `axios.create()` and `new axios()`?

There is no new axios(). axios.create() returns a new Axios instance with its own defaults. The default axios object is itself an instance.

Can I set default headers for only POST requests?

Yes. axios.defaults.headers.post['Content-Type'] = 'application/json' sets a default only for POST. Axios has similar shortcuts for common, get, post, put, patch, and delete.

How do I send FormData with Axios?

Pass a FormData object as the data. Axios detects it and sets Content-Type: multipart/form-data automatically. Do NOT set the Content-Type header manually — let Axios set it with the boundary parameter.

What does `validateStatus` do?

It’s a function that determines whether an HTTP status code resolves or rejects the promise. Return true to resolve, false to reject. Default: (status) => status >= 200 && status < 300.

How do I handle cookies cross-origin?

Set withCredentials: true in the config. The server must also include Access-Control-Allow-Credentials: true in its response headers.

Try It Yourself: Request Configurator

Here’s a full interactive tool that lets you configure every Axios option, preview the config object in real time, send the request, and see the response with history tracking.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Axios Request Configurator</title>
  <script src="https://cdn.jsdelivr.net/npm/axios@1.7.0/dist/axios.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; padding: 2rem; }
    .container { max-width: 1200px; margin: 0 auto; }
    h1 { font-size: 1.75rem; margin-bottom: 0.25rem; }
    .subtitle { color: #94a3b8; margin-bottom: 1.5rem; }
    .card { background: #1e293b; border-radius: 0.75rem; padding: 1.5rem; border: 1px solid #334155; margin-bottom: 1rem; }
    .card h2 { font-size: 1.05rem; margin-bottom: 0.75rem; color: #38bdf8; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .flex { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
    label { color: #94a3b8; font-size: 0.85rem; display: block; margin-bottom: 0.25rem; }
    input, textarea, select { background: #0f172a; color: #e2e8f0; border: 1px solid #334155; border-radius: 0.375rem; padding: 0.5rem 0.625rem; font-family: monospace; font-size: 0.875rem; width: 100%; }
    textarea { min-height: 70px; resize: vertical; }
    select { width: auto; }
    .btn { background: #38bdf8; color: #0f172a; border: none; padding: 0.5rem 1.25rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; font-size: 0.875rem; }
    .btn:hover { background: #7dd3fc; }
    .btn-outline { background: transparent; color: #38bdf8; border: 1px solid #38bdf8; }
    .btn-outline:hover { background: #38bdf8; color: #0f172a; }
    .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
    .output-box { background: #0f172a; border: 1px solid #334155; border-radius: 0.375rem; padding: 0.75rem; min-height: 60px; max-height: 250px; overflow: auto; font-family: monospace; font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; }
    .output-box.success { border-color: #22c55e; }
    .output-box.error { border-color: #ef4444; color: #fca5a5; }
    .stat { color: #94a3b8; font-size: 0.8rem; display: inline-block; margin-right: 1rem; }
    .stat strong { color: #38bdf8; }
    .history-item { background: #0f172a; border: 1px solid #334155; border-radius: 0.375rem; padding: 0.5rem 0.75rem; margin-bottom: 0.375rem; font-size: 0.8rem; cursor: pointer; }
    .history-item:hover { border-color: #38bdf8; }
    .tag { display: inline-block; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.65rem; font-weight: 700; }
    .tag.get { background: #22c55e; color: #0f172a; }
    .tag.post { background: #3b82f6; color: #fff; }
    .tag.put { background: #f59e0b; color: #0f172a; }
    .tag.delete { background: #ef4444; color: #fff; }
    .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    @media (max-width: 768px) { .grid-2, .row-2 { grid-template-columns: 1fr; } }
  </style>
</head>
<body>
<div class="container">
  <h1>Request Configurator</h1>
  <p class="subtitle">Configure every Axios option, preview, send, and track history</p>

  <div class="grid-2">
    <div class="card">
      <h2>Configuration</h2>
      <div class="row-2">
        <div>
          <label>Method</label>
          <select id="method">
            <option value="get">GET</option>
            <option value="post">POST</option>
            <option value="put">PUT</option>
            <option value="delete">DELETE</option>
            <option value="patch">PATCH</option>
          </select>
        </div>
        <div>
          <label>Timeout (ms)</label>
          <input type="number" id="timeout" value="5000" min="0" step="100" />
        </div>
      </div>
      <div style="margin-top:0.5rem;">
        <label>URL</label>
        <input type="text" id="url" value="https://jsonplaceholder.typicode.com/posts" />
      </div>
      <div style="margin-top:0.5rem;">
        <label>Base URL (optional — prepended if URL is relative)</label>
        <input type="text" id="baseURL" placeholder="https://api.example.com" />
      </div>
      <div style="margin-top:0.5rem;">
        <label>Headers (JSON)</label>
        <textarea id="headers" rows="3">{"Content-Type": "application/json"}</textarea>
      </div>
      <div style="margin-top:0.5rem;">
        <label>Query Params (JSON)</label>
        <textarea id="params" rows="2">{"_limit": 3}</textarea>
      </div>
      <div style="margin-top:0.5rem;">
        <label>Request Body (for POST/PUT/PATCH)</label>
        <textarea id="body" rows="4">{
  "title": "New Post",
  "body": "Content here",
  "userId": 1
}</textarea>
      </div>
      <div class="flex" style="margin-top:0.75rem;">
        <button class="btn" onclick="sendConfigured()">Send Request</button>
        <button class="btn btn-outline btn-sm" onclick="exportConfig()">Export Config</button>
        <button class="btn btn-outline btn-sm" onclick="loadConfig()">Import Config</button>
      </div>
    </div>

    <div>
      <div class="card">
        <h2>Response</h2>
        <div class="flex" style="margin-bottom:0.5rem;">
          <span class="stat">Status: <strong id="respStatus">--</strong></span>
          <span class="stat">Time: <strong id="respTime">--</strong></span>
          <span class="stat">Size: <strong id="respSize">--</strong></span>
        </div>
        <div class="output-box" id="responseOutput">Send a request to see the response</div>
      </div>

      <div class="card">
        <h2>Config Preview</h2>
        <div class="output-box" id="configPreview" style="max-height:150px;">Adjust config above</div>
      </div>
    </div>
  </div>

  <div class="card">
    <h2>Request History <span style="font-size:0.75rem;color:#94a3b8;font-weight:400;">(click to replay)</span></h2>
    <div id="historyContainer">
      <div style="color:#94a3b8;font-size:0.85rem;">No requests yet</div>
    </div>
  </div>
</div>

<script>
const history = [];

function getConfig() {
  const method = document.getElementById('method').value;
  const url = document.getElementById('url').value.trim();
  const baseURL = document.getElementById('baseURL').value.trim();
  const timeout = parseInt(document.getElementById('timeout').value) || 0;
  let headers = {};
  try { if (document.getElementById('headers').value.trim()) headers = JSON.parse(document.getElementById('headers').value); } catch {}
  let params = {};
  try { if (document.getElementById('params').value.trim()) params = JSON.parse(document.getElementById('params').value); } catch {}
  let data;
  const bodyVal = document.getElementById('body').value.trim();
  if (bodyVal && ['post', 'put', 'patch'].includes(method)) {
    try { data = JSON.parse(bodyVal); } catch {}
  }
  return { method, url, baseURL, timeout, headers, params, data };
}

function updateConfigPreview() {
  const config = getConfig();
  document.getElementById('configPreview').textContent = JSON.stringify(config, null, 2);
}

document.querySelectorAll('input, textarea, select').forEach(el => {
  el.addEventListener('input', updateConfigPreview);
  el.addEventListener('change', updateConfigPreview);
});

async function sendConfigured() {
  const config = getConfig();
  if (!config.url) { setResponse('Enter a URL', 'error'); return; }
  setResponse('Sending...', '');
  document.getElementById('respStatus').textContent = '...';
  document.getElementById('respTime').textContent = '...';
  document.getElementById('respSize').textContent = '...';
  const start = performance.now();
  try {
    const axiosConfig = {};
    if (config.method) axiosConfig.method = config.method;
    if (config.url) axiosConfig.url = config.url;
    if (config.baseURL) axiosConfig.baseURL = config.baseURL;
    if (config.timeout) axiosConfig.timeout = config.timeout;
    if (Object.keys(config.headers).length) axiosConfig.headers = config.headers;
    if (Object.keys(config.params).length) axiosConfig.params = config.params;
    if (config.data !== undefined) axiosConfig.data = config.data;
    axiosConfig.validateStatus = () => true;
    const res = await axios(axiosConfig);
    const time = (performance.now() - start).toFixed(1);
    const body = JSON.stringify(res.data, null, 2);
    document.getElementById('respStatus').textContent = res.status;
    document.getElementById('respTime').textContent = time + ' ms';
    document.getElementById('respSize').textContent = body.length + ' B';
    setResponse(body, res.status >= 200 && res.status < 300 ? 'success' : 'error');
    history.unshift({ config, status: res.status, time, timestamp: new Date().toLocaleTimeString() });
    renderHistory();
  } catch (err) {
    document.getElementById('respStatus').textContent = 'Error';
    document.getElementById('respTime').textContent = '--';
    document.getElementById('respSize').textContent = '--';
    setResponse(err.message, 'error');
  }
}

function setResponse(text, cls) {
  document.getElementById('responseOutput').textContent = text;
  document.getElementById('responseOutput').className = 'output-box ' + cls;
}

function renderHistory() {
  const container = document.getElementById('historyContainer');
  if (history.length === 0) {
    container.innerHTML = '<div style="color:#94a3b8;font-size:0.85rem;">No requests yet</div>';
    return;
  }
  container.innerHTML = history.slice(0, 10).map((h, i) => `
    <div class="history-item" onclick="replayHistory(${i})">
      <span class="tag ${h.config.method}">${h.config.method.toUpperCase()}</span>
      <strong>${h.config.url}</strong>
      <span style="color:#94a3b8;margin-left:0.5rem;">${h.status}</span>
      <span style="color:#94a3b8;">${h.time} ms</span>
      <span style="color:#475569;float:right;">${h.timestamp}</span>
    </div>
  `).join('');
}

function replayHistory(index) {
  const h = history[index];
  if (!h) return;
  document.getElementById('method').value = h.config.method;
  document.getElementById('url').value = h.config.url;
  document.getElementById('baseURL').value = h.config.baseURL || '';
  document.getElementById('timeout').value = h.config.timeout || 5000;
  document.getElementById('headers').value = JSON.stringify(h.config.headers, null, 2);
  document.getElementById('params').value = JSON.stringify(h.config.params, null, 2);
  document.getElementById('body').value = h.config.data ? JSON.stringify(h.config.data, null, 2) : '';
  updateConfigPreview();
}

function exportConfig() {
  const config = getConfig();
  const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'axios-config.json';
  a.click();
  URL.revokeObjectURL(url);
}

function loadConfig() {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = '.json';
  input.onchange = async (e) => {
    const text = await e.target.files[0].text();
    try {
      const config = JSON.parse(text);
      document.getElementById('method').value = config.method || 'get';
      document.getElementById('url').value = config.url || '';
      document.getElementById('baseURL').value = config.baseURL || '';
      document.getElementById('timeout').value = config.timeout || 5000;
      document.getElementById('headers').value = JSON.stringify(config.headers || {}, null, 2);
      document.getElementById('params').value = JSON.stringify(config.params || {}, null, 2);
      document.getElementById('body').value = config.data ? JSON.stringify(config.data, null, 2) : '';
      updateConfigPreview();
    } catch { alert('Invalid config file'); }
  };
  input.click();
}

updateConfigPreview();
</script>
</body>
</html>

Key Features

Full config form — method, URL, baseURL, timeout, headers, params, body
Config preview — see the complete Axios config object live as you edit
Response viewer — status, timing, size, and body
Request history — last 10 requests stored, click to replay
Config export/import — save configs as JSON files and reload them

What’s Next

Tutorial	What You’ll Learn
Interceptors & Error Handling	Auth tokens, logging, retry logic
Axios Advanced	Cancellation, progress tracking, adapters

Related topics: Axios Getting Started, JavaScript Promises, REST API Design.

What’s Next

Congratulations on completing this Axios Requests Responses tutorial! Here’s where to go from here:

Practice daily — Consistency is more important than long study sessions
Build a project — Apply what you learned by building something real
Explore related topics — Check out other tutorials in the same category
Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!

Previous Axios Getting Started — Complete Beginner's Guide to HTTP Requests Next Axios Interceptors & Error Handling — Complete Guide with Examples

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Axios

Axios Requests & Responses Explained — Full Configuration Guide

What You’ll Learn

Why Configuration Matters

Where This Fits in Your Learning Path

The Axios Config Object

Setting Defaults to Avoid Repetition

Global Defaults

Instance Defaults (Recommended)

Request-Level Config

How Merging Works in Practice

Query Parameters and Serialization

Array Parameters

Custom Serialization with qs

Request Cancellation

Basic Cancellation

Cancellation with Timeout

Cancelling Multiple Requests

Transform Functions

transformRequest

transformResponse

Using the Config Object Directly

Common Mistakes Beginners Make

1. Setting baseURL Without a Leading Slash on Paths

2. Mutating Config Objects Across Requests

3. Forgetting responseType for Binary Files

4. Not Understanding Default Merge Order

5. Passing Body Data to GET Requests

Practice Questions

Challenge

FAQ

What is the difference between axios.create() and new axios()?

Can I set default headers for only POST requests?

How do I send FormData with Axios?

What does validateStatus do?

How do I handle cookies cross-origin?

Try It Yourself: Request Configurator

Key Features

What’s Next

What’s Next

What is the difference between `axios.create()` and `new axios()`?

What does `validateStatus` do?