Axios in Vue

簡介

  • 在大型專案中，有許多發送API請求的函式，散落在專案各處，七零八落
  • 可以把API請求集中管理並模組化，提高可維護性

設置方法

1. 在src資料夾內，新增services資料夾

  • 新增 index.js 檔案
  • 使用 axios.create 創建實體
    • 可以設定baseURL和Authorization這些每個請求共用的變數
./service/index.jsimport axios from 'axios'const request = axios.create({  baseURL: import.meta.env.VITE_API_URL,    timeout: 1000,    withCredentials: true})export default request

2. 配置攔截器 ( Interceptors )

  • 在發出請求之前：可以先行確認資料是否正確，再發出或停止請求
  • 接收回應之前：可以先對回傳的資料做預先處理
    • 如果成功，繼續執行後面的程式碼
    • 如果失敗，在攔截器中直接處理錯誤
// 請求攔截器request.interceptors.request.use(config => {  // 在發送請求之前做些什麼    // 如果有token，就把token帶入請求之中    const token = store.state.token;          token && (config.headers.Authorization = token);  return config;}, error => {  // 對請求錯誤做些什麼  return Promise.reject(error);});// 響應攔截器request.interceptors.response.use(response => {  // 對響應數據做些什麼        if (response.status === 200) {                        return response.data;               } else {                        const error = new Error(`HTTP status code not OK: ${response.status}`);                        return Promise.reject(error);                }  }, error => {  // 對響應錯誤做些什麼    if(err.response){        switch (err.response.status) {        case 401:          const errCode = err.response.data ? err.response.data.rtnCode : ''          // 沒有操作權限，登出          if (errCode == 'COMMON-0001') {            logout()          }          break      }    }  return Promise.reject(error);});

3. 開始使用創建的axios實例

  • 可以依照API功能分類，在services資料夾內創建其他檔案
  • 例如創建api資料夾，所有發出API請求相關的檔案都放在這裡面
  • export 要使用的函式
./services/api/auth.jsimport request from '../../index.'// 登入const postUserLogin = (param = {})=> {    return $axios.post(`/api/login`, param)}// 取得登入者資訊const postGetUserInfo = (param = {})=> {  return $axios.post(`/api/userinfo`, param)}export {postUserLogin, postGetUserInfo}

4. 在要使用的地方引入

// loginPage.vue<script setup>import { ref } from 'vue';import { getUserInfo } from '../service/client/auth';const data = ref(null);const param = { username: 'test', password: 'test' };const fetchData = async () => {  try {    const response = await getUserInfo(param);    data.value = response.data;   } catch (error) {    console.error('An error occurred:', error);  }};fetchData();</script>

參考資料

# Vue # Axios