لدي نفس البيئة بالضبط . جرب هذا:

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)

الإصدار

"محاور": "^ 0.15.3"

هناك كمية الصيد في catch : إذا حدث الخطأ قبل تقديم الطلب، ثم في catch سوف لا يكون لديك err.response الممتلكات، وذلك لأن ... حسنا .. .. لا يوجد رد. لذلك ، فإن catch سيصادف أي خطأ. وينطبق الشيء نفسه في المواقف مثل تلك من fabiorecife عندما لا تكون هناك استجابة بسبب فشل الشبكة. لا تعامل err أنه خطأ HTTP لأن هذا ليس هو الحال دائمًا.

alsofronie إذن ما هي الطريقة المفضلة للتعامل (تمييز أحدهما عن الآخر) على سبيل المثال إخفاقات الاختبار المبدئي مثل 413؟

أواجه مشكلة مماثلة - تعرض أدوات مطوري Chrome 401 ، والاستجابة هي {"message":"Identity token has expired"} وأنا catch( (error) => {...}) - لكن خطأ ، الرد فارغ. أتساءل عما إذا كان هذا بسبب أن المكالمة OPTIONS المرتبطة بـ GET لها حالة 200 . ماذا تفعل في هذه الحالة وأين هو المكان المناسب لاسترداد رمز الحالة 401 ؟

robbiemu أعتقد أنه موثق بالفعل: https://github.com/axios/axios#handling -errors

mrchief شكرا لهذا ، من الجيد أن error.response موجود ، لكن الحقول undefined ، أي استدعاءات للقيم داخل response الكائن

paolavness أقترح فتح عدد جديد بدلاً من التعليق هنا. ليس هناك الكثير من مشاهدة القضايا المغلقة. أو ربما تطلب ذلك على StackOverflow.

mrchief آه هذا مغلق ، شكرًا للإشارة إلى ذلك. سوف تفعل.

كان لي نفس القضية. في النهاية ، قمت بتغيير رمز الخطأ من 401 إلى 403 وعمل كل شيء كما توقعت. أظن أن سبب وجود كائن خطأ فارغ وخطأ جافا سكريبت الناتج له علاقة بهذه العبارة التي وجدتها في وثائق أخطاء 401:

"يجب أن تتضمن استجابة [خطأ 401] حقل رأس مصادقة WWW يحتوي على تحدي ينطبق على المورد المطلوب."

لذلك إذا كنت ستستخدم خطأ 401 ، فيجب عليك تضمين حقل رأس www-Authenticate. إذا كنت لا تريد القيام بذلك ، فما عليك سوى استخدام الخطأ 403.

صباح الخير يا رفاق ، لقد واجهت هذه المشكلة ، ومع ذلك ، قمت بإصلاحها بتغيير تكوين apache لتمكين cors على الخادم الخاص بي. الق نظرة على الرابط أدناه

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

يمكنك تصحيح جميع الردود فقط باستخدام console.log(JSON.stringify(error))

