點燈坊

失くすものさえない今が強くなるチャンスよ

使用 Axios 呼叫 DELETE REST API

Sam Xiao's Avatar 2024-02-18

透過 axios.delete() 可簡單呼叫 DELETE REST API。

Version

Vue 3.4
Axios 1.6.7

PUT

App.vue

<template>
  <ul>
    <li v-for="item in todos" :key="item.id">
      <span>{{ item.todo }}</span>
      <button @click="onDelete(item)">delete</button>
    </li>
  </ul>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

let todos = ref([])

onMounted(async () => {
  let url = 'http://localhost:3000/todos'

  try {
    let { data } = await axios.get(url)
    todos.value = data
  } catch (e) {
    console.error(e)
  }
})

let onDelete = async (item) => {
  let delUrl = `http://localhost:3000/todos/${item.id}`
  let getUrl = 'http://localhost:3000/todos'

  try {
    await axios.delete(delUrl)
    let { data } = await axios.get(getUrl)
    todos.value = data
  } catch (e) {
    console.error(e)
  }
}
</script>

Line 2

<ul>
  <li v-for="item in todos" :key="item.id">
   <span>{{ item.todo }}</span>
   <button @click="onDelete(item)">delete</button>
  </li>
</ul>
  • v-for ：列舉 todos state

Line 12

import axios from 'axios'
  • 引用 Axios

Line 14

let todos = ref([])
  • todos state：儲存所有 todo

Line 16

onMounted(async () => {
  let url = 'http://localhost:3000/todos'

  try {
    let { data } = await axios.get(url)
    todos.value = data
  } catch (e) {
    console.error(e)
  }
})
  • onMounted()：呼叫 GET REST API function 取得所有 todos
  • 將 url 傳入 axios.get() 呼叫 GET REST API
  • axios.get() 所回傳的資料都放在 data property 下，可使用 { data } 直接 Object Destructure
  • Axios 回傳為 Promise，可使用 try catch 做 error handling

Line 27

let onDelete = async (item) => {
  let delUrl = `http://localhost:3000/todos/${item.id}`
  let getUrl = 'http://localhost:3000/todos'

  try {
    await axios.delete(delUrl)
    let { data } = await axios.get(getUrl)
    todos.value = data
  } catch (e) {
    console.error(e)
  }
}
  • 刪除一筆 todo
  • 將 url 傳入 axios.delete() 呼叫 DELETE REST API

API Function

App.vue

<template>
  <ul>
    <li v-for="item in todos" :key="item.id">
      <span>{{ item.todo }}</span>
      <button @click="onDelete(item)">delete</button>
    </li>
  </ul>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getTodos, delTodo } from '@/api/todos.js'

let todos = ref([])

onMounted(async () => (todos.value = await getTodos()))

let onDelete = async (item) => {
  await delTodo(item)
  todos.value = await getTodos()
}
</script>

Line 12

import { getTodos, delTodo } from '@/api/todos.js'
  • 從 api 目錄引用 todos.js 內的 getTodos() 與 delTodo()

Line 16

onMounted(async () => (todos.value = await getTodos()))
  • 呼叫 getTodos() API function 取得所有 todos

Line 18

let onDelete = async (item) => {
  await delTodo(item)
  todos.value = await getTodos()
}
  • 刪除一筆 todo
  • 呼叫 delTodo() API function 刪除 todo
  • 刪除完呼叫 getTodos() API function 重新取得所有 todo

todos.js

import axios from 'axios'

export let getTodos = async () => {
  let url = 'http://localhost:3000/todos'

  try {
    let { data } = await axios.get(url)
    return data
  } catch (e) {
    console.error(e)
  }
}

export let delTodo = async (item) => {
  let url = `http://localhost:3000/todos/${item.id}`

  try {
    let { data } = await axios.delete(url)
    return data
  } catch (e) {
    console.error(e)
  }
}

Line 1

import axios from 'axios'
  • 引用 Axios

Line 3

export let getTodos = async () => {  
}
  • export：將 getTodos() 匯出，如此其他地方才能使用 import 將此 function 匯入

Line 6

try {
  let { data } = await axios.get(url)
  return data
} catch (e) {
  console.error(e)
}
  • axios.get() 所回傳的資料都放在 data property 下，可使用 { data } 直接 Object Destructure
  • 因為 getTodos() 是 function，所以要有回傳值，至於要不要接收回傳值則由使用端的 .vue 決定

Line 14

export let delTodo = async (item) => {
}
  • export：將 delTodo() 匯出，如此其他地方才能使用 import 將此 function 匯入

Line 15

let url = `http://localhost:3000/todos/${item.id}`

try {
  let { data } = await axios.delete(url)
  return data
} catch (e) {
  console.error(e)
}
  • 將 url 傳入 axios.delete() 呼叫 DELETE REST API
  • axios.delete() 所回傳的資料都放在 data property 下，可使用 { data } 直接 Object Destructure
  • 因為 delTodo() 是 function，所以要有回傳值，至於要不要接收回傳值則由使用端的 .vue 決定

Conclusion

  • 實務上不建議將呼叫 API 寫在 .vue 內，因為 API 常常會被不同 component 或 view 重複呼叫，建議獨立抽成 API function
  • 實務上不建議將 function 包在 Object，然後匯出 Object，而是單獨 export 出 function，如此有助於 Vite 的 Tree Shaking

# Vue # Axios