[Dev Story] Axios Error Type กับ TypeScript
หลังจากที่ปวดหัวกับวิธีรับมือกับ Axios Error Type เพราะมันทำได้หลายวิธีเหลือเกิน ก็ตกผลึกแล้วว่าจะเอายังไงดี เมื่อเราต้องใช้ TypeScript
3 min read6 days ago
เรามาเริ่มจากตัว Official Document กันก่อน
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});จะเห็นได้ว่า ตัว Official Document ให้ตัวอย่างมาเป็น JS 😅 อย่างเดียว ซึ่งก็ไม่มีปัญหา ถ้าเราเอา Code แบบนี้ไปใช้งานบน TS กับปรับเป็น try…catch ก็จะออกมาในลักษณะนี้
try {
axios.get('/user/12345')
} catch (error: any) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
}แต่มันจะมีประโยชน์อันใด ถ้าเราใช้ TS แต่ไม่ยอมทำ Type ให้ถูกต้อง
ทำอย่างไรดี
เอาละ ทีนี้ก็มาเข้าเรื่องกันได้ มาดูกันว่าเราจะใช้วิธีไหนได้บ้าง
1. ระบุ Type ตรง error ไปเลย
try {
axios.get('/user/12345')
} catch (error: any | AxiosError) {
if (error instanceof AxiosError) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
}
}
วิธีนี้ก็ง่ายดี ตัว IDE ก็สามารถจับ Type ได้ถูกต้อง
2. ใช้ typeguard ที่ Axios เตรียมมาให้
try {
axios.get('/user/12345')
} catch (error: any | AxiosError) {
if (axios.isAxiosError(error)) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
}
}
วิธีนี้เป็นวิธีที่คนแนะนำกันเยอะที่สุด
3. ทำ Generic ใช้
วิธีนี้ เอาจริง ๆ คือ อ่านแล้วไม่เข้าใจ ว่าทำไมต้องทำอะไรให้มันซับซ้อนขนาดนั้นด้วย
