アプリケーションが止まらないようにエラーハンドリングをしたい。

Question

解決済

1

回答数

アプリケーションが止まらないようにエラーハンドリングをしたい。

2021/08/27 17:29更新

初心者 javascript

JavaScriptでクイズアプリを作成しています。

下記のコードに、アプリケーションが止まらないように『try catch文』を使用したエラーハンドリングをしたいのですが、書き方がわかりません。下記の参考サイトを読んで、実装したのですが、思うような結果が出ません。何方かアドバイスをお願いします。

書きたい『try catch文』

APIとの通信はAPI側に以上があったりネットワークの接続状況などでAPIとの通信に失敗する可能性があるなどの例外が発生する可能性がある。

参考サイト

JavaScriptのtry~catch文で例外処理をする方法｜TECH PLAY Magazine ［テックプレイマガジン] (https://techplay.jp/column/629)

const fetchQuizData = async (index) => {
    titleElement.textContent = "取得中";
    questionElement.textContent = "少々お待ち下さい";

    const response = await fetch(API_URL);
    const quizData = await response.json();
    const quizInstance = new Quiz(quizData);

    setNextQuiz(quizInstance, index);
  };

確認したいことがあったら質問者に確認してヤァ！

回答

yusukeM

2021/08/27

ベストアンサー

返信

geno

未経験からフロントエンジニアへの転職を目指し、プログラミングを勉強中。 2023年より受託開発企業にて働く。

Answer 1

こんな感じで書けると思います

const fetchQuizData = async (index) => {
    titleElement.textContent = '取得中'
    questionElement.textContent = '少々お待ち下さい'

    let quizData = undefined

    try {
        const response = await fetch(API_URL)
        quizData = await response.json()
    } catch (error) {
        console.log(error)
    }

    if (quizData) {
        const quizInstance = new Quiz(quizData)
        setNextQuiz(quizInstance, index)
    } else {
        // クイズデータがないときの処理
    }
}

最初にquizDataにundefinedを入れておくことによって条件分岐が可能になります

    if (quizData) {
        const quizInstance = new Quiz(quizData)
        setNextQuiz(quizInstance, index)
    } else {
        // クイズデータがないときの処理
    }

fetch関数が成功してればquizDataに何かしらの値が入りif文true側の処理に行きます fetch関数が失敗するとquizDataはundefinedのままなのでif文false側の処理に行きます