reactで一覧ページのapiを呼び出しasync、await初期値をを使用し初期値を呼び出し保存するまでをまとめました。
処理の流れ
①useEffectを使用してページ遷移した最初に一覧データ取得のAPIを呼び出す。
②呼び出したデータをuseState(一覧データを保管する)に格納する。
③エラーの場合エラーコード毎に処理を記述する。
useEffect(() => {
//ローディング開始
setIsLoading(true);
async function fetchData() {
try {
//正常にデータ取得された時の処理
const response = await axios.get('apiのurlを記述');
let posts_arr;
//stringをjsonに変更
posts_arr = JSON.parse(response.data);
//一覧データに格納
setPosts(posts_arr.data);
} catch (e) {
//エラーの場合エラーコード毎に処理を記述する。
今回はコンソールにエラー内容とエラー番号を出力しているが
実務では実際の処理を記述する
if (e.response.status === 400) {
console.log(e)
console.log("400")
} else if (e.response.status === 401) {
console.log(e)
console.log("401")
} else if (e.response.status === 422) {
console.log(e)
console.log("400")
} else if (e.response.status === 403) {
console.log(e)
console.log("403")
} else if (e.response.status === 404) {
console.log(e)
console.log("404")
} else if (e.response.status === 500) {
console.log(e)
console.log("500")
} else {
console.log(e)
console.log("例外")
}
}
}
fetchData();
}, []);