React で Axios を使用したエラー処理のための非同期/待機メソッド

Question

Axios を使用してデータを取得しています:

export const getProducts = async () => {
   試す {
       const { data } = await axios.get(`/api/products`)
       データを返す
   } キャッチ (エラー) {
       コンソールログ(エラー)
       エラーを返す
   }
}

すべて問題ありませんが、try ブロック内で http エラーをキャッチする必要があります。たとえば、サーバーへの接続が失われると、Axios は AxiosError オブジェクトを返します。

<ブロック引用>

1. AxiosError {メッセージ: 'リクエストはステータス コード 404 で失敗しました'、名前: 'AxiosError'、コード: 'ERR_BAD_REQUEST'、構成: {…}、リクエスト: XMLHttpRequest,...}
2. コード: "ERR_BAD_REQUEST"
3. 構成: {transition: {…}、アダプター: array(2)、transformRequest: array(1)、transformResponse: array(1)、タイムアウト: 0、 …}
4. メッセージ: 「リクエストはステータス コード 404 で失敗しました」
5. 名前:「AxiosError」
6. リクエスト: XMLHttpRequest {onreadystatechange: null、readyState: 4、タイムアウト: 0、withCredentials: false、アップロード: XMLHttpRequestUpload、 …}
7. 応答: {data: 'nnn<メタ文字...re> を取得できません /api/productsnnn'、ステータス: 404、statusText: 'いいえ ' が見つかりました、ヘッダー: AxiosHeaders、構成: {...},...}
8. スタック: 「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)"
9. [[プロトタイプ]]: エラー

問題は、エラーが発生した場合に、「データの取得中にエラーが発生しました」という div をレンダリングしたいことです。エラーがない場合は、通常の方法で製品テーブルをレンダリングします。

関数を次のように呼び出します。

const productsArr = await getProducts()

productsArr が有効な製品配列であるか、それとも AxiosError であるかを確認するにはどうすればよいですか?

Answer 1

エラーの処理方法は公式ドキュメントで確認できます: https://axios-http.com/docs/handling_errors

応答が受信されない場合は、エラー (axios ドキュメントからコピー) を表示できます。

リーリー

エラー処理境界を使用してコンポーネントをラップできます。エラーが発生した他のコンポーネントをラップするコンポーネントを作成し、componentDidCatch ライフサイクル メソッドを使用できます。これは、try-catch で catch{} を使用するのと同じです。 https://reactjs.org/docs/react-component.html#componentdidcatch。または、一般的な npm パッケージを使用しますhttps://www.npmjs.com/package/react-error-boundary