TypeScript AxiosでPOSTリクエストを送信する方法

TypeScriptとAxiosを組み合わせて、サーバーに対してPOSTリクエストを送信する方法を学びましょう。

Axiosとは

Axiosは、ブラウザとNode.js用の非常に人気のあるHTTPクライアントライブラリです。Promiseベースであり、簡単に使えるため、HTTPリクエストを行う際に広く採用されています。

TypeScriptでAxiosを使う

まず、プロジェクトにAxiosをインストールします。

npm install axios

次に、TypeScriptの型定義をインストールします。

npm install @types/axios

これで、AxiosをTypeScriptプロジェクトで使用する準備が整いました。

POSTリクエストの送信

以下は、Axiosを使用してTypeScriptでPOSTリクエストを送信する基本的な例です。

import axios from 'axios';

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

axios.post('https://example.com/api', postData)
    .then(response => {
        console.log('成功:', response.data);
    })
    .catch(error => {
        console.error('エラー:', error);
    });

この例では、axios.postメソッドを使用して、指定されたURLにデータを送信しています。成功時とエラー時の処理も適切にハンドリングされています。

ヘッダーの設定

POSTリクエストには、時には特定のヘッダーを含める必要があります。例えば、以下はAuthorizationヘッダーを設定する方法です。

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

const headers = {
    Authorization: 'Bearer YourAccessToken',
};

axios.post('https://example.com/api', postData, { headers })
    .then(response => {
        console.log('成功:', response.data);
    })
    .catch(error => {
        console.error('エラー:', error);
    });

これで、TypeScriptでAxiosを使用してPOSTリクエストを送信する基本的な方法と、ヘッダーの設定方法について学びました。プロジェクトの要件に応じて、さらに詳細な設定や処理を追加することができます。