axios.post (url)
ثم ((استجابة) => {
// شيئا ما
})
. الصيد ((استجابة) => {
إذا (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" ، لكن الخادم قام بتعيينه! رأس الاستجابة على ما يرام

تم الحل. لم تكن واجهة برمجة تطبيقات المصادقة تستجيب للرأس الصحيح الذي يجب أن يكون له أصل التحكم في الوصول

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 (خطأ))" في اعتراض الاستجابة. لا توجد خاصية استجابة

chiefie أنا متأكد من أن إعداد `` Access-control-allow-origin '' على ما يرام لأن واجهة ajax api الأخرى يمكنها الاستجابة للمحتوى الصحيح！ فقط واجهة برمجة تطبيقات الكابتشا البرمجية تخطئ。 عندما تنتهي صلاحيتها ， خطأ في الاستجابة مع حالة 478 ولا يمكن للمحاور احصل على استجابة الجسم！

تحديث! لقد كان خطأ واجهة برمجة تطبيقات الخادم ، ولم يكن به إعدادات كور في الرأس. الآن تعمل بشكل جيد.

شكرا @ جوليانو باروس كان ذلك بسبب عبر الأصل. الآن كل طلبات أياكس الخاصة بي تعمل بشكل جيد.

يتم إلقاء هذا الخطأ الأولي عندما يتعذر الوصول إلى الخادم / يتم إبطال CORS.
error.response سيكون undefined .

لقد قمت للتو بإنشاء خطأ تكامل يحتوي على بيانات الرسالة والحالة والاستجابة ... ولكن دائمًا يتبع نفس الهيكل. بهذه الطريقة يمكنني فصل أكسيوس / خطأ خام عن أعمالي.

يا شباب أكسيوس ، يجب أن يكون هذا خطأ HTTP على ما أعتقد ... بما في ذلك error.response .
يمكن التحقق من هذا على النحو الوارد أعلاه

كان يوم أمس الذكرى السنوية الأولى لهذه القضية. هل سيتم "إصلاحها" في أي وقت أم أنها "ليست مشكلة" في هذه المرحلة؟

frostshoxx لذا أعتقد أن هذه "ليست مشكلة". بينما أواجه نفس المشكلة مثل أي شخص آخر ، أفهم الآن ما يحدث ويمكنني أن أرى أن هذا ليس خطأ أو مشكلة ، ولكن فقط الطريقة التي يعمل بها العالم.

لكل شخص مرتبك (واحتفالاً بهذا الموضوع الذي يبلغ من العمر عامًا واحدًا) اسمحوا لي أن أشرح ما يحدث وكيفية الحصول على استجابة الخادم الخاص بك.

كيف انتهى بك الأمر هنا؟

هناك العديد من الأسباب التي قد تجعلك تواجه القفار .catch() . أحيانًا يواجه Axios خطأً مبكرًا في الطلب. يحدث هذا أحيانًا مع طلبات CORS. عندما لا يكون Axios OPTIONS متاحًا ، ينتاب Axios من الذعر ويرسل لك .catch() قبل أن يتلقى استجابة فعلية من الخادم ، وبالتالي فإن الاستجابة غير متوفرة في هذه الحالات.

قد يقول البعض منكم ، "لا ، لقد أراها في DevTools ، لذا عادت الاستجابة!". هذا ليس صحيحًا دائمًا لأن Axios سيبدأ أحيانًا طلب HTTP ، ويواجه خطأ ، ويُجهض نفسه ويرسلك إلى .catch() قبل أن يستجيب الخادم مرة أخرى. بعد بضعة مللي ثانية من تشغيل Axios للدالة .catch() قد يعود خادمك باستجابة ، والتي تظهر في DevTools لأنه لا يزال يستمع إلى الاستجابة. ومع ذلك ، تم الانتهاء من Axios منذ فترة طويلة في هذه المرحلة ، لذلك لم يكن response متاحًا لأنه لم يكن موجودًا في الوقت الذي بدأ فيه Axios الوظيفة .catch() .

أولئك الذين يتلقون رسالة حول خطأ 4XX أو 5XX من الخادم ، محظوظون! عادة ما يكون هناك استجابة من الخادم متاح لك لأنه من أجل الحصول على هذا الخطأ ، كان على Axios الانتظار للحصول على استجابة الخادم الكاملة. في هذه الحالات ، يرسلك Axios إلى .catch() مع response لكنه يلف الاستجابة في كائن error به الذي يقوم بإنشائه بسرعة.
لذلك إذا كنت تتلقى أخطاء 5XX أو 4XX ، فمن المحتمل أن يكون لديك استجابة الخادم المتاحة لك ، لكنها مدفونة DEEP!

جرب error.response.data.data.message . تم تأكيد هذا للعمل مع طلبات Laravel API التي تُرجع أخطاء الخادم.

المستخدمون الذين لا error.response.data للوصول إلى الاستجابة الأساسية من الخادم ، ولكن معظم الخوادم من التفاف استجاباتهم في كائن data{} يتطلب منك الانتقال إلى طبقة أعمق ، ثم أخيرًا قم بالوصول إلى خاصية الاستجابة التي تريدها مثل .message من هناك.

لكنني فعلت Console.Log وهو لا يحتوي على رد!

نعم أعرف ، ولكن حاول فقط إخراج error.response.data أي حال لمجرد الدعابة.

لسبب ما ، يقوم Axios بتعديل ناتج console.log(error) على كائن الخطأ. لست متأكدًا من سبب قيامهم بذلك ، ولكن إذا كتبت بدلاً من ذلك console.log(JSON.stringify(error)) فسترى الكائن بأكمله بكل مجده.

هذا JSON متسلسل يصعب قراءته بعد طبقتين تقريبًا. لذلك يجب عليك نسخ كل شيء ولصقه في محسن JSON لاستكشاف بنية كائن الخطأ.

إذا كنت تحصل على خطأ 500 أو خطأ من النوع 400 (أو في الحقيقة أي رمز خطأ مقدم من الخادم) في Axios ، فهذا يعني أن الطلب قد اكتمل وأن استجابة الخادم متاحة لك!

تكمن المشكلة في أنه عميق للغاية ، ولأن Axios يعدل ناتج console.log(error) الذي يفعله معظم الناس لرؤية الكائن error{} ، فإن معظم الناس لا يعرفون أنه موجود. لكنها هناك!

MustafaHosny اللهم امين هذه إجابة منقذة للحياة: د

fwiw ، JSON.stringify(error) قنابل في 0.18.0 بسبب مراجع دائرية.

قمت بإعداد جهاز اعتراض يعطيني استجابة الخادم عند حدوث خطأ

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 يبدو أنه يعمل بشكل جيد إذا لم يكن علينا مراقبة كل طلب. ولكن عندما يتعين عليك تتبع كل طلب ، فليس من المعقول أن يكون لديك معالج خطأ متكرر في كل موقع في الكود الخاص بي. ما لم أفهم خطأ (قد يكون هذا هو الحال) ، لا يجب أن تتأكد أكسيوس من أن الخادم قد أعاد خطأ قبل أن يرمي خطأ؟

@ hhowe29 استخدم circular-json

لقد وجدت هذا الموضوع مثل العديد من الآخرين وأنا أستخدم axios مع وحدات vue.js و vuex.

يمسك إجراء وحدة vuex الخاص بي بخطأ axios ويقوم بتشغيل الالتزام (ERROR_HAPPENED ، خطأ) لتشغيل طفرة ERROR_HAPPENED للوحدة النمطية vuex. لكن الخطأ يصل بدون خاصية الاستجابة الخاصة به مما يؤدي إلى عدم تحديد الاستجابة للخطأ إذا حاولت ضبط الاستجابة على حالة vuex.

إذا قمت بوحدة تحكم سجل (error.response) في الإجراء ، قبل الالتزام () ، يمكنني رؤية الاستجابة. لذلك على الأرجح يتم إفسادها بفعل vuex.

إما الالتزام (ERROR_HAPPENED ، error.response.data) أو تحقق مما إذا كان 401 في الإجراء وتشغيل بعض الالتزام الآخر اعتمادًا على رمز الحالة. لأن هذا التشويه يحدث فقط مع رمز 401. تنتقل أخطاء أخرى مثل 404 أو 500 إلى طفراتي.

غير مشوهة. لا يفسد Vuex هذا ، ولا حتى عن طريق الخطأ.
تتسبب بعض أنواع الأخطاء ، في الغالب داخل معترضات أكسيوس ، في عدم كشف ذلك.

بعض التحديث؟

AllanPinheiroDeLima آسف على الرد المتأخر ولكن لا أعتقد أن أي شخص يكتب intercepter على كل موقع واحد من رمز أي شخص. نكتب intercepter مرة واحدة على قاعدة رمز ونستخدمها كفئة مساعدة ، هذا رقم 1. رقم 2 ، كان الاستعلام الأولي هو أنهم لم يتلقوا _ استجابة خطأ الخادم_ ، وبدلاً من ذلك ، حصلوا على خطأ جافا سكريبت _ في try catch كتلة axios error intercepter بشكل أساسي كبرنامج وسيط لحل هذه المشكلة إذا كنت لا تريد تغيير طرقك في الترميز أو تغيير قاعدة التعليمات البرمجية الكبيرة.

نعم ، أوافق. لقد وجدت حلاً لهذه المشكلة عن طريق الدمج في الخادم الخاص بي بدلاً من استخدام 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 لدي الاستجابة الصحيحة من واجهة برمجة التطبيقات: 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.

نجح هذا بالنسبة لي (مع مساعد Laravel abort: abort (500 ، 'message'))
""
. صيد (خطأ => {
console.log (error.response.data.message) ،
}) ؛

""

هل لدى أي شخص مثال عملي كامل بخلاف قصاصة الكود التي تقول أن هذا قد نجح؟ لا يساعد القصاصة المكونة من سطر واحد كثيرًا إذا لم تكن لديك فكرة عن من كانوا يشيرون إليه في هذا الموضوع ، حيث وضعوا قصاصة الكود ، كيف يبدو شكل رمز العمل النهائي؟

أحاول اكتشاف الخطأ في المستقبِل وبناءً على رمز الخطأ ، إما أن تنهي الطلب هناك بإعادة التوجيه إذا كان 401 لتسجيل الدخول ، أو إذا كان 422 يسمح للطلب بالعودة إلى مكون الاستدعاء للسماح بتحديث أخطاء النموذج.

أيه أفكار؟

أنا أستخدم أكسيوس Nuxt ويبدو معترض 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
      }
    },

