AxiosでDELETEリクエストを送信する：リクエストボディとヘッダーの指定方法

2024-04-02

AxiosでDELETEリクエストを送信する：リクエストボディとヘッダーの指定方法

このチュートリアルでは、JavaScriptライブラリのAxiosを使用して、リクエストボディとヘッダーを含むDELETEリクエストを送信する方法について説明します。

対象者

JavaScriptとReact.jsの基礎知識を持っている方
Axiosを使った経験がある方
DELETEリクエストとリクエストボディ/ヘッダーの概念を理解している方

必要なもの

Node.js
npmまたはyarn
テキストエディタ

チュートリアル

プロジェクトの作成

新しいNode.jsプロジェクトを作成します。

npm init -y

Axiosのインストール

npm install axios

コードの作成

index.jsファイルを作成し、以下のコードを追加します。

const axios = require('axios');

const url = 'https://example.com/api/endpoint';
const data = {
  id: 123,
};
const headers = {
  Authorization: 'Bearer YOUR_TOKEN',
};

axios.delete(url, {
  data,
  headers,
})
  .then((response) => {
    console.log('DELETEリクエストが成功しました:', response.data);
  })
  .catch((error) => {
    console.error('DELETEリクエストが失敗しました:', error.message);
  });

コード解説

axios.delete(url, { data, headers })：DELETEリクエストを送信します。
url：リクエスト先のURL
data：リクエストボディに含めるデータ
headers：リクエストヘッダー
.then((response) => { ... })：リクエストが成功した場合の処理

コードの実行

node index.js

テスト

APIエンドポイントが存在し、適切な権限を持っていることを確認してください。

補足

DELETEリクエストは、サーバー上のリソースを削除するために使用されます。
リクエストボディは、削除するリソースに関する追加情報を提供するために使用できます。
リクエストヘッダーは、認証情報やその他のメタデータを指定するために使用できます。

関連技術

JavaScript
React.js
HTTP
Axios

このチュートリアルは、Axiosを使用してDELETEリクエストを送信する方法の基本的な概要を提供します。
詳細については、Axiosドキュメントを参照してください。

このチュートリアルは情報提供のみを目的としています。いかなる損害についても責任を負いません。

const axios = require('axios');

const url = 'https://example.com/api/endpoint';
const data = {
  id: 123,
};
const headers = {
  Authorization: 'Bearer YOUR_TOKEN',
};

axios.delete(url, {
  data,
  headers,
})
  .then((response) => {
    console.log('DELETEリクエストが成功しました:', response.data);
  })
  .catch((error) => {
    console.error('DELETEリクエストが失敗しました:', error.message);
  });

実行方法

上記のコードをindex.jsなどのファイルに保存します。
以下のコマンドを実行して、コードを実行します。

node index.js

注意事項

上記のコードは、サンプルコードです。実際の使用には、url、data、headersなどを適宜変更する必要があります。
YOUR_TOKENを実際のトークンに置き換えてください。

AxiosでDELETEリクエストを送信する他の方法

params オプションを使用して、クエリパラメータとしてデータを送信できます。

const axios = require('axios');

const url = 'https://example.com/api/endpoint';
const params = {
  id: 123,
};

axios.delete(url, {
  params,
})
  .then((response) => {
    console.log('DELETEリクエストが成功しました:', response.data);
  })
  .catch((error) => {
    console.error('DELETEリクエストが失敗しました:', error.message);
  });

URLSearchParams オブジェクトを使用して、クエリパラメータをエンコードできます。

const axios = require('axios');

const url = 'https://example.com/api/endpoint';
const params = new URLSearchParams();
params.append('id', 123);

axios.delete(url, {
  params,
})
  .then((response) => {
    console.log('DELETEリクエストが成功しました:', response.data);
  })
  .catch((error) => {
    console.error('DELETEリクエストが失敗しました:', error.message);
  });

カスタムヘッダーを使用する

headers オプションを使用して、カスタムヘッダーを設定できます。

const axios = require('axios');

const url = 'https://example.com/api/endpoint';
const headers = {
  'Content-Type': 'application/json',
};

axios.delete(url, {
  headers,
})
  .then((response) => {
    console.log('DELETEリクエストが成功しました:', response.data);
  })
  .catch((error) => {
    console.error('DELETEリクエストが失敗しました:', error.message);
  });

インターセプターを使用して、リクエストを処理する前にリクエストをカスタマイズできます。

const axios = require('axios');

const interceptor = axios.interceptors.request.use((config) => {
  // リクエストをカスタマイズする
  return config;
});

axios.delete(url)
  .then((response) => {
    console.log('DELETEリクエストが成功しました:', response.data);
  })
  .catch((error) => {
    console.error('DELETEリクエストが失敗しました:', error.message);
  })
  .finally(() => {
    // インターセプターを削除する
    axios.interceptors.request.eject(interceptor);
  });

Axiosのインスタンスを作成する

axios.create() メソッドを使用して、デフォルト設定を持つAxiosインスタンスを作成できます。

const axios = require('axios');

const instance = axios.create({
  baseURL: 'https://example.com/api',
});

instance.delete('/endpoint')
  .then((response) => {
    console.log('DELETEリクエストが成功しました:', response.data);
  })
  .catch((error) => {
    console.error('DELETEリクエストが失敗しました:', error.message);
  });