나는 정확히 같은 환경을 가지고있다. 이 시도:

axios.post('/formulas/create', {
    name: "",
    parts: ""
})
.then(response => { 
    console.log(response)
})
.catch(error => {
    console.log(error.response)
});

에서 수정 console.log(error) 에 console.log(error.response) 에서 catch .

전역 인터셉터를 사용하고 error.response 만 거부할 수도 있습니다. 문제는 console.log 가 오류를 출력하려고 할 때 개체 구조가 아닌 문자열 표현이 인쇄되어 .response 속성이 표시되지 않는다는 것입니다.

response 속성만 거부하는 방법이 궁금하신 분들을 위해 다음과 같이 합니다.

axios.interceptors.response.use((response) => {
    return response;
}, function (error) {
    // Do something with response error
    if (error.response.status === 401) {
        console.log('unauthorized, logging out ...');
        auth.logout();
        router.replace('/auth/login');
    }
    return Promise.reject(error.response);
});

중요한 부분은 return Promise.reject(error.response);

들여쓰기 또는 축소하는 동안 위의 솔루션이 JS 파일 구문을 엉망으로 만드는 경우 동일한 결과를 산출합니다. :)

.post('ajax/register/otp', this.registerData)
.then(function (response) {
       return otpSent(response)
})
.catch(function (error) {
      console.log(error.response);
 });

@gopal-g 저에게 정의되지 않았습니다.

@pedro-mass 이 경우 서버 측에서 응답이 없을 수 있습니다. 내 시나리오에서 오류가 발생했을 때 내 응답은 JSON이었습니다. error.response 사용하여 응답을 얻을 수 있었습니다.

@gopal-g 개발 도구에서 네트워크 탭을 보고 있으면 응답을 볼 수 있습니다. 차이가 있다면 401입니다.

@pedro-mass와 동일한 오류가 있습니다.

여기 내 코드가 있습니다

async function test () {
try {
  let res = await axios.get('/xxxxx/xxxx')

} catch (e) {
  console.log(e.response) // undefined
}
}

"error.response"를 사용하면 작동하지 않습니다. 문제는 데이터베이스 서버의 연결을 끊고 웹 서버에서 오류 500을 반환했을 때 발생합니다.

개발 도구의 네트워크 탭

응답 코드: 500
응답 본문:

{
  "error": {
    "statusCode": 500,
    "name": "Error",
    "message": "read ETIMEDOUT",
    "code": "ETIMEDOUT",
    "errno": "ETIMEDOUT",
    "syscall": "read",
    "stack": "Error: read ETIMEDOUT\n    at exports._errnoException (util.js:1050:11)\n    at TCP.onread (net.js:582:26)"
  }
}

크롬 콘솔 오류:

Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js:15)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

버전

"axios": "^0.15.3"

catch 캐치가 있습니다. 요청이 이루어 지기 전에 오류가 발생하면 catch 에는 err.response 속성이 없습니다. 왜냐하면... 음.. . 응답이 없습니다. 따라서 catch 는 모든 오류를 포착 @fabiorecife 의 경우와 같이 네트워크 장애로 인해 응답이 없는 경우 마찬가지 입니다. 항상 그런 것은 아니므로 err 를 HTTP 오류로 취급하지 마십시오.

@ alsofronie 그래서 예를 들어 413과 같은 비행 전 실패와 같이 선호하는 처리 방법(다른 것과 구별)은 무엇입니까?

비슷한 문제가 발생합니다. Chrome devtools에 401 가 표시되고 응답은 {"message":"Identity token has expired"} 이고 저는 catch( (error) => {...}) 이지만 error.response는 비어 있습니다. GET 와 연결된 선행 OPTIONS 호출의 상태가 200 이기 때문인지 궁금합니다. 이 경우 어떻게 해야 하며 401 상태 코드를 검색할 수 있는 올바른 위치는 어디입니까?

@robbiemu 제 생각에는 이미 문서화되어 있다고 생각합니다: https://github.com/axios/axios#handling -errors

@mrchief 이것 에 대해 감사드립니다. 다시 한 번 error.response 개체가 있지만 필드는 undefined 이고 response 내부의 값에 대한 모든 호출입니다.

@paolavness 여기에 언급하는 대신 새 문제를 여는 것이 좋습니다. 많은 시계 폐쇄 문제가 없습니다. 아니면 StackOverflow에 물어볼 수도 있습니다.

@mrchief 아 이게 닫혔

나는 같은 문제가 있었다. 궁극적으로 오류 코드를 401에서 403으로 변경했고 모든 것이 예상대로 작동했습니다. 빈 오류 개체에 대한 이유를 추측하고 있으며 결과 자바스크립트 오류는 401 오류에 대한 설명서에서 찾은 이 명령문과 관련이 있습니다.

"[A 401 오류] 응답에는 요청된 리소스에 적용할 수 있는 챌린지가 포함된 WWW-Authenticate 헤더 필드가 포함되어야 합니다."

