2022/4/20

【React + TypeScript】axiosを使ってAPIに接続する

【React + TypeScript】axios を使って API に接続する

axiosを使ってAPIに接続するメモ。 axios

axios インストール

axios をインストールします。

npm install axios

Get

サンプルは当ブログの記事を取得するようにしています。

import axios from "axios";
import { useEffect, useState } from "react";

type Artical = {
  id: number;
  title: string;
  uri: string;
  description: string;
  section: string;
  tags: string[];
}

async function getArticals(): Promise<Artical[]> {
  try {
    // URL
    const url = "https://c-a-p-engineer.github.io/index.json";

    const response = await axios.get<Artical[]>(url);
    console.log(response);
    return response.data;
  } catch (error) {
    console.error(error);
    return []
  }
}

export default function App() {
  const [articals, setArticals] = useState<[] |Artical[]>([]);

  useEffect(() => {
    (async () => {
      const articals = await getArticals();
      setArticals(articals);
    })();
  }, []);

  return (
    <div className="App">
    <h1>Blog Articals</h1>
      <ul>
        {articals.map((artical: Artical) => (
          <li key={artical.id.toString()}>{artical.title}</li>
        ))}
      </ul>
    </div>
  );
}

import { render } from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Post

ちなみにpost時は以下のようになります。 ※サンプルなので実際にコピペしても登録などはされません。

async function getArticals(): Promise<Artical> {
  try {
    // URL
    const url = "https://c-a-p-engineer.github.io/index.json";
    const response = await axios.post<Artical>(url, {
          // POSTデータ
          title: "タイトル";
          description: "説明";
    });
    console.log(response);
    return response.data;
  } catch (error) {
    console.error(error);
    return []
  }
}

参考

React Typescript Axios