vue3 封裝api介面

新建axiosj.ts

import axios from 'axios';
import { showMessage } from "./status";   // 引入狀態碼文件
import { ElMessage } from 'element-plus'  // 引入el 提示框，這個項目里用什麼組件庫這裡引什麼

// 設置介面超時時間
axios.defaults.timeout = 60000;

// 請求地址，這裡是動態賦值的的環境變數，下一篇會細講，這裡跳過
// @ts-ignore
axios.defaults.baseURL = import.meta.env.VITE_API_DOMAIN;   

//http request 攔截器
axios.interceptors.request.use(
  config => {
  // 配置請求頭
    config.headers = {
      //'Content-Type':'application/x-www-form-urlencoded',   // 傳參方式表單
      'Content-Type':'application/json;charset=UTF-8',        // 傳參方式json
      'token':'80c483d59ca86ad0393cf8a98416e2a1'              // 這裡自定義配置，這裡傳的是token
    };
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

//http response 攔截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    const {response} = error;
    if (response) {
      // 請求已發出，但是不在2xx的範圍
      showMessage(response.status);           // 傳入響應碼，匹配響應碼對應信息
      return Promise.reject(response.data);
    } else {
      ElMessage.warning('網路連接異常,請稍後再試!');
    }
  }
);

// 封裝 GET POST 請求並導出
export function request(url='',params={},type='POST'){
//設置 url params type 的預設值
return new Promise((resolve,reject)=>{
  let promise
  if( type.toUpperCase()==='GET' ){
    promise = axios({
      url,
      params
    })
  }else if( type.toUpperCase()=== 'POST' ){
    promise = axios({
      method:'POST',
      url,
      data:params
    })
  }
  //處理返回
  promise.then(res=>{
    resolve(res)
  }).catch(err=>{
    reject(err)
  })
})
}

新建狀態碼文件：

export const showMessage = (status:number|string) : string => {
    let message:string = "";
    switch (status) {
        case 400:
            message = "請求錯誤(400)";
            break;
        case 401:
            message = "未授權，請重新登錄(401)";
            break;
        case 403:
            message = "拒絕訪問(403)";
            break;
        case 404:
            message = "請求出錯(404)";
            break;
        case 408:
            message = "請求超時(408)";
            break;
        case 500:
            message = "伺服器錯誤(500)";
            break;
        case 501:
            message = "服務未實現(501)";
            break;
        case 502:
            message = "網路錯誤(502)";
            break;
        case 503:
            message = "服務不可用(503)";
            break;
        case 504:
            message = "網路超時(504)";
            break;
        case 505:
            message = "HTTP版本不受支持(505)";
            break;
        default:
            message = `連接出錯(${status})!`;
    }
    return `${message}，請檢查網路或聯繫管理員！`;
};

導出案例

import { request } from './axios'
//導出 login

使用

<script setup>
import { onMounted } from "vue";
import {login} from '/src/api/api.ts'

onMounted(()=>{
  login1()
})

const login1 = async () => {
  const loginParams = {
    username: 'test',
    password: 'test',
  }
  const res = await login()
}
</script>