따라서 401 오류를 활용하려면 www-authenticate 헤더 필드를 포함해야 합니다. 이 작업을 수행하지 않으려면 403 오류를 사용하십시오.

좋은 아침입니다. 이 문제가 있었지만 서버에서 cors를 활성화하도록 아파치 구성을 변경하여 수정했습니다. 아래 링크를 살펴보세요

https://enable-cors.org/server_apache.html

console.log(JSON.stringify(error)) 로만 모든 응답을 디버그할 수 있습니다.

axios.post(URL)
.then((응답) => {
// 무엇
})
.catch((응답) => {
if (response.status == 정의되지 않음) {
경고('무단')
}
})

@fabiorecife 에서 설명한 것과 똑같은 문제가

.catch(error=>{
let errorObject=JSON.parse(JSON.stringify(error));
console.log(errorObject);
dispatch(authError(errorObject.response.data.error));
})

그러면 errorObject 변수에 예상된 결과가 생성됩니다.

@petruscurtu 나도 같은 문제가 있습니다! 그것은 나를 위해 작동하지 않습니다!

나는 그것이 'no Access-control-allow-origin'을 던지는 이유를 모르지만 서버가 그것을 설정했습니다! 응답 헤더는 정상입니다

해결되었습니다. 인증 API가 Access-control-allow-origin이 있어야 하는 올바른 헤더에 응답하지 않았습니다.

@luxueyan 서버에서 CORS를 처리하는 방법을 모르기 때문에 문제가 무엇인지 모르겠습니다. axios에 관한 한 콘솔 출력에서 ​​구성 및 요청 개체를 볼 수 있습니다. 나는 당신이 그 출력을 확인해야한다고 생각합니다. 서버가 다시 보내는 응답 형식과 관련이 있을 수 있습니다.

@luxueyan Access-control-allow-origin 을 http://localhost:8081 로 설정한 것 같습니다(이 주소가 http://10.31.143.32:8080 서버에 설정되어 있다고 가정). URL이 무엇인지 확인할 수 있습니까? 이 프로젝트를 실행하고 있습니까? http://localhost:8081 입니까? 그렇지 않으면 포트 번호가 달라도 CORS 도메인 규칙을 위반하는 것입니다.

@petruscurtu 응답 인터셉터에서 출력은 'JSON.parse(JSON.stringify(error))'입니다. 응답 속성이 없습니다

@chiefie 다른 ajax API가 올바른 콘텐츠에 응답할 수 있기 때문에 'Access-control-allow-origin' 설정이

업데이트! 그것은 서버 API 오류였습니다. 헤더에 cors 설정이 없었습니다. 이제 잘 작동합니다.

@juliano-barros 감사합니다. 교차 출처 때문이었습니다. 이제 모든 ajax 요청이 제대로 작동합니다.

이 원시 오류는 서버에 연결할 수 없거나 CORS가 무효화될 때마다 발생합니다.
error.response 는 undefined 입니다.

방금 메시지, 상태 및 응답 데이터를 포함하지만 항상 동일한 구조를 따르는 IntegrationError를 생성했습니다. 이렇게 하면 처리에서 axios/raw 오류를 분리할 수 있습니다.

Axios 여러분, 이것은 error.response 포함하여 HTTP 오류여야 합니다.
위와 같이 확인할 수 있습니다

어제는 이 문제의 1주년이 되는 날이었습니다. 이 시점에서 "고정"되거나 "비 문제"로 간주됩니까?

@frostshoxx 그래서 나는 이것이 "비문제"라고 생각합니다. 다른 모든 사람들과 같은 문제를 겪고 있지만 이제 무슨 일이 일어나고 있는지 이해하고 이것이 버그나 문제가 아니라 세상이 작동하는 방식이라는 것을 알 수 있습니다.

혼란스러워하는 모든 사람들을 위해(그리고 이 문제가 1년이 된 것을 축하하기 위해) 무슨 일이 일어나고 있으며 서버 응답을 받는 방법을 설명하겠습니다.

어떻게 여기까지 왔습니까?

.catch() 황무지를 만나는 데에는 여러 가지 이유가 있습니다. 때때로 Axios는 요청 초기에 오류가 발생합니다. 이것은 때때로 CORS 요청에서 발생합니다. Axios OPTIONS를 사용할 수 없는 경우 Axios는 패닉 상태로 서버에서 실제로 응답을 받기 전에 .catch() 로 사용자를 보내므로 이러한 경우 응답을 사용할 수 없습니다.

여러분 중 일부는 "아니요, DevTools에서 그것을 보았으므로 응답이 돌아왔습니다!"라고 말할 수 있습니다. 때때로 Axios가 HTTP 요청을 시작하고 오류가 발생하고 자체를 중단하고 서버가 응답하기 전에 .catch() 보내기 때문에 이것이 항상 사실인 것은 아닙니다. Axios가 .catch() 함수를 실행한 후 몇 밀리초 후에 서버가 응답과 함께 돌아올 수 있습니다. 이 응답은 여전히 ​​응답을 수신하고 있기 때문에 DevTools에 표시됩니다. 그러나 Axios는 이 시점에서 오랫동안 수행되었으므로 Axios가 .catch() 기능을 시작할 당시에 존재하지 않았기 때문에 response 를 사용할 수 없었습니다.

