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

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

目次

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

Ajax」と調べると、

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

Wikipedia より

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

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

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

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

データの登録

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

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

1
2
3
4
5
{
"fetch": "AAA",
"axios": "BBB",
"jquery": "CCC"
}

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

データ取得

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

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

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<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";
});
}

//jQueryで取得
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 を使う気がする。

ではでは。