Nuxt.js Fundamental ตอนที่ 6 - การ Fetch ข้อมูลจาก API

เนื้อหาของบทเรียน Nuxt.js

• ตอนที่ 1 - Getting Started with Nuxt.js
• ตอนที่ 2 - สร้าง Nuxt.js ด้วย create-nuxt-app
• ตอนที่ 3 - การกำหนด Routing
• ตอนที่ 4 - Nuxt.js Concept
• ตอนที่ 5 - Nuxt Content และ Async Data
• ตอนที่ 6 - การดึงข้อมูลจาก APIs
• ตอนที่ 7 - การใช้งานร่วมกับ Vuex Store
• ตอนที่ 8 - ทำระบบ Authentication ด้วย Nuxt.js
• ตอนที่ 9 - การ Deploy Nuxt.js
• ตอนที่ 10 - การทำ Internal API และ Middleware
• ตอนที่ 11 - ทำ SEO และ Meta tags
• ตอนที่ 12 - Workshop

ต่อมาคือการ Fetch ข้อมูลจาก API นะครับ ใน Vue.js ปกติ เราอาจจะ fetch data โดยผ่าน function mounted() หรือสร้าง function ใน methods อาจจะใช้ fetch หรือ axios ก็ได้

ซึ่งใน Nuxt ผมจะยกตัวอย่างการใช้ axios นะครับ โดยเราสามารถ install ได้แบบปกติเลย

npm install axios

แต่ตัว Nuxt ก็มี Nuxt Axios ที่มีข้อดีคือ

• Set ตัว baseUrl ให้เรา
• ง่ายต่อการ setToken หรือทำ authentication
• inject เป็น global ทำให้เรียกใช้งานได้ง่าย ไม่ต้อง import ทุกครั้ง
• กำหนด retry เพื่อ request อีกรอบกรณี error / failed
• ใช้ fetch แบบ isomorphic HTTP requests (fetch ทั้ง Server side และ client side)

วิธีใช้งาน ก็คล้ายๆ Nuxt Content ครับ คือ install ก่อน

npm install @nuxtjs/axios

จากนั้นไปเพิ่ม module ใน nuxt.config.js

1
module.exports = {
2
  modules: ['@nuxtjs/axios'],
3

4
  axios: {}
5
}

และกำหนด options ผ่าน object axios ถ้าเรามี environment variable API_URL มันจะ override ค่า baseURL นะครับ

ซึ่งรูปแบบการใช้ fetch หรือ axios ก็เหมือนกับการ request api แบบปกติที่เขียนด้วย Vue.js เลยครับ

การใช้ fetch

1
fetch(url)
2
  .then((response) => response.json())
3
  .then((data) => console.log(data))

การใช้ axios

1
axios.get(url).then((response) => console.log(response.data))

ใน axios ปกติ เวลาเราได้ข้อมูล response เราต้องดึงข้อมูลจาก response.data ใช่มั้ยครับ แต่ถ้าเราใช้ Nuxt Axios มันจะมี shortcut เราสามารถใช้ได้เลยเช่น $get()

1
// แบบ axios ปกติ
2
axios.get(url).then((res) => res.data)
3

4
// แบบ Nuxt Axios shortcut ($)
5
axios.$get(url).then((res) => console.log(res))

Fetching Data ด้วย asyncData

มาลองดึงข้อมูล API กันดีกว่า โดยผมจะใช้เว็บ https://picsum.photos/ เป็น API นะครับ เป็น API ที่ไว้สำหรับดึงข้อมูลรูปภาพ

• โดยใช้ /v2/list - เพื่อดึง photos แบบ list
• และ /id/{id}/info - สำหรับรายละเอียดของรูปครับ

ผมสร้างไฟล์ pages/photos/index.vue ขึ้นมา

1
<template>
2
  <div class="container">
3
    <h1>Photos</h1>
4
    <div class="photos">
5
      <nuxt-link v-for="photo in photos" :to="{ path: `/photos/${photo.id}` }" :key="photo.id">
6
        <img :src="photo.download_url" class="photo-item" />
7
        {{ photo.author }}
8
      </nuxt-link>
9
    </div>
10
  </div>
11
</template>
12
<script>
13
  export default {
14
    head() {
15
      return {
16
        title: 'Nuxt Fetch API'
17
      }
18
    },
19
    async asyncData({ $axios }) {
20
      const photos = await $axios.$get('https://picsum.photos/v2/list?limit=12')
21
      return { photos }
22
    }
23
  }