서버에서 4XX 또는 5XX 오류에 대한 메시지를 받은 분들은 운이 좋은 것입니다! 이 오류를 얻기 위해 Axios는 전체 서버 응답을 기다려야 했기 때문에 일반적으로 사용할 수 있는 서버의 응답이 있습니다. 이러한 경우 Axios는 response 로 사용자를 .catch() 로 보내지만 응답을 즉석에서 생성하는 자체 error 개체로 래핑합니다.
따라서 5XX 또는 4XX 오류가 발생하는 경우 서버 응답을 사용할 수 있지만 깊이 묻혀 있습니다!

error.response.data.data.message 시도하십시오. 이것은 서버 오류를 반환하는 Laravel API 요청에 대해 작동하는 것으로 확인되었습니다.

비 Laravel 사용자 -- 서버에서 핵심 응답을 얻으려면 최소한 error.response.data 로 이동해야 하지만 대부분의 서버는 응답을 다른 data{} 개체로 래핑하는 것보다 레이어를 더 깊게 한 다음 마지막으로 거기에서 .message 와 같은 응답 속성에 액세스합니다.

그러나 나는 Console.Log를 수행했고 응답이 없습니다!

네, 알아요. 하지만 그냥 웃기려고 error.response.data 를 출력해 보세요.

어떤 이유로 Axios는 오류 개체에서 console.log(error) 의 출력을 수정합니다. 왜 그들이 이것을 하는지는 모르겠지만, 대신 console.log(JSON.stringify(error)) 를 쓰면 전체 객체가 영광으로 보일 것입니다.

이것은 직렬화된 JSON으로 약 2개의 레이어 깊이 후에 읽기가 어렵습니다. 따라서 전체 내용을 복사하여 JSON prettifyer 에 붙여넣어 오류 객체의 구조를 탐색해야 합니다.

Axios에서 500 오류 또는 400 유형 오류(또는 실제로 서버에서 제공한 오류 코드)가 발생하면 요청이 완료되었으며 서버의 응답을 사용할 수 있음을 의미합니다!

문제는 그것이 매우 깊으며 Axios가 대부분의 사람들이 error{} 개체를 보기 위해 수행하는 console.log(error) 의 출력을 수정하기 때문에 대부분의 사람들은 그것이 존재한다는 것을 모릅니다. 하지만 거기에 있습니다!

@VSG24 맨!! 생명을 구하는 답변입니다 :D

fwiw, 순환 참조로 인해 0.18.0에서 JSON.stringify(error) 폭탄이 발생했습니다.

오류 발생 시 서버 응답을 제공하는 인터셉터를 설정했습니다.

axios.interceptors.response.use(
  response => {
    // do someting on response
    return response
  },
  error => {
    // do someting on errir
    return Promise.reject(error.response.data) // => gives me the server resonse
  }
)

    try {
      const { data } = await htttp.post(login, payload)
      // do someting with data
    } catch (e) {
      console.log(e) // server response data
    }

@alimirayman 모든 요청을 주시할 필요가 없다면 잘 작동하는 것 같습니다. 그러나 모든 요청을 추적해야 하는 경우 내 코드의 모든 위치에서 오류 처리기를 반복하는 것은 합리적이지 않습니다. 내가 잘못 이해하지 않는 한(경우에 따라 다름), axios는 오류를 던지기 전에 서버가 오류를 반환했는지 확인해야 하지 않겠습니까?

@hhowe29 circular-json

다른 많은 스레드와 마찬가지로 이 스레드를 찾았고 vue.js 및 vuex 모듈과 함께 axios를 사용하고 있습니다.

내 vuex 모듈 작업은 axios 오류를 catch하고 commit(ERROR_HAPPENED, error)을 실행하여 vuex 모듈의 ERROR_HAPPENED 돌연변이를 실행합니다. 그러나 오류는 응답 속성 없이 도착하여 vuex 상태로 응답을 설정하려고 하면 error.response가 정의되지 않게 됩니다.

내가 console.log(error.response) 작업을 수행하면 commit() 전에 응답을 볼 수 있습니다. 그래서 vuex에 의해 엉망이 될 가능성이 큽니다.

commit(ERROR_HAPPENED, error.response.data) 또는 작업에서 401인지 확인하고 상태 코드에 따라 다른 커밋을 실행합니다. 이 맹글링은 401 코드에서만 발생하기 때문입니다. 404 또는 500과 같은 다른 오류는 내 돌연변이로 전달됩니다.

망가지지 않았습니다. Vuex는 버그가 아니라도 이것을 맹글링하지 않습니다.
대부분 Axios 인터셉터 내부에서 발생하는 일부 오류로 인해 이것이 노출되지 않습니다.

일부 업데이트 ?

