2018-11-09

httpクライアントを学んでみる。

先日のWeb サービスを作ってみました。で、
「jQuery 以外の Ajax 処理用ライブラリとそれを利用した実装」をやると書いたので、
せっかくだから自分でPOSTSONに投稿して、アクセスしてみます。

というか Ajax 処理用ライブラリなんてない・・・。

「Ajax」と調べると、

Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である。XMLHttpRequest（HTTP 通信を行うための JavaScript 組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミック HTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る。

Wikipedia より

ということは、Ajax 用のライブラリなんてなくて、

http のクライアントで、
非同期通信し、
ページを動的に書き換える

以上をしていれば、何を使ってようと Ajax だ。
ということで、http クライアントを試すことにする。

今回は、fetchAPI、axios、それと jQuery。これは比較対象としての意味合いだけど。

データの登録

とりあえず、Ajax でデータアクセスする対象を作ります。
POSTSONでデータの保存をしてみます。
こんな感じ

登録するデータは以下の通りとします。

{
  "fetch": "AAA",
  "axios": "BBB",
  "jquery": "CCC"
}

登録したらメールが飛んでくるので、
アクティベーションしデータ配信用の URL を取得します。

データ取得

axios と jQuery はパッケージのダウンロードをしておきます。
npm i axios jquery --save

index.html として以下を作成しました。

index.html

<html>
  <head>
    <script src=".\node_modules\axios\dist\axios.min.js"></script>
    <script src=".\node_modules\jquery\dist\jquery.min.js"></script>

    <script>
      var url = "[データソースにするURL]";

      //fetchAPIで取得
      function getdataFetch() {
        fetch(url, {
          mode: "cors",
        })
          .then(function (response) {
            return response.json();
          })
          .then(function (body) {
            console.log(body.fetch);
            document.getElementById("resultFetch").innerText += body.fetch;
          })
          .catch(function (error) {
            console.log(error);
            document.getElementById("resultFetch").innerText = "ERR";
          });
      }

      //axiosで取得
      function getdataAxios() {
        axios
          .get(url)
          .then(function (response) {
            return response.data;
          })
          .then(function (body) {
            console.log(body.axios);
            document.getElementById("resultAxios").innerText += body.axios;
          })
          .catch(function (error) {
            console.log(error);
            document.getElementById("resultAxios").innerText = "ERR";
          });
      }

      //ｊQueryで取得
      function getdataJquery() {
        $.ajax({
          url: url,
        })
          .done(function (responce) {
            console.log(responce.jquery);
            document.getElementById("resultJquery").innerText +=
              responce.jquery;
          })
          .fail(function (XHR, status, error) {
            console.log(error);
            document.getElementById("resultJquery").innerText = "ERR";
          });
      }
    </script>
    <style>
      .api {
        margin: 10px;
      }

      .result {
        height: 100px;
        border: black 1px solid;
      }
    </style>
  </head>

  <body>
    <section class="api">
      <div>
        <button onclick="getdataFetch()">get - Fetch</button>
      </div>
      <div class="result" id="resultFetch"></div>
    </section>
    <section class="api">
      <div>
        <button onclick="getdataAxios()">get - Axios</button>
      </div>
      <div class="result" id="resultAxios"></div>
    </section>
    <section class="api">
      <div>
        <button onclick="getdataJquery()">get - Jquery</button>
      </div>
      <div class="result" id="resultJquery"></div>
    </section>
  </body>
</html>

index.html を表示するして、それぞれボタンを押すと次のようになる。

ちなみに、このままだと IE11 は fetchAPI も axios も動かない。
fetch は、promise も使用するようで、fetch と promise のそれぞれの polyfill が必要だった。
なので head 要素に以下を追加する。

1 2	<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>

axios だけなら、

1	<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>

だけでよかった。

fetchAPI と axios の使ってみて

今回 fetchAPI と axios を使ってみた。
この記事上は post は試してないわけだけど、fetchAPI と axios の違いはほとんどない
エラーコントロールの観点で、fetchAPI = axios > jQuery かなって感じ。
then と catch が使えるのは、やっぱり便利だなと。

次使うときは、IE11 をサポートしないなら fetchAPI、
サポートするなら、axios を使う気がする。

ではでは。

Octo's blog

httpクライアントを学んでみる。

目次

というか Ajax 処理用ライブラリなんてない・・・。

データの登録

データ取得

fetchAPI と axios の使ってみて