ฉันจะรับรหัสสถานะจากข้อผิดพลาด http ใน Axios ได้อย่างไร


204

นี่อาจดูเหมือนโง่ แต่ฉันพยายามรับข้อมูลข้อผิดพลาดเมื่อคำขอล้มเหลวใน Axios

axios.get('foo.com')
    .then((response) => {})
    .catch((error) => {
        console.log(error) //Logs a string: Error: Request failed with status code 404
    })

แทนที่จะเป็นสตริงมันเป็นไปได้ไหมที่จะรับอ็อบเจกต์ด้วยรหัสสถานะและเนื้อหา? ตัวอย่างเช่น:

Object = {status: 404, reason: 'Not found', body: '404 Not found'}

คำตอบ:


371

สิ่งที่คุณเห็นคือสตริงที่ส่งคืนโดยtoStringเมธอดของerrorวัตถุ ( errorไม่ใช่สตริง)

หากได้รับการตอบสนองจากเซิร์ฟเวอร์errorวัตถุจะมีresponseคุณสมบัติ:

axios.get('/foo')
  .catch(function (error) {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
  });

9
คุณช่วยอธิบายความมหัศจรรย์ที่อยู่เบื้องหลังมันกลายเป็นสตริงโดยอัตโนมัติได้หรือไม่ถ้าฉันไม่ได้อ้างถึงresponseคุณสมบัตินี้?
เซบาสเตียนโอลเซ่น

7
console.logใช้toStringวิธีการจัดรูปแบบErrorวัตถุ มันไม่มีอะไรเกี่ยวข้องกับการอ้างอิงถึง responseคุณสมบัติ
Nick Uraltsev

2
ฉันยังสับสนอยู่สิ่งนี้เป็นข้อผิดพลาดของวัตถุที่ผิดพลาดหรือไม่? ถ้าฉัน console.log วัตถุฉันได้รับวัตถุไม่ใช่สายอักขระ
เซบาสเตียนโอลเซ่น

3
มันขึ้นอยู่กับการใช้งาน ตัวอย่างเช่นการใช้งาน node.js ของการconsole.log จัดการ Errorวัตถุเป็นกรณีพิเศษ ฉันไม่สามารถบอกได้ว่ามันถูกนำไปใช้ในเบราว์เซอร์อย่างไร แต่ถ้าคุณโทรconsole.log({ foo: 'bar' });และconsole.log(new Error('foo'));ใน Chrome DevTools Console คุณจะเห็นว่าผลลัพธ์นั้นดูแตกต่าง
Nick Uraltsev

5
ต้องเป็นสิ่งพื้นเมือง มันยังแปลกอยู่
เซบาสเตียนโอลเซ่น

17

ดังที่ @Nick กล่าวว่าผลลัพธ์ที่คุณเห็นเมื่อคุณconsole.logใช้ JavaScript Errorวัตถุขึ้นอยู่กับการใช้งานที่แน่นอนconsole.logซึ่งแตกต่างกันไปและ (imo) ทำให้การตรวจสอบข้อผิดพลาดน่ารำคาญอย่างไม่น่าเชื่อ

หากคุณต้องการเห็นErrorวัตถุเต็มและข้อมูลทั้งหมดที่ดำเนินการผ่านtoString()เมธอดคุณสามารถใช้JSON.stringify :

axios.get('/foo')
  .catch(function (error) {
    console.log(JSON.stringify(error))
  });

8

ฉันใช้ตัวรับสัญญาณนี้เพื่อรับการตอบสนองข้อผิดพลาด

const HttpClient = axios.create({
  baseURL: env.baseUrl,
});

HttpClient.interceptors.response.use((response) => {
  return response;
}, (error) => {
  return Promise.resolve({ error });
});

6

ด้วย TypeScript มันจะง่ายต่อการค้นหาสิ่งที่คุณต้องการด้วยประเภทที่ถูกต้อง

import { AxiosResponse, AxiosError } from 'axios'

axios.get('foo.com')
  .then(response: AxiosResponse => {
    // Handle response
  })
  .catch((reason: AxiosError) => {
    if (reason.response!.status === 400) {
      // Handle 400
    } else {
      // Handle else
    }
    console.log(reason.message)
  })

2

คุณสามารถใช้ตัวดำเนินการสเปรด ( ...) เพื่อบังคับให้มันเป็นวัตถุใหม่ดังนี้:

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

ระวัง: นี่จะไม่ใช่ตัวอย่างของข้อผิดพลาด


1

นี่เป็นข้อผิดพลาดที่รู้จักให้ลองใช้ "axios": "0.13.1"

https://github.com/mzabriskie/axios/issues/378

"axios": "0.12.0"ฉันมีปัญหาเดียวกันดังนั้นฉันสิ้นสุดการใช้ มันใช้งานได้ดีสำหรับฉัน


1
นี่ไม่ใช่ปัญหาเดียวกันที่ฉันมีไม่มีแม้แต่วัตถุที่เกี่ยวข้องเมื่อฉันเข้าสู่ระบบerror
เซบาสเตียนโอลเซ่น

1

มีตัวเลือกใหม่ที่เรียกว่าvalidateStatusในคำขอการตั้งค่า คุณสามารถใช้เพื่อระบุว่าจะไม่ส่งข้อยกเว้นหากสถานะ <100 หรือสถานะ> 300 (พฤติกรรมเริ่มต้น) ตัวอย่าง:

const {status} = axios.get('foo.com', {validateStatus: () => true})

0

คุณสามารถใส่ข้อผิดพลาดลงในวัตถุและบันทึกวัตถุเช่นนี้

axios.get('foo.com')
    .then((response) => {})
    .catch((error) => {
        console.log({error}) // this will log an empty object with an error property
    });

หวังว่าสิ่งนี้จะช่วยให้ใครบางคนที่นั่น


0

เพื่อรับรหัสสถานะ http ที่ส่งคืนจากเซิร์ฟเวอร์คุณสามารถเพิ่มvalidateStatus: status => trueตัวเลือก axios:

axios({
    method: 'POST',
    url: 'http://localhost:3001/users/login',
    data: { username, password },
    validateStatus: () => true
}).then(res => {
    console.log(res.status);
});

ด้วยวิธีนี้การตอบสนอง http ทุกครั้งจะช่วยแก้ไขสัญญาที่ส่งคืนจาก axios

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


0

มันเป็นรหัสของฉัน: ทำงานให้ฉัน

 var jsonData = request.body;
    var jsonParsed = JSON.parse(JSON.stringify(jsonData));

    // message_body = {
    //   "phone": "5511995001920",
    //   "body": "WhatsApp API on chat-api.com works good"
    // }

    axios.post(whatsapp_url, jsonParsed,validateStatus = true)
    .then((res) => {
      // console.log(`statusCode: ${res.statusCode}`)

            console.log(res.data)
        console.log(res.status);

        // var jsonData = res.body;
        // var jsonParsed = JSON.parse(JSON.stringify(jsonData));

        response.json("ok")
    })
    .catch((error) => {
      console.error(error)
        response.json("error")
    })
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.