@AllanPinheiroDeLima 답변이 늦어 죄송합니다. 하지만 누군가 코드의 모든 단일 위치에 인터셉터를 작성하지 않는다고 생각합니다. 우리는 코드 베이스에 인터셉터를 한 번 작성하고 이를 도우미 클래스로 사용합니다. 1번입니다. 2번, 초기 쿼리는 _server error response_를 받지 못했다는 것입니다. 대신 try catch 에서 _javascript error_를 받았습니다 axios 오류 인터셉터는 기본적으로 코드 방식을 변경하거나 대규모 코드 기반을 변경하지 않으려는 경우 해당 문제를 해결하기 위한 미들웨어 역할을 합니다.

예, 동의합니다. 원시 keycloak을 사용하는 대신 내 서버에 통합하는 이 문제에 대한 해결책을 찾았습니다. 이렇게 하면 서버에서 오류를 가로채서 읽을 수 있는 오류를 프런트 엔드로 보낼 수 있습니다. 지금으로서는 이런 종류의 문제를 해결할 수 있는 유일한 방법이라고 생각합니다. :)

아직 같은 문제가 있습니다. Axios 인터셉터 console.log('interceptors', JSON.stringify(error)) 하면 이 로그 interceptors {"config":{"transformRequest":{},"transformResponse":{},"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"},"method":"post","url":"http://localhost:5000/api/autenticacao/login","data":"{\"siglaInstituicao\":\"NEAS\",\"usuario\":\"emersoncpaz\",\"senha\":\"belle1903\"}"},"request":{}} 되지만 chrome devtools 응답에는 API에서 올바른 응답이 있습니다. A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: Named Pipes Provider, error: 40 - Could not open a connection to SQL Server) axios에서 이 응답을 얻는 방법은 무엇입니까?

5xx 오류가 catch 블록에서 처리되지 않는 이유가 무엇입니까(응답 개체를 반환하지 않음)? 상태 코드 502는 DevTool 콘솔에 나타나지만 Axios에서 처리되지 않습니다.

이것은 나를 위해 일했습니다 (라라벨 중단 도우미 사용: abort(500, 'message'))
```
.catch(오류 => {
console.log(error.response.data.message);
});

```

누구든지 이것이 작동한다고 말하는 코드 조각 이외의 완전한 작동 예제가 있습니까? 이 스레드에서 그들이 누구를 언급했는지, 코드 조각을 어디에 넣었는지, 최종 작업 코드가 어떻게 생겼는지 모른다면 한 줄의 조각은 별로 도움이 되지 않습니다.

나는 인터셉터에서 오류를 잡으려고 노력하고 있으며 오류 코드를 기반으로 401이 로그인하는 경우 리디렉션으로 요청을 종료하거나 422가 요청을 호출 구성 요소로 돌아가 양식 오류 업데이트를 허용하도록 허용합니다.

어떤 아이디어?

나는 Nuxt axios를 사용하고 있으며 onResponseError 인터셉터는 다음과 같습니다.

$axios.onResponseError(error => {
    const code = parseInt(error.response && error.response.status)
    console.log(code, 'Axios onResponseError')
    console.log(error.response.status, 'status')
    console.log(error.config, 'config')
    console.log(error.response, 'response')
    // Do something with response error
    if (error.response.status === 401) {
      console.log('unauthorized, logging out ...')
      app.$auth.logout()
      redirect('/login')
    }
    if (code === 400) {
      // redirect('/400')
      console.log(`400 onResponseError`)
    }
    if (code === 408) {
      console.log(`A timeout happened on url onResponseError`)
    }
    if (code === 418) {
      console.log(`A teapot onResponseError`)
    }
    if (code === 428) {
      console.log(`428 onResponseError`)
      // redirect('/login')
    }
    return Promise.reject(error)
  })

샘플 호출은 다음과 같습니다.

async postRecord (clear = false) {
      try {
        const { r } = await this.$axios.$post(this.endPoint, this.formData)
        console.log(r, 'response')
        // do something with response
      } catch (e) {
        console.log(e, 'error in crud') // server response data
        // i should never get here if error since the interceptor should kill the request if 401
       // for testing this request is returning a 401
      } finally {
        this.submitted = false
      }
    },

감사 해요,
데이브

인터넷이 없으면 error.response가 정의되지 않습니다. 이것이 최선의 방법입니까?

일반 텍스트에서 오류가 발생합니다. 개체의 오류를 변환하려면 다음을 사용해야 했습니다.

var errorObj = JSON.parse(JSON.stringify(error));

이것은 axios가 아니라 서버에 달려 있습니다.
error.response.status, 정의되지 않은 경우 인터넷임을 알 수 있습니다.
JS의 연결 문제 또는 구문 오류

2019년 1월 2일 수요일, 15:40 Ibrahim Azhar Armar < [email protected]
썼다:

일반 텍스트로 오류가 발생합니다. 오류를 변환하려면 다음을 사용해야 했습니다.
객체.

var errorObj = JSON.parse(JSON.stringify(오류));

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/axios/axios/issues/960#issuecomment-450896476 또는 음소거
스레드
https://github.com/notifications/unsubscribe-auth/AEETt2r3bt2QCixDlzh4fZvWp_1rPkxuks5u_NMEgaJpZM4N9Ljl
.

