APIから情報を取得する方法を学んだので、
その知識と今まで学んできたことを総合して簡単なデモページを作成していこうと思います。
デモページの内容：
icanhazdadjokeという、APIから英語のjokeを取得するものを使用します。
ボタンをクリックすると、作成したulの中にAPIから取得したjokeをliとして表示する一覧画面を作成していきます。
こちらでは、作成した内容を要約しながら、作成手順や具体的に使用した関数やロジックの内容をまとめていけたらと思います。
目次：
HTMLファイル
HTMLファイルはシンプルに、h1とbutton、ulだけを用意しています。
また、ulにはidをjokesと付けています。
その他は、app.jsファイルとの接続と、axiosの接続をCDNでしています。
<body>
<h1>クリックでジョーク</h1>
<button>クリック</button>
<ul id="jokes"></ul>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
APIの取得 「JavaScriptファイル」
AXIOSでヘッダーを指定してリクエストを投げる方法について。
通常のリクエストではHTMLが返ってくるだけだが、このicanhazdadjokeAPIでは、
Acceptというヘッダーで値をapplication/json
とすることで、レスポンスをJSONにすることができました。
これをAXIOSを使った場合、どうすればいいでしょうか？
まずは、APIの中身を取得してみます。
const getDadJoke = async() => {
const res = await axios.get('https://icanhazdadjoke.com/');
console.log(res);
}
- getDadJoke関数を作成。非同期処理なので、async、await
- 関数の中では、axios.getでAPIを呼びます。
- resの中身を確認してみます。
getDatJoke()
レスポンスは返ってきていますが、
headersの中身を確認し、content-typeを見ても、text/htmlになっていることを確認できます。
axiosを使って、getリクエストをしたときに、JSONをもらうためにはどうすればいいでしょうか？
A. APIを取得するURLの第二引数にオブジェクトを渡して取得します。
わかりやすいようにconfigという変数の中で定義をして、ヘッダーを含めたリクエストを投げることができます。
const getDadJoke = async() => {
const config = {
headers: {
Accept:'application/json'
}
};
const res = await axios.get('https://icanhazdadjoke.com/',config);
console.log(res);
}
これで、JSONを取得することができました。
また、下記のコードでAPIのジョークの値を取得することができます。
console.log(res.data.joke);
DOMを操作 「JavaScriptファイル」
リクエストの投げ方がわかったので、今度はDOMを操作してみたいと思います。
const jokes = document.querySelector('#jokes');
const newLI = document.createElement('LI');
newLI.append(res.data.joke);
jokes.append(newLI);
- ulのid jokesを取得します。
- liの作成
- liの中に、先ほど取得したjokeを挿入します。
- newLIをjokes(ul)に追加します。
getDatJoke()を実行するたびに、APIから取得したjokeを画面に出力するとに成功しました。
ページを再読み込みすることなく、外にリクエストを投げて中身を更新することができています。
リファクタリング
jokeの取得の関数とjokeの作成の関数を分けてわかりやすいように修正していきます。
const getDadJoke = async() => {
const config = {
headers: {
Accept:'application/json'
}
};
const res = await axios.get('https://icanhazdadjoke.com/',config);
return res.data.joke
}
getDadJoke関数は、res.data.jokeをreturnするように修正します。
const addNewJoke = async() => {
const jokeText = await getDadJoke();
const newLI = document.createElement('LI');
newLI.append(jokeText);
jokes.append(newLI);
}
returnされたres.data.jokeをaddNewJoke関数で使用し、jokeTextに挿入します。
newLIとしてjokeTetxをappendするように修正しました。
クリックイベントのハンドラーの作成
const button = document.querySelector('button');
button.addEventListener('click',addNewJoke);
- button要素の取得
- イベントハンドラーの設定。
2−１. buttonがclickされたときに、 addNewJoke関数が走るように設定します。
ボタンをクリックするたびに、リクエストが飛んで、ulに結果がliとして追加されるようになります。
エラーの処理も記載する
try、catchでエラーの時の処理も記載するように修正していきます。
const getDadJoke = async() => {
try {
const config = {
headers: {
Accept:'application/json'
}
};
const res = await axios.get('https://icanhazdadjoke.coma/',config);
return res.data.joke
} catch (e){
return 'No Jokes Sorry!';
}
}
意図的に取得するAPIのアドレスを適切なものでないものを入力し、エラーを出力させました。
意図したエラーが出力されていることが確認できるため、try、catchの挙動が適切なものであることを確認できます。