JS学習記録第16回　Async await構文によるWebAPIのデータ取得

こんばんは！
今回はWebAPIの情報をAsync awiatで取得する方法をまとめてみたいとおもいます！

WebAPIとは

WebAPIとはコンピュータプログラムの提供する機能を外部の別のプログラムから呼び出して利用するための手順のことをいいます。
webサイトを作成するときに、例えば、他のサイトの情報を取得したい時とかあるかと思います！
一番あるあるとしてはインスタグラムとかなどですかね。
twitterやfacebookなどはURLを貼り付けるだけで、サイトに反映されますが、インスタグラムはこのwebAPIを使用してデータを取得しないといけません。
ここではそのwebAPIからデータを取得する方法をまとめたいと思います！

今回はネット上にあるテスト用のJSONPlaceholderを使用していきたいと思います！

JSONPlaceholder - Free Fake REST API

サイトを開くと下にResourceという箇所があるので、そこの/postsの情報を取得していきたいと思います！

中には色々の情報があります。

async function api(){
   const res =await window.fetch("https://jsonplaceholder.typicode.com/posts");
   console.log(res);


};

api();

基本的な記述の仕方としてはこうです。
プログラムの初めにasyncと書くことで、非同期処理宣言をすることができます！（合ってるかな。。。）
そして、データを取得したいurlを
await window.fetch("https://jsonplaceholder.typicode.com/posts");
として記述します。
await window.fatct("データを取得したいurl")

consoleで確認してみると、

何かレスポンスが帰ってきました！多分urlの全体の情報だと思います！

次に、以下のように記述して、取得したいデータをとってきます！

async function api(){
   const res =await window.fetch("https://jsonplaceholder.typicode.com/posts");
   const posts = await res.json();
   console.log(posts);


};

api();

const posts = await res.json();
json()というメソッドを使用して以下のようにデータの中身を取得することができます！上の画像と同じ情報が取得できました！

例えば、情報の一番目をとってきたい場合はposts[0]とすると取得することができます！

async function api(){
   const res =await window.fetch("https://jsonplaceholder.typicode.com/posts");
   const posts = await res.json();

   console.log(posts[0]);

};

api();

少し応用！！

応用として、配列の上から５つのtitleを取得したいと思います！
まず、forEach文でループを生成しposts内のtitleの全てを取得します。

async function api(){
   const res =await window.fetch("https://jsonplaceholder.typicode.com/posts");
   const posts = await res.json();

   posts.forEach(function(post){
       console.log(post.title);

   });


};

api();

title部分が取得できました！
そして上から５つなのでif文を使用します。
今回それぞれの配列にid名がついていたので、１から順についていたので、
post.id <= 5としてif文を記述しました。

async function api(){
   const res =await window.fetch("https://jsonplaceholder.typicode.com/posts");
   const posts = await res.json();

   posts.forEach(function(post){
       if(post.id <= 5){
           console.log(post.title)

       }
           
       
       

   });


};

api();

うまく出ました！

Ansys awaitを使用すれば、簡単に外部から情報を取得でき、自身のサイトに組み込むことができそうですね！
色々試してみたいと思いました！