Vue3——axios 安裝和封裝

〆飛,發表於2024-03-13
VueiOS封裝

axios 安裝和封裝

安裝

npm install axios

最後透過 axios 測試介面！！！

axios 二次封裝

在開發專案的時候避免不了與後端進行互動,因此我們需要使用 axios 外掛實現傳送網路請求。在開發專案的時候

我們經常會把 axios 進行二次封裝。

目的:

1:使用請求攔截器，可以在請求攔截器中處理一些業務(開始進度條、請求頭攜帶公共引數)

2:使用響應攔截器，可以在響應攔截器中處理一些業務(進度條結束、簡化伺服器返回的資料、處理 http 網路錯誤)

在根目錄下建立 utils/request.ts

// 進行axios二次封裝:使用請求與響應攔截器
// 引入axios和axios的型別定義
import axios, {
  AxiosInstance,
  InternalAxiosRequestConfig,
  AxiosResponse,
} from "axios";
import { ElMessage } from "element-plus";
//第一步:利用axios物件的create方法,去建立axios例項(其他的配置:基礎路徑、超時的時間)
const request: AxiosInstance = axios.create({
  //基礎路徑
  baseURL: import.meta.env.VITE_APP_BASE_API, //基礎路徑上會攜帶/api
  timeout: 5000, //超時的時間的設定
});
//第二步:request例項新增請求與響應攔截器
request.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    //config配置物件,headers屬性請求頭,經常給伺服器端攜帶公共引數
    //返回配置物件
    return config;
  },
  (error: any) => {
    // 處理請求錯誤
    console.error(error);
    return Promise.reject(error);
  }
);

//第三步:響應攔截器
request.interceptors.response.use(
  (response: AxiosResponse) => {
    //成功回撥
    //簡化資料
    return response.data;
  },
  (error) => {
    // 處理響應錯誤
    //失敗回撥:處理http網路錯誤的
    //定義一個變數:儲存網路錯誤資訊
    let message = "";
    //http狀態碼
    const status = error.response.status;
    switch (status) {
      case 401:
        message = "TOKEN過期";
        break;
      case 403:
        message = "無權訪問";
        break;
      case 404:
        message = "請求地址錯誤";
        break;
      case 500:
        message = "伺服器出現問題";
        break;
      default:
        message = "網路出現問題";
        break;
    }
    //提示錯誤資訊
    ElMessage({
      type: "error",
      message,
    });
    return Promise.reject(error);
  }
);
//對外暴露
export default request;

使用
src\api\user\index.ts

// 引入封裝好的axios例項
import request from "@/utils/request";

// 定義一個介面，用於規範使用者的資料型別
interface User {
  id: number;
  name: string;
  age: number;
  email: string;
  avatar: string;
}

// 定義一個函式，用於獲取使用者列表
export function getUserList(): Promise<User[]> {
  return request({
    url: "/user/list",
    method: "get",
  });
}

測試程式碼

import { onMounted } from "vue";
import { getUserList } from "@/api/user";
//元件掛載完畢
onMounted(() => {
  getUserLists();
});
//獲取全部已有的使用者資訊
const getUserLists = async () => {
  let result = await getUserList();
  console.log(result);
};

API 介面統一管理

在 src 目錄下去建立 api 資料夾去統一管理專案的介面；

比如:下面方式

// responseTpe.ts
// 定義一個介面，用於規範響應資料的格式
export interface ResponseData<T = any> {
  code: number;
  data: T;
  message: string;
}

// type.ts
import type { ResponseData } from "@/api/responseTpe";

// 定義一個介面，用於規範使用者的資料型別
export interface userInfoListReponseData extends ResponseData {
  data: {
    id: number;
    name: string;
    age: number;
    email: string;
    avatar: string;
  };
}

// index.ts
// 引入封裝好的axios例項
import request from "@/utils/request";

import type { userInfoListReponseData } from "./type";

//專案使用者相關的請求地址
enum API {
  USERINFO_LIST_URL = "/user/list",
}

// 用於獲取使用者列表
export const getUserList = () => {
  return request.get<any, userInfoListReponseData>(API.USERINFO_LIST_URL);
};

相關文章