Newt

無料ではじめる
  • ガイド
  • Form App

Axiosを利用した導入方法

Table of contents

Axiosについて

Axiosは、ブラウザとNode.jsで動作するPromiseベースのHTTPクライアントです。Axiosのシンプルで柔軟なAPIを利用することでHTTPリクエストを簡単に送信することができる非常に使い勝手の良いライブラリです。

Fetch APIとの違いは、Fetch APIが一部ブラウザやNode.jsにおける標準APIであるのに対して、Axiosはnpm等のパッケージマネージャからインストールして利用するライブラリであるということが挙げられます。Axiosを利用するためには、 npm install 等のコマンドを実行して、あなたのプロジェクトにAxiosをインストールする必要があります。

また、Axiosは内部的にXMLHttpRequestを使ってHTTP通信を行います。そのため、Fetch APIのようなブラウザ互換性問題を気にする必要がほぼありません。もちろんInternet Explorerでも動作します。

より詳しい情報については、Axiosの公式サイトをご覧ください。

Axiosをプロジェクトにインストールする

前述の通り、Axiosはインストールして利用するタイプのライブラリであるためnpmやyarn、pnpm等を使ってパッケージをインストールする必要があります。

インストールについての詳細はここでは割愛します。

npm install --save axios

Axiosを使ってフォームを送信する

下記フォームに入力された値をFetch APIを使って送信します。

<form id="my-form">
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="body"></textarea>
    <input type="file" name="attachment" />
    <button type="submit">Submit</button>
</form>

Submitボタンをクリックした際に、フォームからデータを抽出しAxiosを使ってForm AppのエンドポイントにPOSTリクエストを送信します。
ピュアなJavaScriptのみを利用した場合、次のようなコードになります。（React等のフレームワークを利用している場合は、stateから値を取り出すなど必要に応じて書き換えてください）

FormData形式で送信

<script>
  const form = document.getElementById("my-form");
  form.addEventListener("submit", submitFormData);

  function submitFormData(e) {
    e.preventDefault();

    const formData = new FormData();
    formData.append("name", document.querySelector('input[name="name"]').value);
    formData.append(
      "email",
      document.querySelector('input[name="email"]').value
    );
    formData.append("body", document.querySelector('input[name="body"]').value);
    formData.append(
      "attachment",
      document.querySelector('input[name="attachment"]').value
    );

    axios
      .post("https://{spaceUid}.form.newt.so/v1/{formUid}", formData, {
        headers: {
          Accept: "application/json", // レスポンスをJSONで受け取る
        },
      })
      .then((response) => console.log(response))
      .catch((error) => console.log(error));
  }
</script>

JSON形式で送信

<script>
  const form = document.getElementById("my-form");
  form.addEventListener("submit", submitFormData);

  function submitFormData(e) {
    e.preventDefault();

    const data = {
      name: document.querySelector('input[name="name"]').value,
      email: document.querySelector('input[name="email"]').value,
      body: document.querySelector('input[name="body"]').value,
      attachment: document.querySelector('input[name="attachment"]').value,
    };

    axios
      .post("https://{spaceUid}.form.newt.so/v1/{formUid}", data, {
        headers: {
          "Content-Type": "application/json", // JSON形式でデータを送信することをサーバーに伝える
          Accept: "application/json", // レスポンスをJSONで受け取る
        },
      })
      .then((response) => console.log(response))
      .catch((error) => console.log(error));
  }
</script>
NewtMade in Newt