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

1. XMLHttprequest ตัวอย่างนี้จะเป็นการสร้างเป็น XMLHttprequest objective ขึ้นมา หลักการทำงานของมันก็คือจะต้องสร้างตัวแปร objective ขึ้นมาแล้วทำการยิงตัว request เพื่อขอข้อมูลจาก api และจากนั้นก็ทำการ send ถ้าเกิดว่าเราได้รับข้อมูลตอบกลับมาก็จะใช้ตัว onload เพื่อดูข้อมูลที่ได้รับกลับมาจาก api แล้วทำการ console.log ตัว objective request ออกมาดู
   

   let request=new XMLHttpRequest();
   request.open('GET','https:// jsonplaceholder.typicode.com/users');
   request.send();
   request.onload=()=> {
       console.log(request);
   }

   เมื่อเราได้ข้อมูลแล้วเราก็จะมาทำการแปรงข้อมูลให้เป็น json ก็จะมีการใช้ Json.parse() และจากนั้นก็อย่าลืมทำตัวแจ้ง error กันด้วยนะเขียนได้ออกมาเป็นแบบนี้เลย
   

   let request=new XMLHttpRequest();
   request.open('GET','https://jsonplaceholder.typicode.com/users');
   request.send();
   request.onload = () =>{
   console.log(request);
   if(request.status === 200){
   console.log(JSON.parse(request.response))
   } else{
   console.log('error${request.status}${request.statusText}');
   }}

   ผลลัพธ์ที่ได้

   

2. JQuery ก่อนที่เราจะไปทำ JQuery เราก็ต้องทำการเรียนใช้เจ้าตัว JQuery ซะก่อนโดยสามารถเรียกใช้ได้แบบนี้
   

   src = "https://code.jquery.com/jquery-3.6.0.min.js"​

   เพียงแค่นี้เราก็สามารถใช้งานฟังชั่นต่างๆของ JQuery ได้แล้ว
   แน่นอนว่าการใช้ JQuery ก็ต้องมีการเรียกใช้งานเจ้าตัว JQuery กันก่อนโดยใช้คำสั่ง document และหากเราจะใช้งาน api ต้องมีการใช้ ajax และกำหนด api กับ type โดยจะกดหนดเป็น GET ละทำการเพิ่ม success หากข้อมูลไม่มีอะไรผิดพลาดก็จะทำการ log ออกมาแสดงให้เราเห็น ต่อมาก็จะทำการ เพิ่มตัวเช็ค error ถ้าหากมีข้อผิดพลาดหรือ error อะไรให้ทำการ log ออกมาแจ้ง โค้ดสามารถเขียนได้แบบนี้

   $(document).ready(function(){
        $.ajax({
             url:'https://jsonplaceholder.typicode.com/users',
             type:'GET',
             success:function(result){
                  console.log(result)
             },
             error:function(error){
                  console.log(error);
   		}
   	})
   })

   ดูๆไปแล้วเจ้าตัว JQuery ก็เขียนงานเหมือนกันใช่ไหมละ

3. Fetch + Async & await วิธีนี้ก็จะดูเป็นวิธีที่ทันสมัยขึ้นมาหน่อยโดยการใช้ Fetch api ที่ทาง Javascript ให้เรามา ร่วมกับ Async & await ได้ด้วย เวลาเรามีการใช้งาน Fetch ร่วมกลับ Async & await เราก็ต้องสร้างฟังชั่น Async ขึ้นมาก่อน แล้วก็ทำการสร้างตัวแปรเอาไว้เก็บข้อมูล ที่ทำการตอบกลับมาในส่วนนี้เราก็จะมีการใช้ await เพราะหากมีการใช้ฟั่งชั่น Async ก็ต้องมีการใช้ await ร่วมกันนั้นเอง ในตัว await ก็จะมีการเรียกใช้ฟังชั่น Fetch และใส่ url api ของเราไป วิธีนี้เราต้องทำการแปลงข้อมูลให้เป็น Json ด้วยนะ โดยใช้ await ดึงเอาตัวคำสั่ง json ขึ้นมาใช้ เราไปดูโค้ดกัน หากของใครไม่ออกมาก็อย่าลืมเรียกใช้ฟังชั่นที่เราตั้งไปด้วยนะ

   async function getUser(){
       let response = await fetch('https://jsonplaceholder.typicode.com/users');
       console.log(response)
       let data=await response.json();
       return data;
   }
   getUser().then(data => console.log(data));

   ผลลัพธ์ที่ได้

   

   วิธีนี้ก็ดูง่ายสุดๆไปเลยใช่ไหมละถ้างั้นเราไปดูวิธีสุดท้ายกันเลยดีกว่า
   
   
   

4. Axios ผมเชื่อว่าหลายๆคนก็น่าจะรู้จักกันดีกับเจ้าตัว Axios เจ้าตัว Axios เป็นตัวเสริมที่เราต้องติดตั้งเพิ่มเข้ามาเหมือนตัว JQuery เลยโดยวิธีการติดตั้งนั้นก็ง่ายเหมือนกันด้วยสามารถเลือกได้หลายวิธีเลยละถ้าใครสะดวกแบบไหนใช้แบบนั้นนะคับมีวิธีติดตั้งทั้งหมดดังนี้
   Using npm:

   npm install axios​

   Using bower:

   bower install axios

   Using yarn:

   yarn add axios

   Using jsDelivr CDN:

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

   Using unpkg CDN:

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

   ในส่วนนี้ผมจะเลือกใช้เป็นตัว jsDelivr CDN เพื่อความรวดเร็ว
   ต้องบอกเลยนะคับว่าเจ้าตัวนี้ใช้งานง่ายมากๆเลย หลังจากที่ติดตั้งแล้วเราก็ทำการเรียกใช้ axios ตามด้วย .get ข้างในก็ใส่เป็น url api หลังจากนั้นก็ใช้คำสั่ง .then และ return console log เข้าไปเอาข้อมูล ถ้าดูจากโค้ดด้านล่างจะเห็นว่า axios ไม่จำเป็นต้องใช้ response.json เลย เพราะว่าตัว axios ทำการแปรงเป็น json ให้เราเลยสะดวกสุดๆไปเลยใช่ไหมละ

    axios.get('https://jsonplaceholder.typicode.com/users').then(res=>{
    console.log(res.data)
    })

   วิธีนี้ต้องบอกเลยนะว่าง่ายมากๆ

สรุป การเรียกใช้ API ที่นำมาวันนี้มีทั้งหมด 4 แบบได้แก่ XMLHttprequest แบบดั้งเดิม JQuery, Fetch + Async & await,  Axios ถ้าถามว่าวิธีไหนง่ายสุดก็คงจะเป็น Axios ที่เขียนเพียงแค่ 1 บรรทัดก็สามารถใช้งานได้แล้ว หากใครสนใจตัว API ก็สามารถเข้าไปดูได้ในกระทู้แนะนำ API ฟรีสำหรับงาน Front-End Development ได้เลย หากใครยังไม่รู้ว่า API มีประโยชน์อย่างไรสามารถเข้าไปดูในกระทู้นี้ได้เลย

อ้างอิง
XMLHttprequest [ออนไลน์], เข้าถึงได้จาก https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
JQuery [ออนไลน์], เข้าถึงได้จาก https://api.jquery.com/
Fetch + Async & await [ออนไลน์], เข้าถึงได้จาก https://dmitripavlutin.com/javascript-fetch-async-await/
Axios [ออนไลน์], เข้าถึงได้จาก https://www.npmjs.com/package/axios