สอนวิธีเรียกใช้งาน API ผ่าน Axios

การรับข้อมูลหรือส่งข้อมูลไปยัง Server นั้นมีด้วยกันหลากหลายรูปแบบ ซึ่งการ REST API นั้นก็เป็นรูปแบบหนึ่งที่ใช่กันอย่างแพร่หลาย วันนี้เราจะมาเรียนรู้และฝึกใช้งาน Axios เพื่อทำการ REST API กันครับ

REST API หรือชื่อเต็มๆว่า Representational State Transfer นั้นคือวิธีในการสร้าง Web Service รูปแบบหนึ่งที่อาศัย HTTP Method (GET, POST, PUT, DELETE) ในการทำงาน และส่งผลกลับมาในรูปแบบของ JSON หรือ XML ทำให้สามารถรับส่งข้อมูลข้าม Platform ได้สะดวกสบายยิ่งขึ้น ทางฝั่งของ Server นั้นมีหน้าที่ในการสร้าง API ไว้เพื่อให้ทางฝั่งชอง Client เรียกใช้งานในการรับส่งข้อมูล โดยเราจะใช้ Axios ในการจัดการกับส่วนนี้กันครับ

Axios นั้นเป็น HTTP client library ตัวหนึ่งในภาษา JavaScript ที่ใช้ในการรับส่งข้อมูลและทำการติดต่อกับ Server ผ่านทาง API

เมื่อได้ทำความรู้จักกับ Axios กันไปคร่าวๆแล้ว เราจะมาลองใช้งาน Axios กันครับแต่ก่อนอื่นเราต้องทำการสร้าง API ที่ฝั่งของ Server เพื่อจะได้มี API ไว้เรียกใช้งานกันกันก่อนครับ

หากใครที่ยังไม่มี Node.js ให้ทำการดาวน์โหลดแล้วติดตั้งกันก่อนนะครับ https://nodejs.org/en/download

เมื่อโหลดเสร็จแล้วให้เราทำการสร้างโฟลเดอร์ชื่อว่า rest-api แล้วเปิด command prompt ขึ้นมาเข้าไปยังตำแหน่งของโฟลเดอร์แล้วพิมพ์คำสั่งตามด่านล่างเลยครับซึ่งจะเป็นคำสั่งในการสร้างไฟล์ package.json ขึ้นมา

npm init -y

เมื่อคำสั่งทำงานเรียบร้อยแล้วสังเกตว่าจะมีไฟล์ package.json เพิ่มขึ้นมา เป็นไฟล์ที่เก็บข้อมูลต่างๆของโปรเจคเรา เช่น ชื่อโปรเจค เวอร์ชั่น เป็นต้น

ตอนนี้เราได้ไฟล์ package.json แล้วเราจะทำการลง Package พื้นฐานของ Node.js และ Package ที่ชื่อว่า express ซึ่งจะทำหน้าที่ที่ช่วยจัดการเรื่องของการสร้าง API ให้เรา ต่อมาให้ทำการเปิด command prompt ขึ้นมาเข้าไปยังตำแหน่งของโปรเจค แล้วพิมพ์คำสั่งตามด้านล่างเลยครับ

npm install express --save

เมื่อเสร็จแล้วให้เราสร้างไฟล์ index.js จะเป็นไฟล์ที่เราใช้ในเก็บ API ของเราไว้ที่ไฟล์นี้ครับ

const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
  res.send('Hello World')
})
app.listen(port, () => {
  console.log('Start server at port 3000.')
})

เมื่อเสร็จแล้วลอง run ดูครับโดยใช้คำสั่ง node index

node index

หาก run สำเร็จจะมีข้อความขึ้นตามภาพ

เสร็จแล้วให้เราไปที่ http://localhost:3000/ หากได้ตามภาพด่านล่างแล้ว ต่อไปเราจะทำการสร้าง Path API ไว้ใช้งานกันครับ

API ตัวแรกเราจะใช้ในการดึงข้อมูลจาก Server ครับ ในที่นี้เราจะทำการ Mockup ข้อมูลไว้ แล้วทำการ Response ข้อมูลกลับไปให้ฝั่งของ Client ให้เราทำตามโค้ดด่านล่างเลยครับ เราจะทำการรับค่าจาก Params ที่ชื่อว่า id หากค่าที่ส่งมาเท่ากับ 1 ก็จะทำการ Response ข้อมูลกลับไป

