javascript fetch APIでjsonデータを取得する

今までサーバー上のデータをajaxで取得するには、jQueryなどのライブラリを使用していました。

調べてみると、fetch APIが実装されているそうで。
お疲れさまXMLHttpRequest、こんにちはfetch
fetch API でも POST したい!

ここで公開したKongの管理APIのデータをfetchで取得してみます。
Kong 管理用apiの外部公開


サンプル



見様見真似でこんなサンプルを作成してみました。


  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Sample</title>
  6. <script type='text/javascript'>
  7. function test_click() {
  8.     const url = 'http://192.168.1.101:8001/';
  9.     fetch(url).then(function(response) {
  10.         return response.text();
  11.     }).then(function(text) {
  12.         var result = document.querySelector('#result');
  13.         result.innerHTML = text;
  14.     });
  15. };
  16. </script>
  17. </head>
  18. <body>
  19.     <h3>fetchテスト</h3>
  20.     <input type="button" id="test" value="テスト" onclick="test_click()">
  21.     <div id="result">
  22. </body>
  23. </html>




ボタンをクリックすると、あっさりデータが取得できました。

816_01.png



jsonで取得




  1. response.json()



に変更するだけです。


  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Sample</title>
  6. <script type='text/javascript'>
  7. function test_click() {
  8.     const url = 'http://192.168.1.101:8001/';
  9.     fetch(url).then(function(response) {
  10.         return response.json();
  11.     }).then(function(json) {
  12.         var result = document.querySelector('#result');
  13.         result.innerHTML = json.version;
  14.     });
  15. };
  16. </script>
  17. </head>
  18. <body>
  19.     <h3>fetchテスト</h3>
  20.     <input type="button" id="test" value="テスト" onclick="test_click()">
  21.     <div id="result">
  22. </body>
  23. </html>



816_02.png




IEとSafari



fetch API、IEやSafariでは実装されていないそうです。
※手元に環境がないため試せず。

IEやSafariにも対応するには、このライブラリを使用するのがよさげ。
https://github.com/github/fetch

CDNで配信されているので、こちらを使用することにします。
https://cdnjs.com/libraries/fetch


  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Sample</title>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
  7. <script type='text/javascript'>
  8. function test_click() {
  9.     const url = 'http://192.168.1.101:8001/';
  10.     fetch(url).then(function(response) {
  11.         return response.json();
  12.     }).then(function(json) {
  13.         var result = document.querySelector('#result');
  14.         result.innerHTML = json.version;
  15.     });
  16. };
  17. </script>
  18. </head>
  19. <body>
  20.     <h3>fetchテスト</h3>
  21.     <input type="button" id="test" value="テスト" onclick="test_click()">
  22.     <div id="result">
  23. </body>
  24. </html>






【参考URL】

お疲れさまXMLHttpRequest、こんにちはfetch
fetch API でも POST したい!
関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