Axios-Antwort in TypeScript

1. Verwenden Sie Axios in TypeScript
2. Typen in der Axios-Bibliothek
3. Verwenden Sie Axios, um REST-API-Aufrufe in TypeScript durchzuführen
4. Erstellen Sie eine Axios Config-Datei in TypeScript

Axios ist eine weit verbreitete JavaScript-Bibliothek zum Verwalten von Anfragen an eine Backend-Ressource. Aufgrund der wachsenden Nachfrage nach TypeScript wurden der Axios-Bibliothek Typen hinzugefügt.

In diesem Tutorial wird Axios verwendet, um REST-API-Aufrufe in TypeScript durchzuführen.

Verwenden Sie Axios in TypeScript

Der erste Schritt besteht darin, Axios in einem Projekt zu installieren. Axios kann in einem NodeJs- oder React-Projekt installiert werden.

npm install axios

// or

yarn install axios

Jetzt kann Axios im Projekt mit anderen Paketen verwendet werden.

Typen in der Axios-Bibliothek

Mehrere vorgefertigte Typen sind im Axios Github-Repository verfügbar. Dieses Tutorial konzentriert sich auf einige der wichtigen Typen in Axios.

export interface AxiosResponse<T = never>  {
    data: T;
    status: number;
    statusText: string;
    headers: Record<string, string>;
    config: AxiosRequestConfig<T>;
    request?: any;
}

Die AxiosResponse ist das Response-Objekt, das aufgrund eines REST-API-Aufrufs wie GET oder POST als Promise zurückgegeben wird.

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

Der obige Code zeigt zwei REST-API-Methoden in Axios und ihre Typen. Die AxiosRequestConfig ist eine ziemlich große Schnittstelle, die hier definiert ist.

Einige der wichtigen Felder in der Benutzeroberfläche sind:

export interface AxiosRequestConfig<T = any> {
    url?: string;
    method?: Method;
    baseURL?: string;
    data?: T;
    headers?: Record<string, string>;
    params?: any;
    ...
}

Daher kann man entweder die Basis-URL oder die vollständige URL als Teil der Anfrage angeben. Eines der kritischen Dinge, die hier zu beachten sind, ist das Feld data in AxiosRequestConfig und AxiosResponse, die generische Typen T sind und jeden Typ akzeptieren können.

Verwenden Sie Axios, um REST-API-Aufrufe in TypeScript durchzuführen

Die oben genannten Typen können typisierte REST-API-Aufrufe in TypeScript durchführen. Angenommen, eine E-Commerce-Website sendet einen REST-API-Aufruf an ihr Backend, um alle auf ihrem Frontend verfügbaren Bücher anzuzeigen.

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);
})

Mit React kann man sogar die zurückgesendeten Daten als Teil der AxiosResponse in einem Zustand wie etwa speichern:

const [books, setBooks] = React.useState<Book[]>([]);
axios.get<Book[]>('/books', {
    baseURL : 'https://ecom-backend-example/api/v1',
}).then( response => {
    setBooks(response.data);
})

Erstellen Sie eine Axios Config-Datei in TypeScript

Axios bietet viele nützliche Typen und kann verwendet werden, um eine config-Datei zu erstellen, die wir weiter verwenden können, um REST-API-Aufrufe in der gesamten Anwendung durchzuführen.

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}`)
}

Somit kann die config in der gesamten Anwendung verwendet werden als:

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);
    });

Somit ermöglicht uns Axios saubere und stark typisierte Implementierungen von REST-API-Aufrufen.