Vue axios API 管理的好方法

文 / 西打藍 Siddharam

前言

在寫 axios 時，很直覺的會跟 call AJAX 一樣，後端給什麼 URL，就直接帶入傳值，但當 request 的網域改變時，就必須一個個更改，難以管理維護。透過 axios.create 創造實體，能更聰明的管理你的 API。接下來我們直接操作：

程式碼

src/utils/request.js



import axios from 'axios'

# 新增 axios.create 實體，以後路徑有改，直接改這邊就好

export default axios.create({
  baseURL: 'http://11.22.33.44/api/'
})

src/API/analyze.js



import request from '@/utils/request'

# 這包也可以寫在 request.js，放這邊也是為了容易管理

export function getJson (data) {
  return request({
    url: '/getJson',
    method: 'POST',
    data: data
  })
}

src/pages/index.vue



import { getJson } from '@/API/analyze'
...
...
...
mounted () {
    getJson(
    data
    )
    .then(response => {
        console.log(response)
    })
    .catch(err => {
        console.log(err)
    })
}

閱讀量次

聯絡與合作

有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。

或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。

Email: frank@siddharam.com