app.get('/get/customer/:id', (req, res) => {
    let id = Number(req.params.id)
    if (id === 1) {
      let customer = [ 
          {id:1,name:'สมหมาย',lastName:'สมดี',age:30},  
          {id:2,name:'สมศรี',lastName:'ศรีสมัย',age:25},
          {id:3,name:'สมไทย',lastName:'ใสดี',age:27},        
          {id:4,name:'หทัย',lastName:'ใจดี',age:22},
          {id:5,name:'หัศดี',lastName:'สีใส',age:23}, 
          {id:6,name:'อันนา',lastName:'ดาดา',age:24},
          {id:7,name:'ลูกตา',lastName:'พาชม',age:30} 
          {id:8,name:'กังหัน',lastName:'หมุ่นดี',age:27},
       ] 
   res.status(200).json({ status: 200, msg: "get customer success",          success: true, data: customer })
}else{
   res.status(200).json({ status: 200, msg: "get customer fail", success: false, data: [] })}
})

API ตัวต่อมาเราจะทำการรับค่าจากฝั่ง Client เข้ามาแล้ว Response กลับไปยัง วิธีการเขียนก็คล้ายๆกับ Methods get แต่เวลารับข้อมูลของ post นั้นเราจะทำการรับค่าที่ตัว Body ดังนั้นเราต้องทำการเรียกใช้ body-parser เพื่อใช้ในการรับค่าจาก Body ก่อนครับ

const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
 extended: true
}));

เมื่อเรียกใช้ body-parser แล้วให้เราสร้าง API ตามโค้ดด้านล่างเลยครับ จะเป็นการรับข้อมูลเข้ามาแล้วเช็คว่ามีการส่งข้อมูลเข้ามาไหม หากมีเราจะทำการ Response Success กลับไป แต่ถ้าไม่มีจะทำการ Response Fail

app.post('/add/customer', (req, res) => {
    if (Object.values(req.body).length > 0) {
        res.status(200).json({ status: 200, msg: "add customer  success", success: true})
    }else{
        res.status(200).json({ status: 200, msg: "add customer fail", success: false})
    }
})

เมื่อครบทำครบทั้งสอง API แล้วก็จะได้ตามภาพด่านล่างนี้ครับ

เมื่อเราสร้าง API เรียบร้อยแล้วต่อไปเราจะมาลองใช้ Axios ในการรับและส่งข้อมูลกันครับ หากใครที่ต้องการทำความเข้าใจและศึกษาเพิ่มเติมเกี่ยวกับการสร้าง API ให้เข้าไปที่ Blog นี้ได้เลยครับ คลิก

ในฝั่งของ Client นั้นผมจะใช้ Vue.js ในการเรียก Axios ให้ทุกคนสร้างโปรเจค Vue.js ขึ้นมาก่อนครับหากใครที่สร้างยังไม่เป็น ให้เข้าไปศึกษาที่ Blog นี้ได้เลยครับ คลิก

เมื่อเราสร้างโปรเจค Vue.js เรียบร้อยเราจะมาลองใช้งาน Axios กันครับ ให้เราทำการติดตั้ง Axios กันก่อนครับเปิด command prompt ไปที่โปรเจค Vue.js ของเราแล้วพิมพ์คำสั่งตามโค้ดด้านล่างเลยครับ

npm install --save axios vue-axios

ต่อมาให้ทำการสร้างไฟล์ชื่อว่า axios.js ไว้ที่ โปรเจค > src เราจะใช้เป็นตัวกลางเพื่อเรียกใช้งาน Axios ผ่านไฟล์นี้ครับ

import axios from 'axios';
export const HTTP = axios.create({
  baseURL: 'http://localhost:3000/',
});

ในส่วนของ baseUrl ให้เราใส่ที่อยู่ของ Api ที่เราสร้างไว้ ในที่นี้คือ http://localhost:3000/ ที่เราได้ทำการ Run ไว้ที่ Server

ต่อมาให้เราไปที่ไฟล์ HelloWorld.vue แล้วสร้าง Methods ชื่อว่า getCustomer และ import axios เข้ามา เพื่อใช้ REST API จาก get/customer/:id

import {HTTP} from "@/axios.js";
async getCustomer(){
  await HTTP.get(`get/customer/${1}`)
  .then(res => {
    if (res.data.success) {
      this.customer = res.data.data
    }
  })
  .catch(e => {
    console.log(e);
  });
}

