home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> ซอฟต์แวร์ >> เบราว์เซอร์

ลดความซับซ้อน HTTP Request ใน JavaScript ด้วย Axios: คู่มือมืออาชีพ

สนใจเรียน JavaScript? รับ ebook ของผมที่ jshandbook.com

บทนำ

Axios เป็นไลบรารี JavaScript ยอดนิยมที่คุณสามารถใช้ทำ HTTP requests ได้ ทำงานทั้งใน Browser และ Node.js

รองรับเบราว์เซอร์สมัยใหม่ทุกตัว รวมถึง IE8 ขึ้นไป

มันเป็น Promise-based ซึ่งช่วยให้เราเขียนโค้ด async/await เพื่อทำ XHR requests ได้อย่างง่ายดาย

การใช้ Axios มีข้อได้เปรียบหลายประการเหนือ Fetch API แบบเนทีฟ:

  • รองรับเบราว์เซอร์เก่า (Fetch ต้องใช้ polyfill)
  • มีวิธียกเลิก request (abort)
  • มีวิธีตั้งค่า response timeout
  • มี CSRF protection ในตัว
  • รองรับ upload progress
  • ทำการแปลงข้อมูล JSON อัตโนมัติ
  • ทำงานใน Node.js

การติดตั้ง

Axios สามารถติดตั้งผ่าน npm:

npm install axios

หรือ yarn:

yarn add axios

หรือแค่รวมไว้ในหน้าเว็บผ่าน unpkg.com:

<script src="https://unpkg.com/axios/dist/axios.min.js"><;/script>

The Axios API

คุณสามารถเริ่ม HTTP request จากออบเจกต์ 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 verbs ทั้งหมด ซึ่งนิยมน้อยกว่าแต่ยังใช้อยู่:

  • axios.delete()
  • axios.put()
  • axios.patch()
  • axios.options()

มันยังมีเมธอดสำหรับดึง HTTP headers ของ request โดยตัด body ออก

GET requests

วิธีสะดวกหนึ่งในการใช้ Axios คือใช้ syntax 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 คุณสามารถใช้ syntax 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 requests

GET response สามารถมีพารามิเตอร์ใน URL ได้ เช่น: https://site.com/?foo=bar

ด้วย Axios คุณสามารถทำได้โดยใช้ URL นั้นเลย:

axios.get('https://site.com/?foo=bar')

หรือใช้ property params ใน options:

axios.get('https://site.com/', { params: { foo: 'bar' }})

POST Requests

การทำ POST request เหมือน GET request แต่แทน axios.get คุณใช้ axios.post:

axios.post('https://site.com/')

ออบเจกต์ที่มีพารามิเตอร์ POST เป็นอาร์กิวเมนต์ที่สอง:

axios.post('https://site.com/', { foo: 'bar' })
สนใจเรียน JavaScript? รับ ebook ของผมที่ jshandbook.com