JavaScript | webAPIを叩く

今回はJavaScriptで初めてwebAPIを叩いたので書き残していきます。

async await構文
- promiseから情報を取得する
- JSON()メソッド
参考元

async await構文

今回はasync await構文でwebAPIを叩きにいきます。
早速叩いてみましょう。

今回は下記のAPIを叩きにいきます。

jsonplaceholder.typicode.com

 {
  function callApi() {
    const res = fetch("https://jsonplaceholder.typicode.com/users");
    console.log(res);
   }
   
   callApi();
 }

{

function callApi() {

const res = fetch("https://jsonplaceholder.typicode.com/users");

console.log(res);

}

callApi();

}

consoleを確認してpromiseが返ってきていればOKです。
この時点ではfetchを使うとpromiseが返ってくるというを覚えます。

promiseから情報を取得する

ここから返ってきたpromiseから情報を取得します。
まずfunctionの前にasyncを追加します。これにより関数が非同期関数となり、awaitが使えるようになります。

 {
  async function callApi() {
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    console.log(res);
   }
   
   callApi();
 }

{

async function callApi() {

const res = await fetch("https://jsonplaceholder.typicode.com/users");

console.log(res);

}

callApi();

}

これでconsoleを見ると今度はResponseが返ってきます。

JSON()メソッド

ここからさらに情報取得していくためにJSON()メソッドを使用していきます。

 async function callApi() {
   const res = await fetch("https://jsonplaceholder.typicode.com/users");
   const users = await res.json();
  console.log(users);
  }
  
  callApi();