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)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。

想定期收到技術文章,或想一起探討前後端程式的朋友,建議加入 line 群組,或是官方帳號,大家可以互相交流,一起學程式,歡迎加入:

Email: aaa24295234@gmail.com

Line 群組:群組

Line 群組 QR Code:

Line 官方帳號:@184railx

Line 官方帳號 QR Code:



閱讀量