TypeScript:
ส่งคำขอ HTTP

วิธีการ:

ใน TypeScript คุณจะใช้ Fetch API เป็นหลักในการส่งคำขอ HTTP นี่คือตัวอย่างโค้ดแบบเร่งรัด โดยใช้ async/await เพื่อความง่าย:

async function fetchData(url: string): Promise<void> {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchData('https://jsonplaceholder.typicode.com/todos/1');

ตัวอย่างผลลัพธ์สำหรับคำขอที่สำเร็จ:

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

ศึกษาเพิ่มเติม

คำขอ HTTP เป็นสิ่งที่สำคัญตั้งแต่เริ่มต้นของเว็บ มันคือวิธีที่เบราว์เซอร์และเซิร์ฟเวอร์สื่อสารกัน ก่อนที่จะมี fetch มี XMLHttpRequest (XHR) ที่ทำงานนี้แต่รู้สึกเหมือนกับการทำเอกสาร fetch ซึ่งเป็นทางเลือกแบบใหม่ เป็นพื้นฐานของ promise, สะอาดกว่า และเป็นส่วนหนึ่งของวัตถุ window ในเบราว์เซอร์สมัยใหม่ส่วนใหญ่

ทางเลือกอื่นๆ ของ fetch ใน TypeScript รวมถึงไลบรารีอย่าง Axios ซึ่งมีคุณสมบัติเพิ่มเติมและบางครั้งง่ายต่อการจัดการ Axios แปลงข้อมูล JSON โดยอัตโนมัติ จัดการการยกเลิกคำขอ และมีการจัดการข้อผิดพลาดที่ดีกว่า

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

ดูเพิ่มเติม

• MDN Web Docs เกี่ยวกับ Fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
• Axios GitHub Repo: https://github.com/axios/axios
• เปรียบเทียบไลบรารีคำขอ HTTP: https://www.npmtrends.com/axios-vs-fetch