【React + TypeScript】axios を使って API に接続する
axiosを使ってAPIに接続するメモ。
axios
axios インストール
axios をインストールします。
npm install axios
Get
サンプルは当ブログの記事を取得するようにしています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| 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>
);
}
|
1
2
3
4
5
| import { render } from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
render(<App />, rootElement);
|
Post
ちなみにpost時は以下のようになります。
※サンプルなので実際にコピペしても登録などはされません。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| 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