24
</script>
25
<style scoped>
26
  .container {
27
    padding: 1em;
28
    width: 1220px;
29
    margin: 0 auto;
30
  }
31
  .photos {
32
    display: grid;
33
    grid-template-columns: 1fr 1fr 1fr 1fr;
34
    grid-template-rows: auto;
35
    grid-gap: 1em;
36
    text-align: center;
37
  }
38

39
  .photo-item {
40
    width: 100%;
41
    height: 256px;
42
    object-fit: cover;
43
  }
44
</style>

จากโค๊ดด้านบน หน้า /photos จะดึงข้อมูลรูปแบบ list มาแสดงผล และใช้ <nuxt-link> กำหนด ตาม photo.id เพื่อ link ไป dynamic route ของเรานั่นเอง

1
<nuxt-link
2
  v-for="photo in photos"
3
  :to="{ path: `/photos/${photo.id}` }"
4
  :key="photo.id"
5
>

โดย <nuxt-link> เราใช้ :to โดยส่ง object {path: '/url'} ไป เช่น /photos/1 , /photos/2

ต่อมา เราจะกำหนด dynamic routing สำหรับแต่ละรูป โดยสร้างไฟล์ pages/photos/_id.vue ขึ้นมา และทำการรับ route.params จากนั้น ก็ fetch api โดยใช้ asyncData แบบนี้ครับ

1
<template>
2
  <div class="photo-info">
3
    <h1>Photo Detail</h1>
4
    <img :src="photo.download_url" class="img" />
5
    <p>Author : {{ photo.author }}</p>
6

7
    <nuxt-link to="/photos" class="link">Back to Photos</nuxt-link>
8
  </div>
9
</template>
10
<script>
11
  export default {
12
    async asyncData({ $axios, params }) {
13
      const photo = await $axios.$get(`https://picsum.photos/id/${params.id}/info`)
14
      return { photo }
15
    }
16
  }
17
</script>
18

19
<style scoped>
20
  .photo-info {
21
    width: 860px;
22
    margin: 0 auto;
23
    text-align: center;
24
  }
25
  .img {
26
    width: 100%;
27
  }
28

29
  .link {
30
    display: inline-block;
31
    margin-top: 2em;
32
  }
33
</style>

เพียงเท่านี้ เราก็สามารถดึงข้อมูลจาก API ด้วยการใช้ asyncData ได้แล้วครับ

ข้อดีของ asyncData คือ?

• มันจะถูกเรียกทุกครั้ง ก่อน page load มันจะถูกเรียก 1 ครั้งฝั่ง Server Side และทุกๆ ครั้งที่ฝั่ง Client side ตอนที่เรา navigate ด้วย <nuxt-link>
• เหมาะสำหรับดึงข้อมูลก่อนการ render (pre-render)
• สามารถ return ได้ทั้ง Promise หรือใช้ async/await (ถ้า Promise จะ resolve ก่อน render component)
• result ของ asyncData จะรวมกับ data() อัตโนมัติ ทำให้เราไม่ต้องกำหนด function data() เราเข้าถึงค่าใน template ได้เลย
• เราสามารถกำหนดเงื่อนไขได้ ถ้า asyncData ถุกเรียกตอน Server side ให้ทำอะไร ถ้าเรียกตอนฝั่ง client side ให้ทำอะไร เป็นต้น
• เข้าถึง dynamic route ได้ ตามตัวอย่าง ที่แสดงรูป photo info เพราะ asyncData เข้าถึง context ได้ และใน context ก็มี params นั่นเอง

อ่าน asyncData เพิ่มเติมได้ที่ NuxtJS - Async Data

Hints & Questions?

เพื่อนๆลองประยุกต์ใช้ asyncData กันดูนะครับ

• เช่น ให้มัน fetch ทุกๆ ครั้งที่ query เปลี่ยน ด้วย watchQuery
• fetch() กับ asyncData ต่างกันยังไงนะ?
• เราอยากให้หน้าแรก /photos fetch ครั้งเดียวพอ ตอน build time ได้มั้ย? ไม่อยากให้ fetch api ทุกครั้ง ตอน navigate ระหว่าง <nuxt-link>

อ่านบทถัดไป 👉 ตอนที่ 7 - การใช้งานร่วมกับ Vuex Store