ทำความรู้จักกับ Axios — Promise based HTTP client แบบหมดเปลือก

การรับส่งข้อมูลจาก Client ไปยัง Server ในการพัฒนาเว็บไซต์ถือเป็นเรื่องพื้นฐานที่นักพัฒนาจะต้องได้สัมผัสและคุ้นเคยกันเป็นอย่างดี ผมได้นำ lib ที่ผมได้ลองใช้ในหลายๆโปรเจคมามาแนะนำ ว่า lib ตัวนี้มี features , การใช้งานและการตั้งค่าเป็นยังไง ถึงทำให้ผมติดใจใช้มันจนถึงทุกวันนี้ตั้งแต่รู้จักเลยก็ว่าได้

ในบทความนี้จะพาไปรู้จักกับเจ้า Axios, ความสามารถ, ตัวอย่างและทริคในการใช้งาน

Photo by Dušan Smetana on Unsplash

Axios คืออะไร

อ่านว่า : acks — ee — oh-ss (แอก-ซี-โอส)

axios/axios

Axios คือ open source JavaScript libary สำหรับ http request เรียกง่ายๆ ก็คือ ตัวที่ใช้สำหรับเชื่อมต่อกับ API Service เพื่อการรับส่งข้อมูลแบบ RESTful API โดยที่เจ้า axios จะทำหน้าที่เป็นตัวกลางในการจัดการทั้ง method, data, headers, security และอื่นๆ ที่เกี่ยวข้องกับการรับส่งข้อมูล ความเจ๋งของ axios ก็คือรองรับ Promises async/await ได้ และยังรองรับ TypeScript อีกด้วย

หากเปรียบเทียบระหว่าง lib ที่คล้ายกันในตลาด ณ ปัจจุบัน (มี.ค 2020) จะเห็นได้ว่าเจ้า axios ยังเป็นรองในเรื่องของการ Download อยู่ แต่หากเป็น stars บน Github แล้วละก็คือยังเป็นที่ 1 อยู่จากดาวที่ห่างกันอยู่หลายเท่าตัว

axios vs node fetch vs request vs request promise vs superagent | npm trends

Ref: https://www.npmtrends.com/axios-vs-request-vs-request-promise-vs-node-fetch-vs-superagent

มี Feature เด่นมีอะไรบ้าง

• สร้าง XMLHttpRequests ใน Browser
• สร้าง HTTP Request ใน Node.js
• รองรับ Promise API
• รองรับ Intercept, Transform ได้ทั้ง request, response
• สามารถยกเลิกการ Request ได้ (Cancellation)
• แปลงข้อมูลเป็น JSON อัตโนมัติ
• รองรับ TypeScript

Browser ที่รองรับ

ทำอะไรได้บ้าง

Method ที่ Axios provided ให้ใช้งานทั่วไป

