今回の記事はTypeScriptのReactでaxiosを非同期で実行する方法をご紹介します。TypeScriptとReact共に初心者ですので、初心者目線で分かりやすく記載していきます。是非参考にして下さい。
Reactプロジェクトにaxiosインストール
「node.js」等の環境はインストール済みということで話を進めます。
npx create-react-app sample --template typescriptまずは上記で「sample」プロジェクトを作成します。
cd sample
npm startこれでローカルサーバが立ち上がって初期画面が表示できます。
ではここにaxiosをインストールしましょう。「ctrl」+「c」でサーバを止めプロジェクトの中、今回で言うと「sample」プロジェクトの階層で下記を実行します。
npm install axiosTypeScriptでaxiosを使ってJson取得
http通信を行う対象のURLはフリーのAPIの下記で行います。
https://jsonplaceholder.typicode.com/posts?id=1
ブラウザで開くと取得できるJsonが表示できます。このサイトはレスポンス結果を見る分には非常に便利です。
では実際にaxiosを使ってみましょう。
import axios from 'axios';
interface json {
userId:number,
id:string,
title:string,
body:string
}
const Axios_sample = ():json[] => {
// エラー用に空データを準備
let return_Json:json[] = [];
axios
.get<json[]>('https://jsonplaceholder.typicode.com/posts?id=1')
.then((results) => {
return_Json = results.data;
console.log('通信成功');
console.log(return_Json);
console.log(return_Json[0].userId);
console.log(return_Json[0].id);
console.log(return_Json[0].title);
console.log(return_Json[0].body);
// 成功したら取得できたデータを返す
return return_Json;
})
.catch((error) => {
console.log('通信失敗');
console.log(error.status);
// 失敗したときは空のjsonを返す
});
return return_Json;
};
function App() {
//ここでaxiosを含む関数を使用
Axios_sample()
return (
<div className="App">
何もないページ
</div>
);
}
export default App;簡単に解説します。
ページとして表示されるのは何もないページです。axiosで取得した結果をコンソールに出力しているのでローカルページが表示されたらそこでGoogleChromeであれば「検証」、Safariであれば「Webインスペクタ」などからhtml要素をみれる画面に移動します。
そこで「コンソール」のタブを開くとページを取得した際のコード上のコンソールなどを確認することができます。
肝心のaxiosの部分みていきます。
const Axios_sample = ():json[] => {
// エラー用に空データを準備
let return_Json:json[] = [];
axios
.get<json[]>('https://jsonplaceholder.typicode.com/posts?id=1')
.then((results) => {
return_Json = results.data;
...(省略)...
// 成功したら取得できたデータを返す
return return_Json;
})
.catch((error) => {
...(省略)...
});
return return_Json;
};流れとしては、「.get」でinterfaceの型に戻り値を当てこめて取得し、「.then」で「.get」処理完了後に処理を記載しています。
「.then」の後には「console.log」でコンソールに取得したJsonを出力しています。こちらのコンソールの確認方法はブラウザの検証機能（Chrome・edgeは検証、SafariはWebインスペクタの表示など）で下記から確認できます。
上記の場合、値を取得した後に「.then」が走るというのは非同期的な動きですが、関数自体で見ると「.get」処理が終わる前に、下の「return」でページは返されています。
そのため非同期で処理を行う必要がある場合もあると思うのでそちらもご紹介しておきます。
TypeScriptでaxiosを使って非同期でJson取得
import axios from 'axios';
interface json {
userId:number,
id:string,
title:string,
body:string
}
function App() {
useEffect(() => {
(async () => {
await axios
.get<json[]>('https://jsonplaceholder.typicode.com/posts?id=1')
.then((results) => {
console.log('通信成功');
console.log(results.data);
console.log(results.data[0].userId);
console.log(results.data[0].id);
console.log(results.data[0].title);
console.log(results.data[0].body);
console.log(results.data);
})
.catch((error) => {
console.log(error);
});
console.log('非同期結果出力完了');
})();
}, []);
return (
<div className="App">
何もないページ
</div>
);
}
これでブラウザで再度コンソールを確認すると非同期で取得できています。画面への表示などに展開していきましょう。
少し解説をするなら「useEffect」の部分で非同期でデータを取得しているという部分です。この「useEffect」に関しては別記事でご紹介しますのでそちらをご参照ください。
では今回の記事は以上です。他にも多数のTypeScriptや勉強中のReactに関する記事を記載しています。是非興味があればサイト内見ていって下さい。
コメント