Axios封裝

新增axios 資料夾新增一個檔案 service.ts

请求攔截&響應攔截 判斷

import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios'
import {storeToRefs} from 'pinia';
import { useVerifyFormStore } from '../stores/verify';
//創建Axios_service
const service = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 50000,
  headers: { 'Content-Type': 'application/json;charset=utf-8' }
})

// 请求攔截
service.interceptors.request.use((config: any) => {
   const storeVerify = useVerifyFormStore();
 const { token } = storeToRefs(storeVerify);
  if (token.value.trim()) {
    config.headers.Authorization = token.value;
    console.log(config.headers.Authorization)
  }
  return config
}, error => {
  return Promise.reject(error)
})

// 響應攔截
service.interceptors.response.use((response:any) =>{
 // const { code, msg } = response.data;
  if (response.status === 200) {
      console.log(response)
      return response;
  }
  // console.log(code)
  // return Promise.reject(new Error(msg || 'Error'));
},
  error => {
   if(error.response&&error.response.status){
     const status = error.response.status
      switch (status) {
          case 400:
              alert('请求錯誤');
              break;
          case 401:
              alert('请求錯誤');
              break;
          case 404:
              alert('请求錯誤地址出錯');
              break;
          case 408:
              alert('请求超時');
              break;
          case 500:
             alert('服務器內部錯誤');
              break;
          case 501:
              alert('服務沒實現');
              break;
          case 502:
              alert('網路錯誤');
              break;
          case 503:
                alert('網路不可用');
              break;
          case 504:
              alert('網頁超時');
              break;
          case 505:
        
            alert('HTTP版本不受支持');
              break;
          default:
               alert('請求失敗');
      }
        return Promise.reject(error);
       }
    return Promise.reject(error);
})
export default service;

新增一個request.ts

判斷 axios method

import instance from "./service.ts"

const axios = ({method,url,data,config}) => {
    method = method.toLowerCase();
    if (method == 'post') {
        return instance.post(url, data, {...config})
    } else if (method == 'get') {
        return instance.get(url, {
            params: data,
            ...config
        })
    } else if (method == 'delete') {
        return instance.delete(url, {
            params: data,
            ...config
        }, )
    } else if (method == 'put') {
        return instance.put(url, data,{...config})
    } else {
        console.error('未知的method' + method)
        return false
    }
}
export default axios

src資料夾下新增一個 api 資料夾 統一管理Ａpi

//登入

import axios from '../axios/request'


interface formType{
    email?:string | null | undefined,
    password?:string | null | undefined,
    checkpassword?:string | null | undefined,
}

export const Login = (data:formType) => {
    return axios({
        url: import.meta.env.VITE_API_URL + '/auth/login',
        method: 'post',
        data,
        config: {
            timeout: 10000
        }
    })
}

//登入

import axios from '../axios/request'

// 出勤設定
export const getSetCheckModesApi = (data:object) => {
    return axios({
        url: import.meta.env.VITE_API_URL + '/api/setCheckModes',
        method: "get",
        data,
        config: {
            timeout: 10000
        }
    })
}

export const getSetCheckModeApi = (_id:string,data:object) => {
    return axios({
        url: import.meta.env.VITE_API_URL + '/api/setCheckModes/'+`${_id}`,
        method: "get",
        data,
        config: {
            timeout: 10000
        }
    })
}
export const addSetCheckModeApi = (data:object) => {
    return axios({
        url: import.meta.env.VITE_API_URL + '/api/setCheckMode',
        method: "post",
        data,
        config: {
            timeout: 10000
        }
    })
}
export const editSetCheckModeApi = (_id:string,data:object) => {
    return axios({
        url: import.meta.env.VITE_API_URL + '/api/setCheckModes/'+`${_id}`,
        method: "put",
        data,
        config: {
            timeout: 10000
        }
    })
}
export const removeSetCheckModeApi = (_id:string,data:object) => {
    return axios({
        url: import.meta.env.VITE_API_URL + '/api/setCheckModes/'+`${_id}`,
        method: "delete",
        data,
        config: {
            timeout: 10000
        }
    })
}

參考資料