June 27, 2019

Vue axios API 管理的好方法

axios.create 實體是關鍵


文 / 西打藍 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)
    })
}




閱讀量




聯絡與合作


訂閱電子報,領「我當前 10+ 以上收入源有哪些」一文。

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

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

Email: frank@siddharam.com