React에서 Axios를 사용하여 오류 처리를 위한 비동기/대기 방법

Question

<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>

Answer 1

공식 문서에서 오류 처리 방법을 확인할 수 있습니다: https://axios-http.com/docs/handling_errors

응답이 없으면 오류를 볼 수 있습니다(axios 문서에서 복사)

으아악

오류 처리 경계로 구성요소를 래핑할 수 있습니다. 오류가 발생한 다른 구성요소를 래핑하는 구성요소를 생성하고 이에 대해 componentDidCatch生命周期方法，这与在try-catch中使用catch{}를 사용할 수 있습니다. https://reactjs.org/docs/react-comComponent.html#comComponentdidcatch. 또는 인기 있는 npm 패키지를 사용하세요 https://www.npmjs.com/package/react-error-boundary