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();
    }, []);