使用 Promise 處理 GET 回傳 Object Array | 點燈坊

處理 RESTful API 的 GET 回傳 Object Array 在實務上一定會碰到，由於 Composition API 沒有使用 this，在 Vue 3 將有不同處理方式。

Version

Vue 3.0.11

Composition API

按下 Get Books 會從 API 獲得 Object Array。

<template lang='pug'>
div
  button(@click='onClick') Get Books
ul
  li(v-for='x in books') {{ x.title }} / {{ x.price }}
</template>

<script setup>
import getBooks from '/src/api/getBooks'

ref: books = []

let onClick = () => {
  getBooks()
    .then(x => x.data)
    .then(x => books = x)
    .catch(console.error)
}
</script>

第 9 行

import getBooks from '/src/api/getBooks'

API function，使用 axios.get() 從 API 取得 data。

11 行

ref: books = []

使用 ref sugar 定義 books state 較適合 Composition API。

13 行

let onClick = () => {
  getBooks()
    .then(x => x.data)
    .then(x => books = x)
    .catch(console.error)
}

由於 getBook() 回傳 Promise，因此使用 then() 寫入 side effect。

由於不必透過 this 讀取 title state，因此 onClick() 可安心使用 arrow function，不必再使用 function expression。

第 4 行

ul
  li(v-for='x in books') {{ x.title }} / {{ x.price }}

使用 v-for 對 books Object Array 顯示。

Point-free

結果不變，但使用 Point-free 改寫。

<template lang='pug'>
div
  button(@click='onClick') Get Books
ul
  li(v-for='x in books') {{ x.title }} / {{ x.price }}
</template>

<script setup>
import { ref } from 'vue'
import { write } from 'vue3-fp'
import { pipe, andThen as then, prop, otherwise } from 'ramda'
import { error } from 'wink-fp'
import getBooks from '/src/api/getBooks'

let books = ref([])

let onClick = pipe(
  getBooks,
  then(prop('data')),
  then(write(books)),
  otherwise(error)
)
</script>

15 行

let books = ref([])

使用 ref() 定義 books state 較適合 Point-free。

17 行

let onClick = pipe(
  getBooks,
  then(prop('data')),
  then(write(books)),
  otherwise(error)
)

使用 pipe() 組合 onClick()：

• getBooks：呼叫 getBooks() 回傳 Promise
• then(prop('data'))：在 Promise 內取出 data property
• then(write(books))：將 Object Array 寫入 books state
• otherwise(error)：處理 Rejected Promise

Conclusion

• Vue 3 Composition API 由於沒有使用 this，使得 Point-free 成為可能，event handler 都可以直接以 pure function 組合出來