TypeScriptでAxiosを使ってHTTPリクエストを送信する方法

TypeScriptを使用すると、型安全性が向上し、コードの信頼性が向上します。HTTPリクエストを処理するためには、Axiosという強力なライブラリがあります。この記事では、TypeScriptでAxiosを導入し、HTTPリクエストをどのように行うかについて解説します。

Axiosのインストール

まず最初に、Axiosをプロジェクトにインストールします。以下のコマンドを使用して、npmまたはyarnを介してAxiosをインストールします。

npm install axios
# または
yarn add axios

TypeScriptでAxiosを使用する

AxiosをTypeScriptプロジェクトで使用するには、追加の型情報をインストールする必要があります。以下のコマンドを使用して、@types/axiosをインストールします。

npm install @types/axios
# または
yarn add @types/axios

次に、TypeScriptファイルでAxiosをimportします。

import axios, { AxiosResponse, AxiosError } from 'axios';

// ここからはAxiosを使用したコードを記述

GETリクエストの送信

GETリクエストを送信するには、以下のようにAxiosを使用します。

axios.get('https://api.example.com/data')
    .then((response: AxiosResponse) => {
        // レスポンスを処理
        console.log(response.data);
    })
    .catch((error: AxiosError) => {
        // エラーを処理
        console.error(error.message);
    });

POSTリクエストの送信

POSTリクエストを送信するには、以下のようにAxiosを使用します。

const requestData = {
    key1: 'value1',
    key2: 'value2',
};

axios.post('https://api.example.com/post-endpoint', requestData)
    .then((response: AxiosResponse) => {
        // レスポンスを処理
        console.log(response.data);
    })
    .catch((error: AxiosError) => {
        // エラーを処理
        console.error(error.message);
    });

これで、TypeScriptプロジェクトでAxiosを使用してHTTPリクエストを送信するための基本的な手順がわかりました。適切なエラーハンドリングや応用的な使用法についても学び、プロジェクトに統合してみてください。