Axios in Vue

簡介

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

設置方法

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

  • 新增 index.js 檔案
  • 使用 axios.create 創建實體
    • 可以設定baseURL和Authorization這些每個請求共用的變數
./service/index.js
import 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.js
import 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