เสร็จแล้วเรียกใช้ getCustomer ที่ Mounted แล้วนำข้อมูลที่ได้มาเก็บไว้ในตัวแปรชื่อว่า customer แล้วทำการวนลูปที่ส่วน View ดูครับก็จะเห็นข้อมูลลูกค้าที่เรารับมาจาก Server

เรียกใช้งาน getCustomer ที่ Mounted

<template>
  <div class="container">
    <div class="columns">
      <div class="column">
        <p class="is-size-6 has-text-weight-semibold">ชื่อ</p>
      </div>
      <div class="column">
        <p class="is-size-6 has-text-weight-semibold">นามสกุล</p
      </div>
      <div class="column">
        <p class="is-size-6 has-text-weight-semibold">อายุ</p>
      </div>
  </div>
  <div v-for="item in customer" :key="item.id">
    <div class="columns">
      <div class="column">
        <p class="is-size-6">{{item.name}}</p>
      </div>
      <div class="column">
        <p class="is-size-6">{{item.lastName}}</p>
      </div>
      <div class="column">
        <p class="is-size-6">{{item.age}}</p>
      </div>
    </div>
  </div>
</div>
</template>

วนลูปข้อมูลจากตัวแปร Customer

หากใครที่เรียกใช้งาน API แล้วติดปัญหา Blocked ให้เราไปที่ Server เปิด command prompt พิมพ์คำสั่ง npm link cors และเรียกใช้ cors เสร็จแล้วให้ทำการ Run Server แล้วทำการเรียกใช้อีกครั้งครับ

npm link cors

เมื่อรับข้อมูลจาก Server ได้แล้วเราจะมาลองส่งข้อมูลไปยัง Server กันบ้างครับให้เราทำการสร้าง Input มาสามตัวครับมี ชื่อ, นามสกุล, อายุ แล้วสร้างปุ่มไว้เรียกใช้งาน Methods ที่ชื่อว่า addCustomer

<div class="columns has-text-left">
  <div class="column">
    <b-field">
      <b-input v-model="name" placeholder="Name"></b-input>
    </b-field>
  </div>
  <div class="column">
    <b-field>
      <b-input v-model="lastName" placeholder="Last name"></b-input>
    </b-field>
  </div>
  <div class="column">
    <b-field>
      <b-numberinput v-model="age"  placeholder="Age"></b-  numberinput>
    </b-field>
  </div>
  <div class="column is-1">
    <b-button @click="addCustomer" type="is-success">Add</b-button>
  </div>
</div>

ต่อมาให้ทำการสร้าง Method addCustomer เพื่อใช้ในการส่งข้อมูลไปยัง Server เราจะทำการรับค่ามาจาก Input ทั้งสามตัวแล้วทำการส่งข้อมูลไปยัง API ที่ชื่อว่า add/customer

async addCustomer(){
  let obj={
    name:this.name,
    lastName:this.lastName,
    age:this.age
  }
  
  await HTTP.post(`/add/customer`,obj)
  .then(res => {
     console.log(res)
  })
  .catch(e => {
    console.log(e);
  });
}

เมื่อทำการส่งค่าไปยัง Server แล้ว เราก็จะได้รับการตอบกลับมา โดยเราสามารถดูได้ผ่าน console.log() ว่า Server ได้ทำการ Response ค่ากลับมาให้เราหรือไหม หาก Response กลับมาเป็น Status 200 ก็เป็นอันว่าเรียบร้อยครับ API ของเราสามารถใช้งานได้แล้ว

สะดวกสบายใช้ไหมละครับกับการติดต่อกับ Server เพื่อทำการรับส่งข้อมูลข้าม Platform โดยใช้การ REST API เพียงแค่เรียก Path ที่อยู่ของ API ผ่าน Axios ก็สามารถใช้งานได้แล้ว

Axios นั้นยังช่วยในเรื่องการจัดการเกี่ยวกับการใช้ API ในอีกหลายส่วนเช่นเรื่องของ Authentication เป็นต้น หากใครต้องการศึกษาเพิ่มเติมสามารถเข้าไปศึกษาได้ที่ https://github.com/axios/axios ซึ่งจะมีตัวอย่างการใช้งานให้เราได้ศึกษากันครับ