【JavaScript】JavaScriptからHTTPリクエストを送る方法

本ブログでは、クライアントのJavaScriptからHTTPリクエストを送る方法をご紹介いたします。

JavaScriptからHTTPリクエストを送る方法はいくつかあります。

• JavaScript標準のXMLHttpRequestを利用する方法
• JavaScript標準のfetch（XMLHttpRequestの上位互換）を利用する方法
• オープンソースのライブラリ（axiosやrequest）を利用する方法

一般的に、シンプルに少し試したい時は、JavaScript標準のライブラリを利用することが多く、複雑な実装を行うときは、オープンソースのライブラリを使うことが多くなっています。

本記事では、オープンソースライブラリの中でもよく使われ、シンプルでわかりやすいaxiosの利用方法についてご紹介いたします。

axiosの読み込み方

axiosはCDNを提供しており、HTMLへ直接読み込むことが可能です。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axiosの利用方法

axiosは下記のように利用します。

axiosを利用したGETリクエスト

axios.get("https://your-url.com")
    .then((response) => {
        // リクエストが成功した場合
        console.log(response);
    })
    .catch(err => {
        // catchでエラー時の挙動を定義
        console.log("err:", err);
    });

axiosを利用したPOSTリクエスト

const data = { firstName : "Taro", lastName : "Yamada" }
axios.post("https://your-url.com/hogehoge", data)
        .then((response) => {
            console.log(response);
        })
        .catch(err => {
          console.log("err:", err);
        });

axiosを利用したPUTリクエスト

const data = { firstName : "Jiro", lastName : "Yamada" }
axios.put("https://your-url.com/hogehoge",data)
        .then((response) => {
            console.log(response);
        })
        .catch(err => {
            console.log("err:", err);
        });

axiosを利用したDELETEリクエスト

axios.delete("https://your-rul/hogehoge")
        .then((response) => {
            console.log(response);
        })
        .catch(err => {
            console.log("err:", err);
        });

まとめ

axiosを利用することにより、わかりやすい実装となり、また高度に複雑な実装も可能となります。
クライアントのみのアプリを作成するときは、CDNが非常に便利に利用できるので、ぜひaxiosの利用をお試しください。