iT邦幫忙

2021 iThome 鐵人賽

DAY 14
2
Modern Web

Vue.js 進階心法系列 第 14

讓程式碼化為 API Doc

先寫 API 文件。

可以使用mockAPI的服務取得一組 user 的 API。

因應需求寫的 API 文件

GET /user

response 200

{
  "data": [
    {
      "createdAt": "2021-09-28T06:15:33.861Z",
      "name": "chris",
      "avatar": "https://fakeimg.pl/300/",
      "id": "1"
    },
    {
      "createdAt": "2021-09-28T08:06:09.227Z",
      "name": "Elizabeth Shields",
      "avatar": "https://cdn.fakercloud.com/avatars/russoedu_128.jpg",
      "id": "2"
    },
    {
      "createdAt": "2021-09-27T16:50:44.188Z",
      "name": "Everett Stokes",
      "avatar": "https://cdn.fakercloud.com/avatars/bobwassermann_128.jpg",
      "id": "3"
    }
  ]
}

GET /user/:id

response 200

{
  "data": {
    "createdAt": "2021-09-28T06:15:33.861Z",
    "name": "chris",
    "avatar": "https://fakeimg.pl/300/",
    "id": "1"
  }
}

POST /user

request body

{
  "name": "chris",
  "avatar": "https://fakeimg.pl/300/"
}

response 200

{
  "data": {
    "createdAt": "2021-09-28T01:16:41.617Z",
    "name": "chris",
    "avatar": "https://fakeimg.pl/300/",
    "id": "4"
  }
}

PUT /user/:id

request body

{
  "name": "chris",
  "avatar": "https://fakeimg.pl/300/"
}

response 200

{
  "data": {
    "createdAt": "2021-09-28T06:15:33.861Z",
    "name": "chris",
    "avatar": "https://fakeimg.pl/300/",
    "id": "1"
  }
}

DELETE /user/:id

response 200

{
  "data": {
    "createdAt": "2021-09-28T06:15:33.861Z",
    "name": "chris",
    "avatar": "https://fakeimg.pl/300/",
    "id": "1"
  }
}

用 actions 寫 API 文件實作

前幾天的 Vuex使用偏好 有說 action 可以寫非同步行為,還有它的命名規則。在此就利用這些原則,配合上一篇的基礎建設,在這裡「將 API 文件寫成程式碼」,成為「程式碼可以自我文件化」的一種體現。

@/store/actions.js

import backendAPI from '@/utility/backendAPI.js'

export default {
    async fetchUser ({ commit }, id) {
      const res = await backendAPI.GET(`/user/${id}`)
      commit('user', res.data)
    },
    async fetchUsers ({ commit }, id) {
      const res = await backendAPI.GET(`/user`)
      commit('users', res.data)
    },
    async createUser ({ commit }, { id, name, phone }) {
      await backendAPI.POST(`/user`, {
        name,
        avatar
      })
    },
    async updateUser ({ commit }, { id, name, phone }) {
      await backendAPI.PUT(`/user/${id}`, {
        name,
        avatar
      })
    },
    async deleteUser ({ commit }, id) {
      await backendAPI.DELETE(`/user/${id}`)
    },
  }

其中,這些部份,就如同你的 API Doc 在除錯的時候,可以直接搜尋 path 並且對一下 method 和 param 有沒有給錯。這裡和 API Doc 一樣,API 會給錯,都是 component 的問題了。

backendAPI.GET(`/user/${id}`)
backendAPI.GET(`/user`)
backendAPI.POST(`/user`, {
  name,
  avatar
})
backendAPI.PUT(`/user/${id}`, {
  name,
  avatar
})
backendAPI.DELETE(`/user/${id}`)

為了瀏覽器的 Network 固定在 action 取得

為了讓在這裡的 res (在 fetchUserfetchUsers 有宣告) 就如同下圖的樣子,所以需要前一篇的處理 API 層次感之地基篇,讓 response 吐出來的樣子,和瀏覽器的 Network 看到的一樣。

再看一下 Vuex 的圖

目前我們實作了下面這一個部份

接下來,慢慢的將 Vuex 把這些東西都做好。


上一篇
處理 API 層次感之地基篇
下一篇
不要在 mutation 加工 API 回來的資料
系列文
Vue.js 進階心法30

尚未有邦友留言

立即登入留言