@kgrosvenor 서버 스크립트를 절전 모드로 전환하고

올바른 오류 메시지가 표시되지만 콘솔에 일반 텍스트로 표시되므로 서버와 관련이 없는 형식 문제만 보입니다.

그렇다면 서버에서 무엇이 이것을 일으킬 수 있는지 이해하려고 노력하고 있습니까?

시간 초과에 도달했을 가능성이 큽니다. 오류에 '응답'이 있는지 확인하십시오.

axios.get()
.then(function(done) {
   //fine and can get done.data
})
.catch(function(err) {
  //catch the error, check it has a response object with lodash 
  if(_.has(err, 'response') {
     console.log(error.response.status);  
     console.log(error.response.data);
 } 
 else {
    console.log("Most likely a server timeout or an internet connection error");
    console.log("error response property is undefined")
 }
}); 

Java 프로그래머가 500 오류가 포함된 오류 메시지를 보내는데 해당 메시지를 처리할 수 없습니다. 그래서 나는 그에게 응답으로 오류 메시지와 함께 200 상태를 반환하도록 요청하고 있지만 그는 나에게 화를 내며 그의 HTTP 클라이언트가 500 상태의 모든 메시지를 본다고 말합니다. 그는 내가 500 상태의 오류 메시지를 찾을 수 없기 때문에 내가 바보라고 생각합니다. axios가 500 오류 메시지를 처리하지 않는다는 것을 어떻게 설명합니까?

Java 프로그래머가 500 오류가 포함된 오류 메시지를 보내는데 해당 메시지를 처리할 수 없습니다. 그래서 나는 그에게 응답으로 오류 메시지와 함께 200 상태를 반환하도록 요청하고 있지만 그는 나에게 화를 내며 그의 HTTP 클라이언트가 500 상태의 모든 메시지를 본다고 말합니다. 그는 내가 500 상태의 오류 메시지를 찾을 수 없기 때문에 내가 바보라고 생각합니다. axios가 500 오류 메시지를 처리하지 않는다는 것을 어떻게 설명합니까?

실제로 상태 500의 오류를 처리할 수 있어야 하며 응답으로 http 상태를 확인하고 클라이언트 측에서 처리하는 방법을 결정할 수 있습니다. 이것은 이미 이 링크(https://github.com/axios/axios#handling-errors)에 문서화되어 있습니다.

다음은 서버에서 오류 500을 잡는 방법이며 저에게 효과적입니다.

.catch(function (error) {
    var errorObj = JSON.parse(JSON.stringify(error));
    console.log(errorObj);
    if (errorObj.code == 'ECONNABORTED') {
        alert('Connection timed out.');
    }
});

상관없이 500 상태를 처리할 수 있지만 제 생각에는 서버 측에서 의도적으로 그것을 반환하는 것은 꽤 나쁜 습관입니다...

또한 error.response undefined가 표시되고 아래 코드를 시도합니다.

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  // Do something with response error
  let {response} = error;
  // response?.status === 401 es7 way.
  if (response && response.status === 401) {
    // Do logout;
    // Redirect to login;
    return Promise.reject(error.response);
  } 
  else if (error.response){
    // Do something.
    console.log('some API_CLIENT error');
    return Promise.reject(error.response);
  }
 return Promise.reject(error);
});

이것은 너무 나쁩니다. 오류 처리가 중요합니다.

지금은 어떻게 되고 있나요? 버전 0.18.0에서 여전히 동일한 문제가 발생합니다!

나에게 같은 문제: @nuxtjs/axios v5.0.0

버그입니다

Daniel Stern [email protected]于 2019年2月28日周四 04:39写道：

이 토론을 요약하겠습니다.

박사:
EVERYONE HTTP 오류를 잡을 수 없다는 것이 문제입니다.
개발자 HTTP 오류를 잡을 수 없는 것은 문제가 아닙니다 .

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/axios/axios/issues/960#issuecomment-468020991 또는 음소거
스레드
https://github.com/notifications/unsubscribe-auth/AAN8CbMHohyuSZHYlcieD_5yUqizpkSYks5vRuzygaJpZM4N9Ljl
.

README에서 이 문제를 언급해야 합니다. 매우 도움이 됩니다. 감사 해요!

https://github.com/axios/axios/issues/960#issuecomment -320659373

다른 포스터에 동의합니다. 오류가 발생하는 지점에 따라 catch 에 예측할 수 없는 구조의 개체를 부여하는 것은 좋지 않습니다. error.response 및 JSON.stringify(error) 모두 원인에 따라 자체적으로 오류가 발생할 수 있습니다. https://github.com/axios/axios#handling -errors에서 제안된 접근 방식도 이에 대해 정확히 알려주지 않습니다.

