Skip to main content
0
Computer SystemProgramming Concept

ดึงข้อมูลจาก API ง่าย ๆ ด้วย Axios

ในบทความนี้จะนำเสนอวิธีการดึง API ง่าย ๆ ด้วย Axios โดยจะใช้ API ข้อมูลผู้ติดเชื้อ Covid – 19 ของทางกรมควบคุมโรค จะเป็นยังไง มีรายละเอียดยังไง ไปติดตามกันได้เลย !!

Axios คืออะไร ??

Axios ซึ่งเจ้านี่มันเป็น Library JavaScript แบบ Open-Source สำหรับ Http Request เพื่อดึงหรือบันทึกข้อมูล สามารถเชื่อมต่อ API ได้ง่ายดาย ใช้งานได้บนเบราว์เซอร์ และ Node.js โดยมีฟีเจอร์หลัก ๆ ดังนี้

  • สร้าง XMLHttpRequests จากเบราว์เซอร์
  • สร้าง Http Request จาก Node.js
  • รองรับ Promise API
  • แปลงข้อมูลเป็น JSON 
  • รองรับ Client side และป้องกัน XSRF

ส่วนเบราว์เซอร์ที่รองรับ Axios มีตามนี้เลย 

ขอบคุณภาพจาก : https://github.com/axios/axios

มาเริ่มใช้งานเจ้า Axios กันเลยจ้า ก่อนอื่นเราต้องติดตั้งก่อนนะ ซึ่งมันสามารถติดตั้งได้หลายแบบมาก ๆ ดังนี้เลย

npm

$ npm install axios

Bower

$ bower install axios

yarn

$ yarn add axios

jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

unpkg CDN

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

และในบทความนี้จะทดลองเจ้า Axios ดึงข้อมูลผู้ติดเชื้อ Covid-19 ในประเทศไทยจากเว็บไซต์กรมควบคุมโรคโดยใช้ method get โดยมีขั้นตอนดังนี้

สร้างไฟล์ index.html ขึ้นมา และติดตั้ง Axios ด้วย jsDelivr CDN

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="axios.js" defer></script>
      <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
      <title>AXIOS</title>
   </head>
   <body>
      ...
   </body>
</html>

จากนั้นสร้าง axios.js เรียกใช้งาน API ข้อมูลผู้ติดเชื้อ Covid-19 จากกรมควบคุมโรค https://covid19.th-stat.com/th/api 

const getdata = () => {
   axios.get('https://covid19.th-stat.com/json/covid19v2/getTodayCases.json')
   .then(response => {
      console.log(response.data);
   });
};

เราจะได้ข้อมูลใน API ออกมาแล้ววว

จากนั้นลองดึงข้อมูลออกมาแสดงบน HTML บ้าง

index.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="axios.js" defer></script>
      <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
      <title>AXIOS</title>
   </head>
   <body>
      <section id="control-center">
         <button id="get-data">GET</button>
      </section>
      </br>
      <h1>ข้อมูลผู้ติดเชื้อ Covid-19 ของประเทศไทย</h1>
      <h1>อัปเดตเมื่อวันที่ : <span id="updatedate"></span></h1>
      <h1>ผู้ติดเชื้อ : <span id="confirmed"></span></h1>
      <h1>ผู้เสียชีวิต : <span id="deaths"></span></h1>
      <h1>รักษาหาย : <span id="recover"></span></h1>
   </body>
</html>

axios.js

const getBtn = document.getElementById('get-data');
const getconfirmed = document.getElementById('confirmed');
const getrecover = document.getElementById('recover');
const getdeaths = document.getElementById('deaths');
const getupdatedate = document.getElementById('updatedate');

const getdata = () => { 
   axios.get('https://covid19.th-stat.com/json/covid19v2/getTodayCases.json')
   .then(response => {
      console.log(response);
      getconfirmed.innerHTML = response.data.NewConfirmed;
      getrecover.innerHTML = response.data.NewRecovered;
      getdeaths.innerHTML = response.data.NewDeaths;
      getupdatedate.innerHTML = response.data.UpdateDate;
   });
};

getBtn.addEventListener('click', getdata);

ผลลัพธ์

สรุปท้ายบทความ

นี่เราก็สามารถดึงข้อมูลผู้ติดเชื้อ Covid-19 ของประเทศไทยออกมาได้แล้ว ง่ายสุด ๆ ไปเลย เพื่อน ๆ สามารถประยุกต์นำข้อมูลนี้ไปประยุกต์ทำ Dashboard สวย ๆ ได้เลยนะ! 

เจ้า Axios ยังสามารถทำได้อีกหลายอย่างเลย เพื่อน ๆ ลองไปใช้กันดูนะ หากอยากอ่านเพิ่มเติมเกี่ยวกับ Axios  สามารถเข้าไปที่ https://github.com/axios/axios และ https://axios-http.com/  ได้เลยค่ะ หวังว่าตัวอย่างนี้จะเป็นประโยชน์กับเพื่อน ๆ นะ ผิดพลาดประการใดขออภัยด้วยนะคะ 

Kanthima Muangsen

Author Kanthima Muangsen

More posts by Kanthima Muangsen
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า