สนใจเรียนรู้ JavaScript หรือไม่? รับ ebook ของฉันที่ jshandbook.com
แนะนำตัว
Axios เป็นไลบรารี JavaScript ยอดนิยมที่คุณสามารถใช้เพื่อดำเนินการร้องขอ HTTP ใช้งานได้ทั้งในแพลตฟอร์มเบราว์เซอร์และ Node.js
รองรับเบราว์เซอร์รุ่นใหม่ทั้งหมด รวมถึง IE8 ขึ้นไป
เป็นไปตามสัญญา และช่วยให้เราเขียนโค้ด async/await เพื่อดำเนินการตามคำขอ XHR ได้อย่างง่ายดายมาก
การใช้ Axios มีข้อได้เปรียบเหนือ Fetch API แบบเนทีฟค่อนข้างน้อย:
- รองรับเบราว์เซอร์รุ่นเก่า (การดึงข้อมูลต้องใช้ polyfill)
- มีวิธียกเลิกคำขอ
- มีวิธีตั้งค่าการหมดเวลาตอบกลับ
- มีการป้องกัน CSRF ในตัว
- รองรับความคืบหน้าในการอัปโหลด
- ดำเนินการแปลงข้อมูล JSON อัตโนมัติ
- ทำงานใน Node.js
การติดตั้ง
สามารถติดตั้ง Axios ได้โดยใช้ npm:
npm install axios
หรือเส้นด้าย:
yarn add axios
หรือเพียงแค่รวมไว้ในหน้าของคุณโดยใช้ unpkg.com:
<script src="https://unpkg.com/axios/dist/axios.min.js"><;/script>
Axios API
คุณสามารถเริ่มคำขอ HTTP จาก axios
วัตถุ:
axios({ url: 'https://dog.ceo/api/breeds/list/all', method: 'get', data: { foo: 'bar' }})
แต่เพื่อความสะดวก โดยทั่วไปคุณจะใช้
axios.get()
axios.post()
(เหมือนใน jQuery คุณจะใช้ $.get()
และ $.post()
แทน $.ajax()
)
Axios นำเสนอวิธีการสำหรับกริยา HTTP ทั้งหมด ซึ่งไม่ค่อยได้รับความนิยมแต่ยังคงใช้อยู่:
axios.delete()
axios.put()
axios.patch()
axios.options()
นอกจากนี้ยังมีวิธีการรับส่วนหัว HTTP ของคำขอ โดยละทิ้งเนื้อหา
รับคำขอ
วิธีหนึ่งที่สะดวกในการใช้ Axios คือการใช้ไวยากรณ์ async/await ที่ทันสมัย (ES2017)
ตัวอย่าง Node.js นี้สอบถาม Dog API เพื่อดึงรายชื่อสายพันธุ์สุนัขทั้งหมดโดยใช้ axios.get()
, และมันนับพวกเขา:
const axios = require('axios')const getBreeds = async () => { try { return await axios.get('https://dog.ceo/api/breeds/list/all') } catch (error) { console.error(error) }}const countBreeds = async () => { const breeds = await getBreeds() if (breeds.data.message) { console.log(`Got ${Object.entries(breeds.data.message).length} breeds`) }}countBreeds()
หากคุณไม่ต้องการใช้ async/await คุณสามารถใช้รูปแบบ Promises ได้:
const axios = require('axios')const getBreeds = () => { try { return axios.get('https://dog.ceo/api/breeds/list/all') } catch (error) { console.error(error) }}const countBreeds = async () => { const breeds = getBreeds() .then(response => { if (response.data.message) { console.log( `Got ${Object.entries(response.data.message).length} breeds` ) } }) .catch(error => { console.log(error) })}countBreeds()
เพิ่มพารามิเตอร์ในคำขอ GET
การตอบสนอง GET สามารถมีพารามิเตอร์ใน URL ได้ดังนี้:https://site.com/?foo=bar
.
ด้วย Axios คุณสามารถดำเนินการได้โดยใช้ URL นั้น:
axios.get('https://site.com/?foo=bar')
หรือคุณสามารถใช้ params
คุณสมบัติในตัวเลือก:
axios.get('https://site.com/', { params: { foo: 'bar' }})
คำขอโพสต์
การดำเนินการตามคำขอ POST ก็เหมือนกับการทำคำขอ GET แต่แทนที่จะเป็น axios.get
คุณใช้ axios.post
:
axios.post('https://site.com/')
วัตถุที่มีพารามิเตอร์ POST คืออาร์กิวเมนต์ที่สอง:
axios.post('https://site.com/', { foo: 'bar' })
สนใจเรียนรู้ JavaScript หรือไม่? รับ ebook ของฉันที่ jshandbook.com