【React】APIの使用

axiosをインポート

import axios from 'axios';

jsonデータの扱い方

・オブジェクト.key名でデータの取得が可能
・下の例だとresponse.data.imageで画像の取得が可能

const clicked = () =>{
  // axios.get(URL)でapiからgetしてjsonを取得
  axios.get('https://yesno.wtf/api')
  // thenで成功した場合の処理をかける
  .then(response => {
    console.log('image:', response.data.image);     // response body.
    setBody(response.data.image);
    // catchでエラー時の挙動を定義する
  }).catch(err => {
    console.log('err:', err);
  });
}

・https://yesno.wtf/apiでは下記のデータが返ってくる。

{
    "answer":"no",
    "forced":false,
    "image":"https://yesno.wtf/assets/no/8-5e08abbe5aacd2cf531948145b787e9a.gif"
}

コード全文

import './App.css';
import React from 'react';
// axiosで通信を行う
import axios from 'axios';

// API通信Getのやり方（axiosを使用）
function App() {
 
 // apiの情報をstate管理
 const [statusTxt, setStatus] = React.useState('loading');
 const [statusBody, setBody] = React.useState('loading');
 const [statusAnswer, setAnswer] = React.useState('loading');

 // onClickでclickedが発火
 const clicked = () =>{

   // axios.get(URL)でapiからgetしてjsonを取得
   axios.get('https://yesno.wtf/api')
   // thenで成功した場合の処理をかける
   .then(response => {
     console.log('status:', response.status); // 200
     console.log('body:', response.data);     // response body. 
     console.log('image:', response.data.image);     // response body. 
     setStatus(response.status);
     setBody(response.data.image);
     setAnswer(response.data.answer);

     // catchでエラー時の挙動を定義する
   }).catch(err => {
     console.log('err:', err);
   });

 }
 
 return (
   <>
   <div className="App">
     <div className="">
       <br></br>
       <br></br>
       <p>下のボタンをクリックしてください。</p>
       <button onClick={()=>clicked()}>Click</button>
       <h1>answer:{statusAnswer}</h1>
       <img src={statusBody}></img>
       <h1>status:{statusTxt}</h1>
       <h1>body:{statusBody}</h1>
     </div>
   </div>
   </>
 );
}

export default App;