typescript - Axios 1.4.0 Interceptors: Hur man lägger till metadata i en förfrågan?

Jag vill lägg till metadata till en begäran med en interceptor. Jag kan dock inte använda koden jag hittade i några exempel:

https://binod.hashnode.dev/axios-interceptor

instance.interceptors.request.use(
    function (config) {
        config.metadata = { startTime: new Date() };
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);

Jag får detta felmeddelande:

Egenskapen 'metadata' finns inte på typen 'InternalAxiosRequestConfig'

Jag använder Axios 1.4.0 och Typescript 5.0.4. Vad gör jag fel? 🤔

Svar #1

Du kan utöka Axios-konfigurationen och använda den med interceptorer på detta sätt (används för att mäta begärans varaktighet):

import { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios';

import { getBenchmarkMiliseconds } from 'someBenchmarkingLib';


interface AxiosRequestConfigWithMetadata<T = unknown> extends InternalAxiosRequestConfig<T> {
  metadata?: {
    startTime?: number;
    endTime?: number;
  };
}

interface AxiosResponseWithMetadata<T = unknown, D = unknown> extends AxiosResponse<T, D> {
  config: AxiosRequestConfigWithMetadata<D>;
}
interface AxiosErrorWithMetadata<T = unknown, D = unknown> extends AxiosError<T, D> {
  config: AxiosRequestConfigWithMetadata<D>;
}

export interface AxiosInterceptorProps {
  axiosClient: AxiosInstance;
}

export const addLoggingInterceptors = (props: AxiosInterceptorProps) => {
  props.axiosClient.interceptors.request.use(
    (requestConfig: AxiosRequestConfigWithMetadata) => {
      requestConfig.metadata = requestConfig.metadata || {};
      requestConfig.metadata.startTime = getBenchmarkMiliseconds();
      return requestConfig;
    },
    (error) => {
      return Promise.reject(error);
    },
  );

  props.axiosClient.interceptors.response.use(
    (response: AxiosResponseWithMetadata) => {
      const startTime = response.config.metadata?.startTime;
      // do something here
      return response;
    },
    (error: AxiosErrorWithMetadata) => {
      const startTime = error?.config?.metadata?.startTime;
      // do something here
      return Promise.reject(error);
    },
  );
};

Redigera 1 För senare versioner av axios (jag använde axios=1.7.2) behövde jag göra typändring:

interface AxiosRequestConfigWithMetadata<T = unknown> extends AxiosRequestConfig<T> {
  headers: AxiosRequestHeaders;
  metadata?: {
    startTime?: number;
    endTime?: number;
  };
}

Svar #2

Returtypen har nyligen ändrats. Jag är inte säker på om det finns ett föredraget sätt att göra det nu, men du kan utöka det genom att använda TypeScript:s deklarationssammanfogningsfunktion

declare module 'axios' {
  export interface InternalAxiosRequestConfig {
    meta: any;
  }
}

Relaterade artiklar