home

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

คำขอ HTTP อย่างง่ายใน JavaScript โดยใช้ Axios

สนใจเรียนรู้ 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