TypeScript Axiosの使い方

Axiosは、JavaScriptおよびTypeScriptでHTTPリクエストを行うための人気のあるライブラリです。TypeScriptを使用することで、より型安全なコードを書くことができ、開発効率が向上します。以下では、TypeScriptでAxiosを使用する基本的な使い方について解説します。

インストール

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

npm install axios

基本的なGETリクエスト

次に、TypeScriptファイルでAxiosを使用してGETリクエストを行ってみましょう。

import axios from 'axios';

// APIエンドポイント
const apiUrl = 'https://api.example.com/data';

// GETリクエストの実行
axios.get(apiUrl)
    .then(response => {
        // レスポンスの処理
        console.log('データ:', response.data);
    })
    .catch(error => {
        // エラーの処理
        console.error('エラー:', error);
    });

パラメータ付きGETリクエスト

GETリクエストにパラメータを追加する場合は、paramsオブジェクトを使用します。

// パラメータ
const params = {
    key1: 'value1',
    key2: 'value2',
};

// パラメータ付きGETリクエスト
axios.get(apiUrl, { params })
    .then(response => {
        // レスポンスの処理
        console.log('データ:', response.data);
    })
    .catch(error => {
        // エラーの処理
        console.error('エラー:', error);
    });

POSTリクエスト

POSTリクエストを行う場合は、axios.postメソッドを使用します。

// 送信するデータ
const postData = {
    key1: 'value1',
    key2: 'value2',
};

// POSTリクエストの実行
axios.post(apiUrl, postData)
    .then(response => {
        // レスポンスの処理
        console.log('データ:', response.data);
    })
    .catch(error => {
        // エラーの処理
        console.error('エラー:', error);
    });

これで、基本的なTypeScriptでのAxiosの使い方がわかりました。必要に応じて、さらにAxiosの機能やオプションを活用して開発を進めてください。