AxiosResponse Interface Structure in TypeScript

The AxiosResponse interface is the core TypeScript type used by Axios to represent the resolved HTTP response object. It encapsulates everything returned by a server after a successful HTTP request, including the payload, status code, response headers, the original request configuration, and the underlying network request instance. Understanding this interface allows developers to strongly type API responses and handle HTTP metadata predictably in TypeScript applications.

The AxiosResponse Type Definition

In the official Axios TypeScript definitions, AxiosResponse is defined as a generic interface:

export interface AxiosResponse<T = any, D = any> {
  data: T;
  status: number;
  statusText: string;
  headers: RawAxiosResponseHeaders | AxiosResponseHeaders;
  config: InternalAxiosRequestConfig<D>;
  request?: any;
}

Generic Type Parameters

• T (Response Data): Represents the type of the response payload returned by the server. It defaults to any, but developers can provide custom interfaces (e.g., AxiosResponse<UserProfile>) to enforce type safety on response.data.
• D (Request Body Data): Represents the type of the payload sent with the request. It defaults to any and is passed internally to the request configuration (InternalAxiosRequestConfig<D>).

Detailed Properties of AxiosResponse

1. data: T

The payload provided by the server. If the server returns JSON and Axios is configured with automatic JSON parsing (the default), this field contains the parsed JavaScript object matching type T.

2. status: number

The HTTP status code from the server response (e.g., 200, 201, 204, 304).

3. statusText: string

The HTTP status message provided by the server (e.g., "OK", "Created", "Not Modified"). In HTTP/2, this field is typically an empty string as status text is not supported.

4. headers: RawAxiosResponseHeaders | AxiosResponseHeaders

The HTTP response headers returned by the server. Axios normalizes these headers into an object that allows case-insensitive access and utility methods (such as .get()) to retrieve specific header values.

5. config: InternalAxiosRequestConfig<D>

The complete configuration object used to generate the request. This includes properties such as url, method, params, baseURL, and custom interceptors that were applied during the request lifecycle.

6. request?: any

The underlying platform-specific request object that generated the response. In browser environments, this is an instance of XMLHttpRequest; in Node.js environments, this is an instance of http.ClientRequest.

Usage Example

import axios, { AxiosResponse } from 'axios';

interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(userId: number): Promise<void> {
  const response: AxiosResponse<User> = await axios.get<User>(
    `https://api.example.com/users/${userId}`
  );

  // Strongly-typed access to properties
  console.log(response.status);       // number (e.g., 200)
  console.log(response.statusText);   // string (e.g., "OK")
  console.log(response.data.name);    // string (typed as User)
  console.log(response.headers['content-type']);
}