Respuesta de Axios en TypeScript
- Usar Axios en TypeScript
- Tipos en la biblioteca de Axios
- Utilice Axios para realizar llamadas a la API REST en TypeScript
-
Cree un archivo
Configde Axios en TypeScript
Axios es una biblioteca de JavaScript predominante para gestionar la realización de solicitudes a un recurso de back-end. Con la creciente demanda de TypeScript, se han agregado tipos a la biblioteca de Axios.
Este tutorial utilizará Axios para realizar llamadas a la API REST en TypeScript.
Usar Axios en TypeScript
El primer paso es instalar Axios en un proyecto. Axios se puede instalar en un proyecto NodeJs o React.
npm install axios
// or
yarn install axios
Ahora, Axios se puede usar en el proyecto con otros paquetes.
Tipos en la biblioteca de Axios
Varios tipos preconstruidos están disponibles en el repositorio de Axios Github. Este tutorial se centrará en algunos de los tipos importantes de Axios.
export interface AxiosResponse<T = never> {
data: T;
status: number;
statusText: string;
headers: Record<string, string>;
config: AxiosRequestConfig<T>;
request?: any;
}
La AxiosResponse es el objeto de respuesta devuelto como una Promesa debido a una llamada de API REST como GET o POST.
get<T = never, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig<T>): Promise<R>;
post<T = never, R = AxiosResponse<T>>(url: string, data?: T, config?: AxiosRequestConfig<T>): Promise<R>;
El código anterior muestra dos métodos REST API en Axios y sus tipos. El AxiosRequestConfig es una interfaz bastante grande definida aquí.
Algunos de los campos importantes en la interfaz son:
export interface AxiosRequestConfig<T = any> {
url?: string;
method?: Method;
baseURL?: string;
data?: T;
headers?: Record<string, string>;
params?: any;
...
}
Por lo tanto, se puede incluir la URL base o la URL completa como parte de la solicitud. Una de las cosas críticas a tener en cuenta aquí es el campo datos en AxiosRequestConfig y AxiosResponse, que son tipos genéricos T y pueden aceptar cualquier tipo.
Utilice Axios para realizar llamadas a la API REST en TypeScript
Los tipos anteriores pueden realizar llamadas a la API REST escritas en TypeScript. Supongamos que un sitio web de comercio electrónico realiza una llamada API REST a su backend para mostrar todos los libros disponibles en su interfaz.
interface Book {
isbn : string;
name : string;
price : number;
author : string;
}
axios.get<Book[]>('/books', {
baseURL : 'https://ecom-backend-example/api/v1',
}).then( response => {
console.log(response.data);
console.log(response.status);
})
Usando React, uno puede incluso almacenar los datos devueltos como parte de AxiosResponse en un estado con algo como:
const [books, setBooks] = React.useState<Book[]>([]);
axios.get<Book[]>('/books', {
baseURL : 'https://ecom-backend-example/api/v1',
}).then( response => {
setBooks(response.data);
})
Cree un archivo Config de Axios en TypeScript
Axios proporciona muchos tipos útiles y se puede usar para crear un archivo de configuración que podemos usar para realizar llamadas a la API REST en toda la aplicación.
interface Book {
isbn : string;
name : string;
price : number;
author : string;
}
const instance = axios.create({
baseURL: 'https://ecom-backend-example/api/v1',
timeout: 15000,
});
const responseBody = (response: AxiosResponse) => response.data;
const bookRequests = {
get: (url: string) => instance.get<Book>(url).then(responseBody),
post: (url: string, body: Book) => instance.post<Book>(url, body).then(responseBody),
delete: (url: string) => instance.delete<Book>(url).then(responseBody),
};
export const Books {
getBooks : () : Promise<Book[]> => bookRequests.get('/books'),
getSingleBook : (isbn : string) : Promise<Book> => bookRequests.get(`/books/${isbn}`),
addBook : (book : Book) : Promise<Book> => bookRequests.post(`/books`, book),
deleteBook : (isbn : string) : Promise<Book> => bookRequests.delete(`/books/${isbn}`)
}
Así, a lo largo de la aplicación, la config se puede utilizar como:
import Books from './api' // config added in api.ts file
const [books, setBooks] = React.useState<Book[]>([]);
Books.getPosts()
.then((data) => {
setBooks(data);
})
.catch((err) => {
console.log(err);
});
Por lo tanto, Axios nos permite realizar implementaciones limpias y fuertemente tipadas de llamadas API REST.