끔찍한 오류 메시지를 반환하기 위해 이 모든 곡예를 수행해야 하는 것은 2019년에 당혹스러웠습니다. 1990년에는 당혹스러웠을 것입니다. 진지하게 JS 사람들, 게임을 강화하십시오. API 설계를 배우고 의도적으로 무시하고 있는 혼란을 디버깅하는 데 수천 명의 사람들이 수많은 시간을 소비하는 '창의적인 결정' 비용을 인식하십시오.

순환 참조로 어려움을 겪는 사람들을 위해 다음과 같이 할 수 있습니다.

try {
// your axios request
} catch (error) {
  const { response } = error;
  const { request, ...errorObject } = response; // take everything but 'request'
  res.status(response.status);
  return res.json(errorObject); // or use 'return res.json(response.data.error);' then you don't need to omit the 'request'
}

순환 참조로 어려움을 겪는 사람들을 위해 다음과 같이 할 수 있습니다.

try {
// your axios request
} catch (error) {
  const { response } = error;
  const { request, ...errorObject } = response; // take everything but 'request'
  res.status(response.status);
  return res.json(errorObject); // or use 'return res.json(response.data.error);' then you don't need to omit the 'request'
}

고마워요! 그것은 나를 위해 잘 작동하는 코드입니다.

문제는 "lib/core/enhanceError"에 있습니다. 요청 개체가 오류에 추가됩니다. Promise 기반 API에는 하나의 매개변수만 있으므로 답변에 응답을 추가하는 것이 합리적입니다(요청 라이브러리는 첫 번째 매개변수로 오류를 반환하고 두 번째 매개변수로 응답을 반환함). 그러나 모든 요청을 추가하는 것은 의미가 없습니다. 코드 변경은 매우 간단합니다 https://github.com/geoblink/axios/pull/1/files
중요해 보이는 경우 메인 브랜치에 대한 홍보를 열 수 있습니다(문제가 종료되었기 때문에 수행하지 않음).

요청할 때마다 호출할 함수 래퍼를 만들 수 있습니다.

const api = async (uri, data) => {
  try {
    const { data: response } = await axios({
      url: domain + uri,
      method: 'POST',
      data,
    });

    return response.data;
  } catch (error) {
    throw error.response.data;
  }
};

시간 초과에 도달했을 가능성이 큽니다. 오류에 '응답'이 있는지 확인하십시오.

axios.get()
.then(function(done) {
   //fine and can get done.data
})
.catch(function(err) {
  //catch the error, check it has a response object with lodash 
  if(_.has(err, 'response') {
     console.log(error.response.status);  
     console.log(error.response.data);
 } 
 else {
    console.log("Most likely a server timeout or an internet connection error");
    console.log("error response property is undefined")
 }
}); 

이것은 나를 위해 일했습니다. 감사합니다

"error.response"를 사용하면 작동하지 않습니다. 문제는 데이터베이스 서버의 연결을 끊고 웹 서버에서 오류 500을 반환했을 때 발생합니다.

개발 도구의 네트워크 탭

응답 코드: 500
응답 본문:

{
  "error": {
    "statusCode": 500,
    "name": "Error",
    "message": "read ETIMEDOUT",
    "code": "ETIMEDOUT",
    "errno": "ETIMEDOUT",
    "syscall": "read",
    "stack": "Error: read ETIMEDOUT\n    at exports._errnoException (util.js:1050:11)\n    at TCP.onread (net.js:582:26)"
  }
}

크롬 콘솔 오류:

Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js:15)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

버전

"axios": "^0.15.3"

여기도 마찬가지...

내 경험상:

"catch에서 console.log(error)에서 console.log(error.response)로 수정합니다."

catch에서 console.log(error.response.data)와 함께 더 잘 작동했습니다.

axios.interceptors.response.use(null, 오류 => {
반환 error.response;
});

getClients: 비동기(상태) => {
const res = axios.get( ${BASE_API}/clients )을 기다립니다.
console.log('res',res);
만약 (res){
state.commit("setClient", res.data);
}
}

다른 옵션

/**
 * Whenever error.message is accessed we want to se the full API error message (JSON) if it's present
 * not just some generic http status code + message
 * see https://github.com/axios/axios/issues/960 for context
 *
 * <strong i="6">@param</strong> axios
 */
export function extractAPIErrorResponse(axios: AxiosInstance) {
    axios.interceptors.response.use(undefined, function (error: AxiosError) {
        (error as any).originalMessage = error.message;
        Object.defineProperty(error, "message", { get: function () {
            if (!error.response) {
                return (error as any).originalMessage;
            }
            return JSON.stringify(error.response.data);
        }});
        return Promise.reject(error);
    })
}

노력하다{
기다리세요.$axios .....
}캐치(e)
{
console.log(e)

}

axios.get("https://......") 
     .then( response => {
          return response
}).catch( () => {
         store.dispatch("errorComponentMethod")   // if there's an error, method is dispatched
})
//////////////////////////////////////
actions : {
      errorComponentMethod(){
              router.push("/errorComponent")     // method routes to error component
      }
}

감사합니다! 많은 도움이 되었습니다!

여전히이 문제가 발생합니다. 크롬 디버거에서 응답은 정확하지만 axios는 대신 일반 "Request failed with status code 403" 를 반환합니다.

