AXIOSは、JavaScriptのHTTPクライアントライブラリです。XMLHttpRequestやfetch APIといったネイティブのHTTP通信方法をラッパーすることで、シンプルで直感的なインターフェースを提供しています。
Axiosは、GET、POST、PUTを含め、様々なHTTPメソッドにも対応できますが、本文では、PUTメソッドを取り上げて、そのリクエストの方法とパラメータの渡し方を皆さんに紹介していきたいと思います。
AxiosでPUTリクエストの実装方法
Axiosを利用する前に、それをきちんとパソコンにインストールされていることを確認する必要があります。まだインストールされていない場合は、次のコマンドを利用してAxiosをインストールすることができます。
Axiosのインストール
npm install axios
または
yarn add axios
AxiosのインポートとPUTリクエストの実装
そして、次のステップを参照して、コードでAxiosをインポートして、PUTリクエストを送信できるようになります、
ステップ⒈JavaScriptファイルの中で、次のコードを用いて、Axiosをインポートできます。
import axios from 'axios';
ステップ⒉次のようなコード経由で、AxiosでPUTメソッドを指定してリクエストを送信できます。
axios.put(url, data, config)
.then(response => {
// レスポンス処理
})
.catch(error => {
// エラーハンドリング
});
上記のコードの中に含まれる(url, data, config)は、次のようなことになります：
url: PUTリクエストの送信先となるサーバーのURLdata: PUTリクエストで送信したいデータ、通常JavaScriptオブジェクトになりますが、JSONフォーマットに変換されてサーバー側に送信されます。config: オプションのパラメータの設定（ヘッダー、タイムアウト時間など）
AxiosでPUTリクエストのパラメータ渡し方
次は、Axiosを利用してPUTメソッドを利用したリクエストのパラメータの渡し方を皆さんに紹介します。
URLでパラメータを渡す
まず、パラメータを直接にパラメータを追加して、それをサーバー側に渡すことができます。これは、最も一般的なパラメータの渡し方です。
const userId = 123;
const newData = {
name: 'John Doe',
age: 30
};
axios.put(`/api/users/${userId}`, newData)
.then(response => {
// レスポンスの処理
})
.catch(error => {
// エラーハンドリング
});
上記のサンプルコードでは、URLの末尾に userIdに追加して、 newDataをリクエストボディとしてサーバー側に送信します。
paramsオプションを使用
また、Axiosは params オプションを提供していますので、これを使って、パラメータを渡すことも可能です：
const userId = 123;
const newName = 'John Doe';
axios.put('/api/users', null, {
params: {
id: userId,
name: newName
}
})
.then(response => {
// レスポンスの処理
})
.catch(error => {
// エラーハンドリング
});
上記のサンプルコードでは、パラメータを1つのオブジェクトとしてparamsに渡し、AxiosはそれをURLの末尾に追加します。
リクエストボディを使用
上記の対策以外、データをHTTPリクエストボディとして渡すことができます。例えば：
const userData = {
id: 123,
name: 'John Doe',
age: 30
};
axios.put('/api/users', userData)
.then(response => {
// レスポンスの処理
})
.catch(error => {
// エラーハンドリング
});
上記のサンプルコードでは、userDataというオブジェクトを作成し、id、name、ageプロパティを設定しています。そしてAxiosのputメソッドを使って/api/usersエンドポイントにuserDataを送信しています。
Apidog：１クリックでPUTリクエストを送信可能！
それでは、もしPUTリクエストを送信してリソースのデータを更新したりする必要がある場合は、どうやって実装すればいいですか？この部分では、日本語対応API管理ツールのApidogで１クリックだけでPUTリクエストを送信できる方法を皆さんに紹介します。Apidogを使って、PUTリクエストを送信すると、送信情報と取得結果を一緒に保存して、API仕様書を作成して、簡単に他のメンバーに共有することも可能になりますので、非常に便利です。
ApidogでPUTリクエストを送信する場合、PUTリクエストのパラメータ、Body、Headerの設定は、Apidogで全部利用することができますし、Bodyでform-data、x-www-form-urlencoded、json、xml、rawやbinaryなどのフォーマットでデータを渡すこともできるので、非常に便利です。
