javascriptでGETリクエストを結合する方法【ソースコードあり】

2020.09.19

★悩み★
・WebHDFSを使ってgetmergeを実現する方法が分からない。
・javascriptでGETリクエストを発行する方法が分からない。
・javascriptでGETリクエストを結合する方法が分からない。

こういった「悩み」に答えます。

★本記事の内容★
(1) javascriptでWebHDFSにGETリクエストしgetmergeを実現！
(2) javascriptでGETリクエストを発行する方法をご紹介【ソースコードあり】
(3) javascriptでGETリクエストを結合する方法をご紹介【ソースコードあり】

この記事を書いてる筆者は、2年間、フロントエンジニアとして従事していました。

フロントエンジニアとして、Ruby on Railsでウェブアプリを開発したり、jQueryといったjavascriptでウェブサイトを開発したりしてきました。

フロントエンジニアの経験がある筆者が、「javascriptでGETリクエストを結合する方法」に関して分かりやすく解説していきます。

javascriptでWebHDFSにGETリクエストしgetmergeを実現！

先日の記事で、WebHDFSにはgetmerge相当の機能がないことをご紹介しました。

下記記事では、「なぜ、WebHDFSにgetmergeがないか？」をソースコード読みから考察しています。
興味がある方は、ぜひ一読してみてください。

【解説】WebHDFSにgetmergeがない理由
WebHDFSにgetmerge相当の機能がない理由を知りたいですか？本記事では、getmergeのソースコードを読み解き、WebHDFSにgetmerge相当の機能がない理由を考えます。また、WebHDFSでgetmerge相当の機能を作る方法を知りたい方も必見です。
kakedashi-xx.com
2021.02.22

上記記事で、WebHDFSでgetmerge相当の機能を実現するためには、以下の方法があるとご紹介しました。

★WebHDFSでgetmerge相当の機能を使う方法★
(A) (3) Concat File(s)と(12) List a Fileを組み合わせて実現する方法
(B) (12) List a FileとJavascriptを組み合わせて実現する方法

今回は、上記の(B)を実現するための技術要素をご紹介していきます。

javascriptを使って、「WebHDFSでgetmerge相当の機能を実現する方法」は、以下のようになります。

★javascriptを使いWebHDFSでgetmerge相当の機能を実現する方法★
手順1：javascriptでWebHDFSに対して「List a File」のGETリクエストを発行
手順2：jacascriptでWebHDFSに対して「Open and Read a File」のGETリクエストを発行
手順3：javascript内で手順2で取得したデータを結合

「手順２」では、「javascriptを用いてGETリクエストを発行する」必要があります。
「手順３」では、「javascriptを用いてデータを結合する」必要があります。

以降で、「javascriptを用いてGETリクエストを発行する」方法と「javascriptを用いてデータを結合する」方法をご紹介します。

javascriptでGETリクエストを発行する方法

javascriptでGETリクエストを発行する方法をご紹介します。

結論から記載しますと、「javascriptでGETリクエストを発行する」ソースコードは以下になります。

<script>
fetch("https://qiita.com/api/v2/items", {
  method: "GET",
}).then(response => {
  console.log(response);
});
</script>

上記ソースコードを「js-get-test.html」というファイル名で保存しましょう。

★ソースコードの解説★
javascriptのfetch関数を使い「https://qiita.com/api/v2/items」に対してGETリクエストを行います。

その後、返却された値をconsole.logを使い出力します。

＜備考＞
fetch関数を使うと、上記ソースコードのように簡単にGETリクエストを発行することができます。

その後、「js-get-test.html」をWebブラウザで開きます。
今回は、Chromeを使って上記ソースコードが正常に動作していることを確認します。

Chromeのアドレスバーに「js-get-test.html」のPATHを入力し、「js-get-test.html」を開きましょう。

その後、Chromeの「デベロッパーツール」起動しましょう。
「デベロッパーツールの起動方法」に関しては、下記の記事でご紹介しています。

【拡張機能は不要】Chromeで2ステップでページ全体をスクリーンショットする手順
Chromeで縦長なページ全体をスクリーンショットする方法で悩んでいませんか？本記事では「拡張機能を利用せずにChromeで縦長ページ全体をスクリーンショットする方法」をご紹介しています。「Chromeでの縦長ページ全体のスクリーンショットをする方法」や「Chromeのデペロッバーツールの起動方法」に関して悩んでいる方はぜひ記事をご覧ください。
kakedashi-xx.com
2020.12.22

デベロッパーツール内の「info」→「js-get-test.html」（下図の赤枠部分）をクリックしましょう。

続いて、下図の青枠部分のように「status: 200」と表示されていれば、正常に「js-get-test.html」が動作したことを確認できます。


以上が、「javascriptでGETリクエストを発行する方法」でした。

javascriptでGETリクエストを結合する方法

javascriptでGETリクエストを結合する方法をご紹介します。

結論から記載しますと、「javascriptでGETリクエストを結合する」ソースコードは以下になります。

<input id="fileItem" type="file">
<script>
function mergeBuffer(buffer1, buffer2) {
  var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength);
  tmp.set(new Uint8Array(buffer1), 0);
  tmp.set(new Uint8Array(buffer2), buffer1.byteLength);
  return tmp.buffer;
};

fetch("https://qiita.com/api/v2/items", {
  method: "GET",
}).then(response => {
  console.log(response);
  return response.arrayBuffer();
}).then(ab => {
  var ab1 = ab;
  var ab2 = ab;

  merge_data = mergeBuffer(ab1, ab2)
  merge_blob_data = new Blob([merge_data]);

  var a = document.createElement("a");
  var url = URL.createObjectURL(merge_blob_data);
  a.href = url;
  a.download = "js_text";
  document.body.appendChild(a);
  a.click();
});
</script>

上記ソースコードを「js-get-merge.html」というファイル名で保存しましょう。

★ソースコードの解説★
javascriptのfetch関数を使い「https://qiita.com/api/v2/items」に対してGETリクエストを行います。

その後、返却された値を自作の「mergeBuffer」関数で結合します。

URL.createObjectURL関数を使い、結合されたデータをファイルをダウンロードします。

＜備考＞
mergeBuffer関数は、このサイトを参考にし作成しています。

Chromeのアドレスバーに「js-get-test.html」のPATHを入力し、「js-get-test.html」を開きましょう。

そうすることで、「js_text」というファイルがダウンロードされます。

js_textの中身を確認して見ると、GETリクエストの結果が結合されていることがわかります。

【まとめ】javascriptでGETリクエストを結合する方法

今回の記事を通して、「javascriptでGETリクエストを結合する方法」をご紹介することで、以下の悩みを解消しました。

★悩み★
・WebHDFSを使ってgetmergeを実現する方法が分からない。
・javascriptでGETリクエストを発行する方法が分からない。
・javascriptでGETリクエストを結合する方法が分からない。

「javascriptでGETリクエストを結合には？と悩んでいるあなた」にこの記事が少しでも役に立てれば幸いです。

コメント