شكرا،
ديف

عندما لا يكون هناك إنترنت ، يكون الخطأ. الاستجابة غير محدد - هل هذه هي أفضل طريقة؟

حصلت على خطأ في نص عادي ، كان علي استخدام ما يلي لتحويل خطأ في كائن.

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

هذا يرجع إلى الخادم وليس Axios ، هل حاولت التنقيب في ملف
error.response.status ، إذا كان غير محدد ، فأنت تعلم أنه إنترنت
مشكلة في الاتصال أو خطأ في بناء الجملة في JS الخاص بك

يوم الأربعاء 2 كانون الثاني 2019 الساعة 15:40 إبراهيم أزهر أرمار < [email protected]
كتب:

حصلت على خطأ في نص عادي ، واضطررت إلى استخدام ما يلي لتحويل الخطأ في
شيء.

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

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على 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. كيف أشرح له أن أكسيوس لا يتعامل مع رسالة خطأ 500؟

يرسل لي مبرمج Java رسالة خطأ مع خطأ 500 ولا يمكنني التعامل مع هذه الرسالة. لذلك أطلب منه إعادة الحالة 200 مع وجود رسالة خطأ ردًا على ذلك ، لكنه غاضب مني ويقول إن عميل HTTP الخاص به يرى جميع الرسائل ذات الحالة 500. إنه يعتقد أنني غبي لأنني لا أستطيع العثور على رسالة خطأ بحالة 500. كيف أشرح له أن أكسيوس لا يتعامل مع رسالة خطأ 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 بغض النظر ، ولكن هناك ممارسة سيئة للغاية لإعادتها عن قصد من جانب الخادم في رأيي ...

