LoginSignup
0
0

More than 1 year has passed since last update.

React、async、awaitを使用してapiを叩き初期表示を取得する

Posted at

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0