AXIOS 오류의 본문을 잡는 방법

AXIOS 오류 메시지에 대한 정보를 얻기 위해 웹을 검색하고 있으며 이를 사용하는 방법을 알고 싶다면 제대로 찾아오셨습니다.

TLTR; Find the code snippets in the following section

이 주제에 대해 웹에서 검색하면 다음과 같은 내용을 찾을 수 있습니다.

catching error body using axios post

Unable to catch the body of error

JS Axios – how to get response body in event of error?

How to see axios error response JSON in React

목록은 계속될 수 있지만 모두 샘플 간단한 질문을 요구합니다.

How can someone get the actual error information coming from a bad request made with AXIOS.

이 게시물에서는 많은 사람들이 정보를 요청하는 "이유"와 이 정보를 찾을 수 있는 "방법"에 대한 정보를 제공할 것입니다.

왜 이렇게 많은 사람들이 요구하는지

API로 작업한 적이 있다면 요청이 항상 계획대로 진행되지 않는다는 것을 완벽하게 알고 있습니다. 항상 200의 상태로 멋진 응답을 받기를 희망하지만 항상 그런 것은 아닙니다.

많은 경우에 요청 상태가 일종의 오류(400, 500)를 반환할 수 있으며, 이러한 상황이 발생하면 읽을 수 있는 오류 메시지를 표시할 수 있기를 바랍니다.

axios.get('EndpointWithAuthorizedError')
    .then((response) => {})
    .catch((error) => {
        console.log(error);
    })

불행히도 위의 내용이 의미 있는 오류와 함께 실패하더라도 catch 문에 의해 전달된 변수가 "문자열"유형인 것처럼 보이기 때문에 콘솔에서 여전히 이를 볼 수 있습니다.

Error: Request failed with status code 401

이것이 실제로 많은 사람들이 도움을 요청하도록 "강요받는"주된 이유입니다.

AXIOS 오류 메시지를 처리하는 방법

오류 메시지를 처리할 때는 실제로 마법이 없습니다. 사실 캐치는 catch 문으로 받은 변수가 문자열처럼 보이지만 실제로는 그렇지 않다는 사실에 있다.

AXIOS 오류 메시지는 실제로 어떤 종류의 오류가 있는지에 따라 3가지 다른 구조를 반환할 수 있습니다.

요청을 설정하는 동안 오류가 발생했습니다.

이 오류는 AXIOS 요청을 설정할 때 실제 실수를 한 경우에 발생할 수 있습니다. 전달된 데이터 또는 구성 설정과 관련된 것일 수 있습니다.

이런 일이 발생하면 catch의 message 매개변수에 액세스하여 필요한 정보를 실제로 찾을 수 있습니다.

axios.get('wrongSetup')
    .then((response) => {})
    .catch((error) => {
        console.log(error.message);
    })

//or using destructuring
axios.get('wrongSetup')
    .then((response) => {})
    .catch(({message) => {
        console.log(message);
    })

응답 없음 – 네트워크 오류

이 시나리오는 요청에 응답이 전혀 없을 때 발생합니다. 이는 URL이 올바르지 않거나 수신 서버가 다운된 경우 발생할 수 있습니다.

이런 일이 발생하면 request 매개변수에 액세스하는 요청 bu에 대한 추가 정보에 액세스할 수 있습니다. 그러면 실제 "요청"정보가 반환됩니다.

axios.get('network error')
     .then((response) => {})
     .catch((error) => {
         console.log(error. request );
     })
//or using destructuring
 axios.get('network error')
     .then((response) => {})
     .catch(({ request ) => {
         console.log( request );
     })

오류 상태와 함께 반환된 요청

이것은 웹 애플리케이션이 제대로 작동하는지 확인하기 위해 관리해야 하는 가장 일반적이거나 더 구체적으로 한 가지 유형의 "오류"중 하나입니다.

이 범주에 맞는 수백 개의 상태 코드가 200( https://developer.mozilla.org/en-US/docs/Web/HTTP/Status )과 다릅니다. 가장 중요한 것을 아래에 나열하겠습니다.

400: 잘못된 요청

401: 무허가

403 : 금지

404: 찾을 수 없음

500: 내부 서버 오류

502 : 나쁜 게이트웨이

위와 같은 상황이 발생하면 요청에 대해 자세히 알고 싶습니다. 이 경우 더 많은 정보가 제공됩니다: data , status , header .

axios.get('errorStatus')
     .then((response) => {})
     .catch((error) => { 
         console.log(error.response.data);  
         console.log(error.response.status);  
         console.log(error.response.headers); 
     })

//or using destructuring
 axios.get('errorStatus')
     .then((response) => {})
     .catch(({ response }) => { 
         console.log(response.data);  
         console.log(response.status);  
         console.log(response.headers);  
     })

위의 코드를 사용하면 요청에 대한 응답에 대해 필요한 모든 정보를 얻을 수 있습니다. 여기에는 상태 코드, 헤더 및 서버가 요청과 함께 보낸 마지막 데이터가 포함됩니다.

모든 종류의 API를 사용할 때 data 매개변수에는 일반적으로 개발 목적으로 사용되지만 최종 사용자에게 보여주기에도 좋은 필수 정보가 포함됩니다.

시간을 절약할 수 있기를 바라며 이 게시물을 개선하고 미래의 독자를 돕기 위해 언제든지 의견을 말하거나 제안을 제공하십시오.