<p>Axios を使用してデータを取得しています: </p> <pre class="brush:php;toolbar:false;">export const getProducts = async () => { 試す { const { data } = await axios.get(`/api/products`) データを返す } キャッチ (エラー) { コンソールログ(エラー) エラーを返す } }</pre> <p>すべて問題ありませんが、try ブロック内で http エラーをキャッチする必要があります。たとえば、サーバーへの接続が失われると、Axios は AxiosError オブジェクトを返します。 </p> <ブロック引用> <ol> <li>AxiosError {メッセージ: 'リクエストはステータス コード 404 で失敗しました'、名前: 'AxiosError'、コード: 'ERR_BAD_REQUEST'、構成: {…}、リクエスト: XMLHttpRequest,...}</li> <li>コード: "ERR_BAD_REQUEST"</li> <li>構成: {transition: {…}、アダプター: array(2)、transformRequest: array(1)、transformResponse: array(1)、タイムアウト: 0、 …}</li> <li>メッセージ: 「リクエストはステータス コード 404 で失敗しました」</li> <li>名前:「AxiosError」</li> <li>リクエスト: XMLHttpRequest {onreadystatechange: null、readyState: 4、タイムアウト: 0、withCredentials: false、アップロード: XMLHttpRequestUpload、 …}</li> <li>応答: {data: 'nnn<メタ文字...re> を取得できません /api/productsnnn'、ステータス: 404、statusText: 'いいえ ' が見つかりました、ヘッダー: AxiosHeaders、構成: {...},...}</li> <li>スタック: 「AxiosError: 解決中にリクエストがステータス コード 404n で失敗しました」 (webpack-internal:///./node_modules/axios/lib/core/settle.js:24:12)n XMLHttpRequest.onloadend 内 (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:117:66)"</li> <li>[[プロトタイプ]]: エラー</li> </ol> </blockquote> <p>問題は、エラーが発生した場合に、「データの取得中にエラーが発生しました」という div をレンダリングしたいことです。エラーがない場合は、通常の方法で製品テーブルをレンダリングします。 </p> <p>関数を次のように呼び出します。</p> <pre class="brush:php;toolbar:false;">const productsArr = await getProducts()</pre> <p>productsArr が有効な製品配列であるか、それとも AxiosError であるかを確認するにはどうすればよいですか? </p>