0Pricing
Vue Academy · บทเรียน

คำขอ HTTP ด้วย Axios

ส่งคำขอ GET และ POST ไปยัง API ด้วย Axios

คำขอ HTTP ด้วย Axios เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

การสื่อสารกับ API

แอปจริงส่วนใหญ่โหลดข้อมูลจากแบ็กเอนด์ผ่าน HTTP แม้เบราว์เซอร์จะมี fetch ในตัว แต่โปรเจกต์ Vue จำนวนมากใช้Axios ซึ่งเป็นไคลเอนต์ HTTP ยอดนิยมที่ใช้พรอมิสเป็นพื้นฐาน มี API ที่ใช้งานสะดวกกว่า การแปลงข้อมูล JSON โดยอัตโนมัติ และตัวเลือกการกำหนดค่าที่ทรงพลัง

การติดตั้ง Axios

เพิ่ม Axios ลงในโปรเจกต์ด้วยตัวจัดการแพ็กเกจ จากนั้นนำเข้าในจุดที่ต้องการใช้งาน

npm install axios

การนำเข้า Axios

นำเข้าค่าที่ส่งออกเริ่มต้นเพื่อเริ่มสร้างคำขอ

import axios from "axios"

คำขอแบบ GET

ใช้ axios.get เพื่อดึงข้อมูล เมธอดนี้คืนค่าพรอมิสที่ให้ผลลัพธ์เป็นออบเจ็กต์การตอบกลับ โดยเนื้อหาอยู่ใน response.data และถูกแปลงจาก JSON ไว้แล้ว

axios.get("https://api.example.com/users")
  .then(response => {
    console.log(response.data)
  })

คำขอแบบ POST

ใช้ axios.post เพื่อส่งข้อมูล อาร์กิวเมนต์ตัวที่สองคือเนื้อหาคำขอ ซึ่ง Axios จะแปลงเป็น JSON โดยอัตโนมัติ

axios.post("https://api.example.com/users", {
  name: "Grace",
  email: "grace@example.com"
})

การใช้การทำงานแบบอะซิงโครนัสและการรอผล

พรอมิสจะอ่านได้ชัดเจนขึ้นเมื่อใช้ async/await กำหนดให้ฟังก์ชันทำงานแบบอะซิงโครนัสและรอผลลัพธ์ของคำขอ

async function loadUsers() {
  const response = await axios.get("/api/users")
  return response.data
}

ภายในเมธอดของ Vue

รูปแบบที่ใช้กันทั่วไปคือเรียก Axios จากเมธอดของคอมโพเนนต์ แล้วเก็บผลลัพธ์ไว้ในข้อมูลแบบรีแอกทีฟ

export default {
  data() {
    return { users: [] }
  },
  methods: {
    async fetchUsers() {
      const res = await axios.get("/api/users")
      this.users = res.data
    }
  }
}

การกำหนดค่าคำขอ: พารามิเตอร์คำค้น

ส่งออบเจ็กต์ params เพื่อเพิ่มพารามิเตอร์ในสตริงคำค้น Axios จะสร้าง URL ให้คุณ

axios.get("/api/users", {
  params: { page: 2, limit: 10 }
})
// requests /api/users?page=2&limit=10

การกำหนดค่าคำขอ: ส่วนหัว

ส่งส่วนหัวแบบกำหนดเอง เช่น โทเค็นการอนุญาต ผ่านออบเจ็กต์การกำหนดค่า

axios.get("/api/profile", {
  headers: {
    Authorization: "Bearer " + token
  }
})

การกำหนด URL พื้นฐาน

การเขียน URL แบบเต็มซ้ำทุกจุดอาจทำให้เกิดข้อผิดพลาดได้ง่าย สร้างอินสแตนซ์ของ Axios ที่มี baseURL และค่าเริ่มต้นที่ใช้ร่วมกัน จากนั้นใช้อินสแตนซ์นั้นตลอดทั้งแอป

import axios from "axios"

export const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 5000,
  headers: { "Content-Type": "application/json" }
})

// elsewhere: api.get("/users")

เมธอด HTTP อื่น ๆ

Axios รองรับกริยา HTTP ที่ใช้กันทั่วไป ได้แก่ get, post, put, patch และ delete เลือกใช้เมธอดที่ตรงกับการทำงานที่ต้องการ

api.put("/users/1", { name: "Updated" })
api.patch("/users/1", { name: "Patched" })
api.delete("/users/1")

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับคำขอของ Axios

ทบทวน

Axios คือไคลเอนต์ HTTP ที่ใช้พรอมิสเป็นพื้นฐาน ใช้ get, post, put, patch และ delete ส่ง params และ headers ผ่านออบเจ็กต์การกำหนดค่า และควรใช้ async/await เพื่อให้อ่านได้ง่ายขึ้น อินสแตนซ์ที่ใช้ร่วมกันผ่าน axios.create และมี baseURL ช่วยให้คำขอเป็นไปตามหลัก DRY ต่อไปคุณจะดึงข้อมูลในจุดที่เหมาะสมของวงจรชีวิตคอมโพเนนต์

คำถามที่พบบ่อย

บทเรียน “คำขอ HTTP ด้วย Axios” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คำขอ HTTP ด้วย Axios” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คำขอ HTTP ด้วย Axios”

ส่งคำขอ GET และ POST ไปยัง API ด้วย Axios คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “คำขอ HTTP ด้วย Axios” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. คำขอ HTTP ด้วย Axios
  2. ฮุกวงจรชีวิตและการดึงข้อมูล
  3. การจัดการข้อผิดพลาดและตัวดักจับส่วนกลาง
← กลับไปที่ Vue Academy