أنا أيضا أتلقى خطأ. الرد غير محدد ثم أحاول الكود أدناه.

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

إنها حشرة

دانيال ستيرن [email protected] 2019 年 2 28 日 周四 04:39 写道 ：

اسمحوا لي أن ألخص هذه المناقشة.

TL ؛ د:
الجميع يمثل عدم القدرة على اكتشاف أخطاء HTTP مشكلة.
DEVELOPERS عدم القدرة على أخطاء 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 / ImprovementError". يتم إضافة كائن الطلب إلى الخطأ. من المنطقي إضافة استجابة إلى الإجابة نظرًا لوجود معلمة واحدة فقط في واجهات برمجة التطبيقات المستندة إلى الوعد (مكتبة الطلب ترجع الخطأ كمعامل أول والاستجابة في الثانية). ولكن ليس من المنطقي إضافة كل الطلب. تغيير الكود بسيط للغاية 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)

الإصدار

"محاور": "^ 0.15.3"

كذلك هنا...

في تجربتي:

"تعديل من console.log (خطأ) إلى console.log (error.response) في الصيد."

عملت بشكل أفضل مع console.log (error.response.data) في الصيد.

axios.interceptors.response.use (خالية ، خطأ => {
عودة الخطأ.
}) ؛

getClients: غير متزامن (حالة) => {
الدقة الثابتة = انتظار axios.get ( ${BASE_API}/clients )؛
console.log ('الدقة' ، الدقة) ؛
إذا (الدقة) {
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 .....
} catch (e)
{
console.log (ه)

}

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

شكرا جزيلا! ساعد كثيرا!

لا يزال يحصل على هذه المشكلة. على مصحح أخطاء الكروم ، تكون الاستجابة صحيحة ، لكن المحور يُرجع "Request failed with status code 403" بدلاً من ذلك

ما زلت أعاني من هذا وأنا في حيرة من أمري. حاولت أن أفهم التعليقات أعلاه - ولكن لماذا بالضبط تعود أكسيوس غير محددة عندما يكون هناك خطأ؟
try{ const res = await axios.get("someurl"); return res; } catch(e) { console.log(e); }
res غير محدد على الرغم من أن الخادم يرسل ردًا مع رسالة بداخله بسبب عدم نجاحه. ولا يمكنني الحصول على تلك البيانات ... لماذا ؟؟

** تحرير: وجدت الخطأ الخاص بي - لا شيء خطأ بالنسبة لي مع أكسيوس. انظر تعليقي بتعليقي أسفل. باختصار ، لم تكن أجهزة الاعتراض الخاصة بي تمرر بيانات الخطأ مرة أخرى عبر خط أنابيب أكسيوس ، لذلك كنت دائمًا أحصل على غير محدد.

HoogsterInc ألق نظرة على تعريفات TypeScript هنا
يمكنك فعل شيء كهذا

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

شكرًا لك على الرد الذي يحاول مساعدة konstantinblaesi - لقد اكتشفت

بالنسبة لي ، كان لدي جهاز اعتراض تم إعداده للتحقق من مصادقة المستخدم ، والذي إذا لم تتم مصادقته بإرسال رمز خطأ محدد. ومع ذلك ، لم أكن أمرر بيانات الخطأ عندما لا يتطابق الخطأ مع رمز غير مصدق ... تنهد ... خطأ سيئ سخيف. لذلك بعد التحقق من رمز الخطأ غير المصدق ، تأكدت من إرجاع Promise.reject (خطأ) ؛ - هذا حل مشكلتي وتأتي بيانات الخطأ كاملة الآن.

يمكنك استخدام err.toJSON()

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

https://github.com/axios/axios#handling -errors

(مجموعة للعالمية)

في 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) }
   );

