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)
    })
}




閱讀量




技術文章與合作


寫這些技術分享文,筆者是沒有額外收入的,但每年還是要付域名費用,如果你喜歡我的文章,歡迎 自由贊助 唷!也期待收到你的 回饋

有網站設計(UI/UX)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。