如何正确使用 Axios 拦截器和 typescript？

Question

I have created an axios interceptor:

instance.interceptors.response.use(async (response) => {
    return response.data;
  }, (err) => {
    return Promise.reject(err);
  });

which gets the response and returns the data property.

The response object is of type AxiosResponse<any, any> and the data property is just the data of the type AxiosResponse<any, any>.data .

The problem is that when I use this axios client

const instance = axios.create({...});
// ...etc
// add interceptor

then I do:

customAxiosClient.get().then((data: /* here data is of type AxiosResponse instead of AxiosResponse.data */)

How to solve this?

Answer 1

You have to just specify the response data type in axios get method, like so:

axios.get<never, YourDataType>(...)

Answer 2

Answer by Rechu works, but I'm going to provide an alternative.

You can create a reusable function in order to keep your axios instance global. I use this myself in production.

First off, create a folder/file named utils/http.ts in your project. Next, this is my reusable function to keep everything in one place.

import axiosClient from "axios";
import type { AxiosRequestConfig } from "axios";

/**
 * Creates an initial 'axios' instance with custom settings.
 */
const instance = axiosClient.create({
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json; charset=utf-8",
  },
});

/**
 * Handle all responses. It is possible to add handlers
 * for requests, but it is omitted here for brevity.
 */
instance.interceptors.response.use(
  (res) => res.data,
  (err) => {
    if (err.response) {
      return err.response.data;
    }

    if (err.request) {
      return err.request;
    }

    return err.message;
  }
);

/**
 * Replaces main `axios` instance with the custom-one.
 *
 * @param cfg - Axios configuration object.
 * @returns A promise object of a response of the HTTP request with the 'data' object already
 * destructured.
 */
const axios = <T>(cfg: AxiosRequestConfig) => instance.request<any, T>(cfg);

export default axios;

Finally, use it like the following code snippet:

const login = () => {
  const creds = { username: "user", password: "pass" };

  axios<User>({ method: "POST", url: "/api/v1/auth/login", data: creds })
    .then((user) => { /* do whatever with user here */ })
    .catch((err) => { /* handle errors */);
};

It will be typed and ready for immediate usage. The any in axios function can be substituted with unknown as well.