나는 아직도 이것을 가지고 있고 나는 정말로 혼란스럽다. 위의 주석을 잡으려고 했지만 오류가 있을 때 정확히 axios가 undefined를 반환하는 이유는 무엇입니까?
try{ const res = await axios.get("someurl"); return res; } catch(e) { console.log(e); }
서버가 응답하지 않는 이유에 대한 메시지가 포함된 응답을 다시 보내더라도 res는 정의되지 않습니다. 그리고 나는 그 데이터에 접근할 수 없다... 왜??

**편집: 내 버그를 찾았습니다 - axios에 대해서는 아무런 문제가 없습니다. 내 의견 두 개 아래로 참조하십시오. 요컨대 내 인터셉터는 axios 파이프라인을 통해 오류 데이터를 다시 전달하지 않았으므로 항상 정의되지 않았습니다.

@HoogsterInc 여기 에서
당신은 이런 일을 할 수 있습니다

try {
   axios.get(...)
} catch (error) {
   if (error.reponse) {
      // http status 4x, 5xx
   } else {
      // network error like timeout, connection refused etc...
   }
}

@konstantinblaesi 를 돕기 위한 응답에 감사드립니다 -- 제 문제를 파악했습니다.

나를 위해 나는 사용자의 인증을 확인하기 위해 인터셉터를 설정했는데, 사용자가 인증되지 않은 경우 특정 오류 코드를 보냅니다. 그러나 오류가 인증되지 않은 코드와 일치하지 않을 때 오류 데이터를 전달하지 않았습니다. 한숨... 어리석은 나쁜 실수. 그래서 인증되지 않은 오류 코드를 확인한 후 Promise.reject(error); - 내 문제가 해결되었고 오류 데이터가 이제 가득 찼습니다.

err.toJSON() 사용할 수 있습니다.

catch((err) => {
    console.log(err.toJSON()); // Return error object
});

https://github.com/axios/axios#handling - 오류

(글로벌로 설정)

main.js에서

import axios from 'axios'

var instance = axios.create(
 { validateStatus: function (status) {
    return status < 600; #you can change this with another value
  }
 });

또는
(특정하게 설정)

  axios.post('/formulas/create', {
       name: "",
       parts: ""
  }, { validateStatus: function (status) {
          return status < 600; // Reject only if the status code is greater than or equal to 500
        }})
    .then( 
   (response) => { console.log(response) },
   (error) => { console.log(error) }
   );

Axios 및 catch 500 오류 응답 데이터

const log = console.log;

  updateData(options = {}, flag = false){
    let url = `/opapi/appDownloadGuide/update`;
    let message = '更新成功!';
    let errorMessage = '更新失败!';
    if (flag) {
      message = '添加成功!';
      errorMessage = '添加失败!';
      url = `/opapi/appDownloadGuide/add`;
    }
    axios
    .post(url, options)
    .then(res => {
      // ❓🤔️500 , 在这里拦不住呀？
      log(`res`, res, res.status);
      return res.data;
    })
    .then(json => {
      const {
        code,
        success,
        data,
        errorCode,
        errorHint,
      } = json;
      if(code === 200) {
        this.$message({
          type: 'success',
          message,
        });
        this.init();
      } else{
        this.$message({
          type: 'error',
          message: `${errorMessage}: ${errorHint ? errorHint : ""}`,
        });
      }
    })
    .catch(err => {
      // 👌在这里拦截 error data!
      log(`error.response`, err.response);
      const {
        data,
        status,
        statusText,
      } = err.response;
      this.$message({
        type: "error",
        message: `${statusText}-${status}: ${data || ""}`,
        // message: "不能重复创建",
      });
      console.error(`500 err`, err);
    });
  },

https://stackoverflow.com/questions/38798451/how-to-catch-and-handle-error-response-422-with-redux-axios

나는 정확히 같은 환경을 가지고있다. 이 시도:

axios.post('/formulas/create', {
  name: "",
  parts: ""
})
.then(response => { 
  console.log(response)
})
.catch(error => {
    console.log(error.response)
});

에서 _Modify console.log(error) 에 console.log(error.response) 에서 catch _.

전역 인터셉터를 사용하고 error.response 만 거부할 수도 있습니다. 문제는 console.log 가 오류를 출력하려고 할 때 개체 구조가 아닌 문자열 표현이 인쇄되어 .response 속성이 표시되지 않는다는 것입니다.

나를 위해 일하지 않는다

@gopal-g 저에게 정의되지 않았습니다.

@gopal-g 예 동일한 정의되지 않은 메신저가 가져옵니다.

저는 Axios 0.19.2를 사용하고 있습니다. @konstantinblaesi 의 솔루션을 추가

다른 옵션

/**
 * Whenever error.message is accessed we want to se the full API error message (JSON) if it's present
 * not just some generic http status code + message
 * see https://github.com/axios/axios/issues/960 for context
 *
 * <strong i="9">@param</strong> axios
 */
