More than 3 years have passed since last update.

JavaScript勉強の記録その25:fetchでAPI叩いてみた

JavaScript

Last updated at 2020-03-29Posted at 2020-03-29

#やりたいこと
GithubのAPIを叩いて、GithubのIDを画面に出したい。

#実装方法
１：　HTMLの入力欄に自分のIDを入力
２：　ボタンをクリック
３：　APIをGETで叩いて、JSON形式で取得
４：　h１要素として表示させる

#用意したHTML
入力欄とボタンのみ用意

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JavaScript Basics</title>
</head>
<body>
  <input></input>
  <button>Get My GitHub ID</button>
  <h1></h1>
  <script src="main.js"></script>
</body>
</html>

#用意したjavascriptファイル
APIを叩くと色々な値が返ってくるのですが、loginというキーがGitHubのIDになっています（console.logをしてあげるとよくわかる）。Fetchは何となくノリで書いたけど、動いたからOK。

こういったAjaxの実装をする時、普通はリクエストが成功したかどうか判定して、判定ごとに違う処理をしますがここでは割愛（というかpromiseよくわかってない）。

main.js

'use strict';
{
 const text = document.querySelector('input');
 
 document.querySelector('button').addEventListener('click', () => {
   let url = `https://api.github.com/users/${text.value}`;

   fetch(url).then(function(response) {
     response.json().then(function(json) {
       document.querySelector('h1').textContent = json.login;
     });
   });
 });


}

動画：　https://i.gyazo.com/7dd2e09d16fc503b0b8a9b7aa06d0bf9.mp4

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up