React で Axios を使用したエラー処理のための非同期/待機メソッド
<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>