أكسيوس & التقاط 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)
});

_ تعديل من 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 الصحيحة من الخادم.

بالنسبة إلى سبب عدم وجود خاصية "استجابة" بدون هذا الإصلاح ، يبدو أنها مرتبطة بـ settle في axios.js حول السطر 1171:

        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)

خرج علامة تبويب الشبكة
{"الاسم": ["حقل الاسم مطلوب."]، "الأجزاء": ["حقل الأجزاء مطلوب."]}

من المفترض أن أرى كائنًا يحتوي على التحقق من صحة نموذج 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

• إصدار أكسيوس: ^ 0.16.2
• VueJS 2.3.4
• برنامج التحويل البرمجي Vue-template-compiler 2.3.4
• Laravel-mix
• البيئة: العقدة v6.4.0 ، الكروم 58 ، نظام التشغيل Mac OSX 10.12.4

axios.post ('/ formulas / create'، {
اسم: ""،
القطع: ""
})
.ومن بعد(
(استجابة) => {console.log (response)} ،
) .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 نعم ، لكن في حالتي ليس لديّ _not_ error.response - إنه غير محدد ، على الرغم من إرسال الطلب واستلام الرد

error.response هو كائن ، وسوف يخرج [كائن ، كائن] في سجل وحدة التحكم.
يجب عليك استخدام error.reposne.data للوصول إلى رسالة الخطأ.
الرجوع: https://itnext.io/javascript-error-handling-from-express-js-to-react-810deb5e5e28

إذا رأيت [كائن ، كائن] على console.log ، فما عليك سوى تنفيذ 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 موضحًا أين كانت بيانات الإدخال خاطئة ، ولكن في المحور ، يكون كائن الخطأ. .