React에서 Axios를 사용하여 오류 처리를 위한 비동기/대기 방법
<p>저는 데이터를 얻기 위해 Axios를 사용하고 있습니다:</p>
<pre class="brush:php;toolbar:false;">export const getProducts = async () =>
노력하다 {
const { data } = axios.get(`/api/products`)을 기다립니다.
데이터 반환
} 잡기 (오류) {
console.log(err)
반품 오류
}
}</pre>
<p>모든 것이 괜찮지만 try 블록 내에서 http 오류를 잡아야 합니다. 예를 들어, 서버와의 연결이 끊어지면 Axios는 AxiosError 객체를 반환합니다. </p>
<인용문>
<올>
<li>AxiosError {message: '상태 코드 404로 요청이 실패했습니다', 이름: 'AxiosError', 코드: 'ERR_BAD_REQUEST', 구성: {…}, 요청:
XMLHttpRequest,...}</li>
코드: "ERR_BAD_REQUEST"
<li>구성: {전환: {…}, 어댑터: 배열(2), 변환 요청: 배열(1), 변환 응답: 배열(1), 시간 초과: 0,
…}</li>
<li>메시지: "상태 코드 404로 인해 요청이 실패했습니다."</li>
이름: "AxiosError"
<li>요청: XMLHttpRequest {onreadystatechange: null, ReadyState: 4, 시간 초과: 0, withCredentials: false, 업로드: XMLHttpRequestUpload,
…}</li>
<li>응답: {data: 'nnn<메타문자...re>를 검색할 수 없습니다.
/api/productsnnn', 상태: 404, statusText: '아니요
' 발견, 헤더: AxiosHeaders, 구성: {...},...}</li>
<li>Stack: "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>
[[프로토타입]]: 오류
</ol>
</인용문>
<p>문제는 오류가 있는 경우 "데이터를 가져오는 동안 오류가 발생했습니다"라는 div를 렌더링하고 싶다는 것입니다. 오류가 없으면 일반적인 방법으로 제품 테이블을 렌더링합니다. </p>
<p>저는 다음과 같이 함수를 호출합니다.</p>
<pre class="brush:php;toolbar:false;">const productsArr = wait getProducts()</pre>
<p>productArr이 유효한 제품 배열인지 AxiosError인지 어떻게 알 수 있나요? </p>