export function extractAPIErrorResponse(axios: AxiosInstance) {
    axios.interceptors.response.use(undefined, function (error: AxiosError) {
        (error as any).originalMessage = error.message;
        Object.defineProperty(error, "message", { get: function () {
            if (!error.response) {
                return (error as any).originalMessage;
            }
            return JSON.stringify(error.response.data);
        }});
        return Promise.reject(error);
    })
}

이것은 저에게 효과적이었습니다 .

분명히 하자면 내 앱에서 내 서버가 400 오류를 반환합니다(응답해야 함).

% curl -X POST http://my-server/api -d '{"foo": "bar"}'
{"status": 400, "message": "missing param XYZ"}

이 수정 사항이 없으면 Axios에서 name , stack , config (원래 요청이 있음)만 포함하고 "응답"이 없는 오류 개체를 얻습니다. 그러나 이 수정으로 오류에는 서버의 올바른 message 속성이 포함됩니다.

이 수정 사항이 없으면 "response" 속성이 없는 이유는 1171번째 줄에 있는 axios.js의 settle 와 관련된 것 같습니다.

        module.exports = function settle(resolve, reject, response) {
          var validateStatus = response.config.validateStatus;
          if (!validateStatus || validateStatus(response.status)) {
            resolve(response);
          } else {
            reject(createError(
              'Request failed with status code ' + response.status,
              response.config,
              null,
              response.request,
              response
            ));
          }
        };

오류를 생성할 때 response.message 통과하지 않는 것을 볼 수 있습니다. 또한 내 앱에서 error.response 응답이 표시되지 않습니다. 그런 속성이 없습니다. 이해가 되지 않습니다. 그러나 어쨌든 위의 수정 사항은 저에게 효과적입니다.

서버에서 유효성 검사 오류를 잡으려고 합니다.

암호:

axios.post('/formulas/create', {
       name: "",
       parts: ""
})
.then( 
  (response) => { console.log(response) },
  (error) => { console.log(error) }
);

콘솔 로그 출력

Error: Request failed with status code 422
    at createError (app.js:6765)
    at settle (app.js:29489)
    at XMLHttpRequest.handleLoad (app.js:6600)

네트워크 탭 출력
{"name":["이름 필드는 필수입니다."],"parts":["부품 필드는 필수입니다."]}

내 네트워크 탭의 응답인 JSON 양식 유효성 검사가 포함된 개체가 표시되어야 합니다. JS catch 출력을 얻는 것 같습니까?

또한 다음을 시도했습니다.

axios.post('/formulas/create', {
  name: "",
  parts: ""
})
.then(response => { 
  console.log(response)
})
.catch(error => {
    console.log(error)
});

같은 결과

여기 나와 같은 환경을 사용하면서 더 많은 사람들이 같은 문제를 겪고 있는 것 같다.
https://laracasts.com/discuss/channels/vue/issues-with-axios-catch-method

• Axios 버전: ^0.16.2
• 뷰JS 2.3.4
• Vue 템플릿 컴파일러 2.3.4
• 라라벨 믹스
• 환경: 노드 v6.4.0, 크롬 58, Mac OSX 10.12.4

axios.post('/공식/만들기', {
이름: "",
부속: ""
})
.그 다음에(
(응답) => { console.log(응답) },
).catch(err => consol.log(err.response.data)});

error.response는 객체이며 콘솔 로그에 [객체,객체]를 출력합니다.
오류 메시지에 액세스하려면 error.reposne.data를 사용해야 합니다.
참조 : https://itnext.io/javascript-error-handling-from-express-js-to-react-810deb5e5e28

@chandukasm 예, 하지만 제 경우에는 error.response _없습니다_ -- 요청이 전송되고 응답이 명시적으로 수신되더라도 정의되지 않습니다. 또한 위의 내 의견을 참조하십시오. 응답이 존재하더라도 메시지는 무시됩니다(일반 메시지로 대체됨).

error.response는 객체이며 콘솔 로그에 [객체,객체]를 출력합니다.
오류 메시지에 액세스하려면 error.reposne.data를 사용해야 합니다.
참조 : https://itnext.io/javascript-error-handling-from-express-js-to-react-810deb5e5e28

console.log에 [object,object]가 보이면 JSON.stringify(error.response)를 실행하여 실제 오류를 확인하십시오.

error.response 개체가 없습니다.

return this.$axios
  .post(postUrl, payload, { responseType: 'json' })
  .then(
    (response) => {
      this.message = `RESP: ${JSON.stringify(response)}`;
    },
    (reason) => {
      this.message = `REAS: ${JSON.stringify(reason)}`;
    }
  )
  .catch((err) => {
    this.message = `CATCH: ${JSON.stringify(err)}`;
  });

페이로드에는 HTTP 422를 트리거하기 위해 의도적으로 잘못된 값이 포함되어 있습니다. 이 값은 Postman에서 예상대로 작동하고 서버(LB4)가 입력 데이터가 잘못된 위치를 설명하는 JSON 형식의 완전한 오류를 반환하지만 axios에서는 error.response 객체가 정의되지 않습니다. .