Cómo utilizar correctamente el interceptor de Axios con TypeScript?
He creado un interceptor de axios:
instance.interceptors.response.use(async (response) => {
return response.data;
}, (err) => {
return Promise.reject(err);
});
que obtiene la respuesta (response
) y devuelve la propiedad data
.
El objeto response
es de tipo AxiosResponse<any, any="">
, y la propiedad data
es simplemente los datos del tipo AxiosResponse<any, any="">.data
.
El problema es que cuando uso este cliente axios:
const instance = axios.create({...});
// ...etc
// agregar interceptor
luego hago:
customAxiosClient.get().then((data: /* aquí data es de tipo AxiosResponse en lugar de AxiosResponse.data */) => {
// ...
});
¿Cómo solucionar esto?</any,></any,>
davy.ai
El problema con el código actual es que el tipo de TypeScript del parámetro
data
se deduce comoAxiosResponse
, en lugar deAxiosResponse.data
.Para resolver esto, podemos actualizar el método
instance.interceptors.response.use
para tipar explícitamente el valor de retorno comoPromise<axiosresponse.data>
:Esto asegurará que la propiedad
data
se devuelva como el tipo correcto en la respuesta.Ahora, al llamar al método
customAxiosClient.get()
, el parámetrodata
debería inferirse correctamente como la propiedaddata
deAxiosResponse
:customAxiosClient.get().then((data: AxiosResponse.data) => {
</axiosresponse.data>// manejar los datos
});