He creado un interceptor axios:
instance.interceptors.response.use(async (response) => { return response.data; }, (err) => { return Promise.reject(err); }); que obtiene la response y devuelve la propiedad data .
El objeto de response es del tipo AxiosResponse<any, any> y la propiedad data son solo los datos del tipo AxiosResponse<any, any>.data .
El problema es que cuando uso este cliente axios
const instance = axios.create({...}); // ...etc // add interceptorEntonces lo hago:
customAxiosClient.get().then((data: /* here data is of type AxiosResponse instead of AxiosResponse.data */)¿Cómo resolver esto?
Solo tiene que especificar el tipo de datos de respuesta en el método de obtención de axios, así:
axios.get<never, YourDataType>(...)La respuesta de Rechu funciona, pero voy a ofrecer una alternativa.
Puede crear una función reutilizable para mantener su instancia de axios global. Lo uso yo mismo en producción.
En primer lugar, cree una carpeta/archivo llamado utils/http.ts en su proyecto. A continuación, esta es mi función reutilizable para mantener todo en un solo lugar.
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 Promise.reject(err.response.data); } if (err.request) { return Promise.reject(err.request); } return Promise.reject(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;Finalmente, utilícelo como el siguiente fragmento de código:
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 */); }; Será mecanografiado y listo para su uso inmediato. La función any in axios se puede sustituir por unknown .