Interceptores de Axios con Typescript

Cómo usar correctamente los interceptores de axios con TypeScript:

import axios, { AxiosRequestConfig, AxiosInstance } from 'axios'

HTTP.interceptors.request.use((config: AxiosRequestConfig) => config)

Por ejemplo, cuando creo una instancia de axios, configuro la configuración predeterminada:

const conf: AxiosRequestConfig = {
  baseURL: process.env.VUE_APP_API_URL
}

const HTTP: AxiosInstance = axios.create(conf)

Pero cuando intento usar el interceptor con encabezados personalizados:

HTTP.interceptors.request.use((config: AxiosRequestConfig) =>{
  headers: {
    'x-projectkey': 1234
  }
})

No funciona:

Argument of type '(config: AxiosRequestConfig) => void' is not assignable to parameter of type '(value: AxiosRequestConfig) => AxiosRequestConfig | Promise<AxiosRequestConfig>'

Todavía soy nuevo en TS, no puedo entender esto.

Respuesta #1

Ve a la definición de tipo de AxiosRequestConfig, puedes ver que todo, incluidos los encabezados de axios, es opcional:

interface AxiosRequestConfig<D = any> {
  url?: string;
  method?: Method | string;
  baseURL?: string;
  timeout?: number;
  timeoutErrorMessage?: string;
  withCredentials?: boolean;
  // ... omited 
}

Al crear un axiosInstance y agregar configuración, se debe devolver el config para que la instancia adopte la configuración:

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use((config) => {
  if (config.headers) { // <- adding a check 
    config.headers["x-projectkey"] = 1234; // no errors
  }
  config.withCredentials = true; // to include credential, it should be outside of "if" block 
  return config;
});

Entonces, en cada solicitud que hagas con el axiosInstance, incluirá el encabezado x-projectkey y las credenciales:

axiosInstance.get("url");

Respuesta #2

Deberías devolver la configuración como se muestra a continuación:

HTTP.interceptors.request.use((config: AxiosRequestConfig) => {
  config.headers['x-projectkey'] = 1234

  return config
})

Diviértete.