axios 套件介紹,請參考這裡。
這是一個很好用的 AJAX 套件,目前有兩個需求:
- 需要一個統一的前置作業,例如 baseUrl 設定、timeout 設定等等。
- 需要避免每個 router 的 template 有用到就創建一個實例。
- 未來其他功能套件,想要讓各種設定儘量在同一個地方都找得到。
所以這邊選擇一個封裝和單例的實作來處理。因為網路上找到的作法實在太多,又初學導致一直碰壁,這邊記錄下目前認為最恰當的方法,參考這裡(雖然說文章內建議的方法是使用 ES modules):
首先確定安裝好 axios 套件,這邊使用 npm 安裝:
npm install axios
確保有安裝 Pinia 套件,參考這裡:
npm install pinia
建立一個 plugins 外掛集合,透過 pinia 存在全域。注意未來如果有其他套件,建議拉一個資料夾管理並確實作好 import:
# src/composables/plugins.js
import axios from 'axios'
import { defineStore } from "pinia";
export const useAppPlugins = defineStore({
id: "appPlugins",
state: () => {
return {
axios : axios.create({
baseURL: '',
timeout: 10000
})
}
}
});
使用上,引用 plugins.js 中把要用的外掛都抓進來,就可以直接使用了:
<script> import { useAppPlugins } from '@/composables/plugins.js'; const appPlugins = useAppPlugins(); export default { data(){ return { ... } }, mounted() { ... }, beforeUnmount() { ... }, methods: { submitForm: () => { let api = appPlugins.axios; console.log(api); api.get('/api/login_config') .then( (response) => { console.log(response); } ) .catch( (error) => { // 请求失败处理 console.log(error); }); }, gotoForgetPwd: (username, event) => { console.log("gotoForgetPwd"); console.log(event.target.tagName); } } }
未來如果有其他外掛需要於全域設定的也能夠加入到 appPlugins 中提供呼叫。
文件中有提到一些好處:
- Documented APIs.
- Familiarity among developers.
- Standard usage patterns that, by design, avoid common problems.
- Integration with Vue Devtools.
- You don’t have to maintain the code yourself.
另外我認為未來在同一個專案中如果有不同的應用場景,可以建立不同外掛集合的檔案提供呼叫,這樣可以整理成一個檔案呼叫,減量減少一個 vue 檔案要 import 一堆而且還要注意上下傳遞關係的麻煩。
目前對 ES modules 方式的疑或是:每一個 vue 檔案 import 一次,他會不會就直接 create 一個新的實例?
2022-10-16 update: 這邊在 axios.create 中 baseURL 參數用隨機產生。發現 ES modules 的方法每次 import 都不會產生新的 baseURL 。並不會每次 import 就 create 一次的。
另外有翻到一個套件叫做 vue-axios ,看起來是包好直接放在 windows 裡面,這有空可以來試試。
同場加映,單例的設計模式參考:
貼心翻譯給看不懂簡體的繁體中文使用者,重點是這些:
意圖:保證一個類僅有一個實例,並提供一個訪問它的全局訪問點。
主要解決:一個全局使用的類頻繁地創建與銷毀。
何時使用:當您想控制實例數目,節省系統資源的時候。
優點:
- 在內存里只有一個實例,減少了內存的開銷,尤其是頻繁的創建和銷毀實例(比如管理學院首頁頁面緩存)。
- 避免對資源的多重佔用(比如寫文件操作)。
缺點:
- 沒有接口,不能繼承,與單一職責原則衝突
- 一個類應該只關心內部邏輯,而不關心外面怎麼樣來實例化。
使用場景:
- 要求生產唯一序列號。
- WEB 中的計數器,不用每次刷新都在數據庫里加一次,用單例先緩存起來。
- 創建的一個對象需要消耗的資源過多,比如 I/O 與數據庫的連接等。
同場加映,單例與全局變量差異:
單例滿多缺點的爭議,可以參考這個討論串。