es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo utilizar correctamente el interceptor de Axios con TypeScript?

20 Jul, 2023 Programación

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,>

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código actual es que el tipo de TypeScript del parámetro data se deduce como AxiosResponse, en lugar de AxiosResponse.data.

    Para resolver esto, podemos actualizar el método instance.interceptors.response.use para tipar explícitamente el valor de retorno como Promise<axiosresponse.data>:

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

    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ámetro data debería inferirse correctamente como la propiedad data de AxiosResponse:

    customAxiosClient.get().then((data: AxiosResponse.data) => {
    // manejar los datos
    });    </axiosresponse.data>

Comments are closed.