// เซ็ต, เช็คค่าเริ่มต้น
axios.request(config)
axios.head(url[, config])
axios.options(url[, config])
// หลักๆที่ใช้งานทั่วไป
axios.get(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios.delete(url[, config])

Concurrency

axios.all(iterable)
axios.spread(callback)

*หมายเหตุ: หากไม่อยากใช้ Concurrency ของ axios ก็สามารถใช้ Promise ในการจัดการได้ (ตัวอย่างด้านล่าง)

Custom instance

axios สามารถสร้าง custom instance axios ได้ โดยสามารถ config ต่างกันสำหรับการใช้งานที่ซับซ้อนหรือแยกจากกันได้

axios.create(customConfig)

เริ่มต้นการติดตั้ง 🛠

Requirement

• Nodejs v.12

Yarn

yarn add axios

NPM

npm install axios --save

Bower

bower install axios

CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// Or
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

ตัวอย่างและวิธีการใช้งาน

เริ่มต้นด้วยการใช้ axios แบบง่าย ๆ โดย ใส่ config เข้าไปใน function เลย

axios ก็ provide method พื้นฐาน ให้ใช้งานดังตัวอย่างต่อไปนี้

Custom instance ไว้ใช้เอง

เราสามารถ config ค่าต่างๆที่เราต้องการได้ใน instance (axios.create())ได้เลย โดยไม่ต้องใส่ config ใหม่ทุกๆ ครั้งที่มีการเรียกใช้งาน axios ในครั้งต่อไป ทำให้เรามี instance ที่ config ไว้แล้วได้หลาย instance แต่ว่าก็สามารถกำหนด axios ในรูปแบบของ global ได้เช่นกัน

จัดการ Concurrency ด้วย Promises, async/await

เราสามารถ handle async/await ได้โดย axios นั้น Provide และ support Promises โดยจะยกตัวอย่าง การทำงาน Concurrency ของ axios ก่อน

ตามด้วย async/await

หากต้องการยิง API มากกว่า 1 เส้น ก็สามารถจัดการได้ โดยใช้ Promise ในการรอ Response จาก API ทั้งหมดที่ยิงออกไปให้ครบก่อนจึงจะสามารถทำงานในขั้นตอนถัดไปได้

Interceptors

interceptor ของ axios นั้นสามารถเรียกได้ว่าเป็น middleware ที่ดักได้ทั้งตอน request และ response เราสามารถเปลี่ยนแปลง config ก่อน Request หรือ แก้ ไข response

ในด้านล่างจะเป็นการยกตัวอย่าง การใส่ header Authorization ก่อน และการ handle response error

อีกทั้งเราสามารถใช้กับ instance และลบ interceptor ที่มีการ handle ออกไปได้

Handling Errors

เราามารถจัดการกับ error ต่างๆได้ ดังตัวอย่างด้านล่าง โดยส่วนมากก็จะเก็บเป็น error log หรือ error tracking โดยดักได้จากตรงนี้หรือใน intereptor ก็ได้เช่นกัน

Cancellation (ยกเลิก Request)

หากเราต้องการที่จะยกเลิก request จะต้องสร้าง token สำหรับการยกเลิกไว้ตลอดและจะต้องมีการแนบไปพร้อมกับ config ทุกครั้งที่มีการใช้งาน หาก token นั้นได้รับการยกเลิก(ยืนยันการยกเลิก) API ที่ถูก config ด้วย token นั้น ก็จะทำการยกเลิก request ให้อัตโนมัติ โดยไม่ต้อง generate cancel token ใหม่ทุกครั้ง

จากตัวอย่างหาก getUser เกิดการยกเลิก request ขึ้นมา จะทำให้ getProduct ถูกยกเลิกไปด้วยเนื่องจากมีการใช้ cancelToken เดียวกัน

ใช้งานกับ TypeScript

Ref: https://www.freecodecamp.org/news/its-time-to-give-typescript-another-chance-2caaf7fabe61/

axios นั้นถูก define โดย TypeScript อยู่แล้วจึงไม่จำต้องเพิ่ม type interface สำหรับการใช้งานของ axios เราสามารถเรียก interface จาก axios ได้เลย ตัวอย่างด้านล่างจะเป็นการเรียกใช้ interface ของ axios

ใช้นามสกุล js ใน gist git เพื่อแสดง highlight syntax

Tips & Trick

Photo by Seyi Ariyo on Unsplash

• ส่ง params, query string

• upload รูปผ่าน axios

เจ้า axios ถือว่าเป็น lib สำหรับ request API ตัวโปรดของผมเลยเรียกได้ว่าเป็นลูกรักเลยก็ว่าได้ อยากจะฝากให้คนที่อ่านมาถึงตรงนี้ได้ไปลองเจ้า axios กัน หวังว่าคงจะติดใจใน features ของมันที่ทำให้ชาวเดฟอย่างเราๆใช้งานได้ง่ายและจัดการได้ดีเลยทีเดียว

axios/axios

axios vs node fetch vs request vs request promise vs superagent | npm trends