Axios

Thu 06 Jun 2024  

🎉 Hi: ... 🎉

เตรียมตัวก่อนทดลองใช้ axios ดังนี้

• จะต้องมีพิ้นฐาน Javascript ทั้ง Frontend, Backend
• Frontend ใช้งาน VueJS + axios
• Backend ใช้งาน NodeJS (Fastify) ให้เป็นตัวอย่างแบบง่าย ๆ เพื่อให้เข้าใจมากขึ้น

ตัวอย่าง axios แบบที่ 1

Frontend

• Method: GET
• Request: Query
• API: http://127.0.0.1:5000
• Request URL: http://127.0.0.1:5000/?id=12345&type=car

// Frontend
const testGet = async () => {
  const config = {
    headers: {
      'Content-Type': 'application/json'
    },
    params: {
      id: 12345,
      type: 'Car'
    }
  } // config
  const response = await axios.get('http://127.0.0.1:5000', config)
} // testGet

testGet()

Backend

การนำค่า id และ type ไปใช้งาน

Request:

• request.query.id
• request.query.type

// Backend
fastify.get('/', async (request) => {
  console.log('🚀 Query:', request.query.id, request.query.type)
  // 🚀 Query: 12345 Car

  return { hello: 'world' }
})

ตัวอย่าง axios แบบที่ 2

Frontend

• Method: GET
• Request: Params
• API: http://127.0.0.1:5000
• Request URL: http://127.0.0.1:5000/1000/MyCar

// Frontend
const testGet = async () => {
  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  } // config
  const response = await axios.get('http://127.0.0.1:5000/1000/MyCar', config)
} // testGet

testGet()

Backend

การนำค่า Params ไปใช้งาน

Request:

• request.params.id
• request.params.type

// Backend
fastify.get('/:id/:type', async (request, reply) => {
  console.log('🚀 Params:', request.params.id, request.params.type)
  // 🚀 Params: 1000 MyCar

  return { hello: 'world' }
})

ตัวอย่าง axios แบบที่ 3

Frontend

• Method: POST
• Request: Body
• API: http://127.0.0.1:5000

// Frontend
const testPost = async () => {
  const dataBody = {
    mydata: {
      username: 'admin',
      password: '12345'
    }
  } // dataBody
  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  } // config

  const response = await axios.post('http://127.0.0.1:5000', dataBody, config)
} // testPost

testPost()

Backend

การนำค่า Body ไปใช้งาน

Request:

• request.body.mydata.username
• request.body.mydata.password

// Backend
fastify.post('/', async (request, reply) => {
  console.log('🚀 User:', request.body.mydata.username)
  // 🚀 User: admin

  console.log('🚀 Pass:', request.body.mydata.password)
  // 🚀 Pass: 12345
  return { hello: 'world' }
})

ตัวอย่าง axios แบบที่ 4

Frontend

• Method: POST
• Request: Params
• API: http://127.0.0.1:5000
• Request URL: http://127.0.0.1:5000/myadmin/mypass

// Frontend
const testPost = async () => {
  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  } // config

  const response = await axios.post(
    'http://127.0.0.1:5000/myadmin/mypass',
    config
  )
} // testPost

testPost()

Backend

การนำค่า Params ไปใช้งาน

Request:

• request.params.username
• request.params.password

// Backend
fastify.post('/:username/:password', async (request, reply) => {
  console.log('🚀 User:', request.params.username)
  // 🚀 User: myadmin

  console.log('🚀 Pass:', request.params.password)
  // 🚀 Pass: mypass

  return { hello: 'world' }
})

ตัวอย่าง axios แบบที่ 5

Frontend

• Method: POST
• Request: Params และ Body
• API: http://127.0.0.1:5000
• Request API: http://127.0.0.1:5000/myid/myname

// Frontend
const testPost = async () => {
  const dataBody = {
    mydata: {
      username: 'admin',
      password: '12345'
    }
  } // dataBody

  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  } // config

  const response = await axios.post(
    'http://127.0.0.1:5000/myid/myname',
    dataBody,
    config
  ) // response
} // testPost

testPost()

Backend

การนำค่า Params และ Body ไปใช้งาน

Request:

• request.body.mydata.username
• request.body.mydata.password
• request.params.id
• request.params.name

// Backend
fastify.post('/:id/:name', async (request, reply) => {
  console.log('🚀 User:', request.body.mydata.username)
  // 🚀 User: admin

  console.log('🚀 Pass:', request.body.mydata.password)
  // 🚀 Pass: 12345

  console.log('🚀 Id:', request.params.id)
  // 🚀 User: myid

  console.log('🚀 Name:', request.params.name)
  // 🚀 Name: myname

  return { hello: 'world' }
})

ตัวอย่าง axios แบบที่ 6

Frontend

• Method: POST
• Request: Body และ Query
• API: http://127.0.0.1:5000
• Request API: http://127.0.0.1:5000/?id=8&status=online

// Frontend
const testPost = async () => {
  const dataBody = {
    mydata: {
      username: 'admin',
      password: '12345'
    }
  } // dataBody

  const config = {
    headers: {
      'Content-Type': 'application/json'
    },
    params: {
      id: 8,
      status: 'online'
    }
  } // config

  const response = await axios.post('http://127.0.0.1:5000', dataBody, config) // response
} // testPost

testPost()

Backend

การนำค่า Body และ Query ไปใช้งาน

Request:

• request.body.mydata.username
• request.body.mydata.password
• request.query.id
• request.query.status

// Backend
fastify.post('/', async (request, reply) => {
  console.log('🚀 User:', request.body.mydata.username)
  // 🚀 User: admin

  console.log('🚀 Pass:', request.body.mydata.password)
  // 🚀 Pass: 12345

  console.log('🚀 Id:', request.query.id)
  // 🚀 Id: 8

  console.log('🚀 Name:', request.query.status)
  // 🚀 Status: online

  return { hello: 'world' }
})

สรุป

จากตัวอย่างจะเป็นการใช้ Axios Mothod: GET, POST เท่านั้น ซึ่งสามารถนำไปประยุกต์ใช้งานกับ PUT, DELETE ได้อย่างไม่ยาก หวังว่าน่าจะเข้าใจมากขึ้นกว่าเดิมและเป็นประโยชน์กับทุกคนไม่มากก็น้อยนะครับ ขอบคุณครับ

• Axios