AxiosでPUTリクエストの送信｜パラメータ渡し方も解説

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リクエストの送信先となるサーバーのURL
• data: 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などのフォーマットでデータを渡すこともできるので、非常に便利です。