【React】axiosのgetを使ってみる

細かい書き方は正しくないかもしれませんが、一旦getできたのでメモとして。
Someというコンポーネントを作成し、その中でaxios.get()を使っています。

Some.tsx

import React from 'react';
import axios from 'axios';

interface SomeResponse {
  id: number;
  title: string;
  ...
}

export default class Some extends React.Component {
  clicked() {
    axios.get<SomeResponse[]>('https://hogehoge.com/api/fugafuga')
      .then(res => {console.table(res.data)})
      .catch(error => {console.log(error)})
  }

  render() {
    return (
      <button onClick={this.clicked}>click</button>
    );
  }
}

取得したデータの型をSomeResponseという名前でinterfaceとして定義しておき、
axios.getの後ろにジェネリックとして渡します。

axios.get()の返り値はPromise型なので、後ろに.then()や.catch()を付けられます。

http通信のレスポンスにはdataプロパティが含まれているので、
それをconsole.table()に渡すことでデベロッパーツールのコンソールに表形式で出力します。