书接上回，接着填充。。。。此篇包含Ajax请求及router路由填充准备工作，在src文件夹下创建文件夹：api axios router

axios填充

规范一点，我们使用interface规范数据，创建一个types文件

import type {InternalAxiosRequestConfig,AxiosResponse,AxiosRequestConfig,AxiosInstance,AxiosRequestHeaders,AxiosError,
} from "axios";interface RequestInterceptors<T> {// 请求拦截requestInterceptors?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig;requestInterceptorsCatch?: (err: any) => any;// 响应拦截responseInterceptors?: (config: T) => T;responseInterceptorsCatch?: (err: any) => any;
}interface RequestConfig<T = AxiosResponse> extends AxiosRequestConfig {interceptors?: RequestInterceptors<T>;
}export {AxiosResponse,RequestInterceptors,RequestConfig,AxiosInstance,InternalAxiosRequestConfig,AxiosRequestHeaders,AxiosError,
};

在asios文件夹下创建 service.ts 、index.ts、 config.ts

service.ts

import axios from "axios";
import { defaultRequestInterceptors, defaultResponseInterceptors } from "./config";
import { AxiosInstance, InternalAxiosRequestConfig, RequestConfig, AxiosResponse } from "./types";
import { message } from "ant-design-vue";
import { useUserStoreWithOut } from "../pinia/user";
import Spin from "@/components/SpinLoader/loading";
// 获取配置的请求路径baseURL
export const PATH_URL = import.meta.env.VITE_API_BASE_PATH;const abortControllerMap: Map<string, AbortController> = new Map();const axiosInstance: AxiosInstance = axios.create({timeout: 60000,baseURL: PATH_URL,
});axiosInstance.interceptors.request.use((res: InternalAxiosRequestConfig) => {Spin.show(); // 后续文章中具体写全局loading设置const controller = new AbortController();const url = res.url || "";res.signal = controller.signal;abortControllerMap.set(url, controller);return res;
});axiosInstance.interceptors.response.use((res: AxiosResponse) => {Spin.hide();const url = res.config.url || "";abortControllerMap.delete(url);// 这里不能做任何处理，否则后面的 interceptors 拿不到完整的上下文了return res;},(error: any) => {Spin.hide();// 根据后端返回的值进行区分console.log("err： " + error); // for debugif (error?.response?.data?.status === 401) {const userStore = useUserStoreWithOut();userStore.logout();// 后续更新公共方法及全局方法message.error("登录失效，请重新登录");} else if (error?.response?.data?.status === 400) {message.error("数据有误，请确认正确后重新操作");} else {message.error(error.message);}return Promise.reject(error);}
);axiosInstance.interceptors.request.use(defaultRequestInterceptors);
axiosInstance.interceptors.response.use(defaultResponseInterceptors);const service = {request: (config: RequestConfig) => {return new Promise((resolve, reject) => {if (config.interceptors?.requestInterceptors) {config = config.interceptors.requestInterceptors(config as any);}axiosInstance.request(config).then((res) => {resolve(res);}).catch((err: any) => {reject(err);});});},cancelRequest: (url: string | string[]) => {const urlList = Array.isArray(url) ? url : [url];for (const _url of urlList) {abortControllerMap.get(_url)?.abort();abortControllerMap.delete(_url);}},cancelAllRequest() {for (const [_, controller] of abortControllerMap) {controller.abort();}abortControllerMap.clear();},
};export default service;

index.ts

import service from "./service";
import { useUserStoreWithOut } from "../pinia/user";
import { RawAxiosRequestHeaders } from "axios";type AxiosMethod = "get" | "post" | "delete" | "put";type AxiosResponseType = "arraybuffer" | "blob" | "document" | "json" | "text" | "stream";
interface AxiosConfig {params?: any;data?: any;url?: string;method?: AxiosMethod;headers?: RawAxiosRequestHeaders;responseType?: AxiosResponseType;
}
interface IResponse<T = any> {code: number;data: T extends any ? T : T & any;
}
// userStore.getToken在后续文章中介绍Pinia中更新获取token的方法
const request = (option: AxiosConfig) => {const { url, method, params, data, headers, responseType } = option;const userStore = useUserStoreWithOut();return service.request({url: url,method,params,data,responseType: responseType,headers: {"Content-Type": "application/json;charset=UTF-8",[userStore.getTokenKey ?? "Authorization"]: userStore.getToken ?? "",token: userStore.getToken ?? "",...headers,},});
};export default {get: <T = any>(option: AxiosConfig) => {return request({ method: "get", ...option }) as Promise<IResponse<T>>;},post: <T = any>(option: AxiosConfig) => {return request({ method: "post", ...option }) as Promise<IResponse<T>>;},delete: <T = any>(option: AxiosConfig) => {return request({ method: "delete", ...option }) as Promise<IResponse<T>>;},put: <T = any>(option: AxiosConfig) => {return request({ method: "put", ...option }) as Promise<IResponse<T>>;},cancelRequest: (url: string | string[]) => {return service.cancelRequest(url);},cancelAllRequest: () => {return service.cancelAllRequest();},
};

config.ts

import { AxiosResponse, InternalAxiosRequestConfig } from "./types";
import { message } from "ant-design-vue";
import qs from "qs";
import { useUserStoreWithOut } from "../pinia/user";const defaultRequestInterceptors = (config: InternalAxiosRequestConfig) => {if (config.method === "post" &&config.headers["Content-Type"] === "application/x-www-form-urlencoded") {config.data = qs.stringify(config.data);}if (config.method === "get" && config.params) {let url = config.url as string;url += "?";const keys = Object.keys(config.params);for (const key of keys) {if (config.params[key] !== void 0 && config.params[key] !== null) {url += `${key}=${encodeURIComponent(config.params[key])}&`;}}url = url.substring(0, url.length - 1);config.params = {};config.url = url;}return config;
};const defaultResponseInterceptors = (response: AxiosResponse) => {if (response?.config?.responseType === "blob") {// 如果是文件流，直接过return response;} else if (response.data.code === 0) {return response.data;} else {message.error(response?.data?.message);if (response?.data?.code === 401) {const userStore = useUserStoreWithOut();userStore.logout();}}
};export { defaultResponseInterceptors, defaultRequestInterceptors };

router填充

index.ts

import { createRouter, createWebHashHistory } from "vue-router";
import type { RouteRecordRaw } from "vue-router";
import type { App } from "vue";
import Layout from "@/views/Layout/index.vue";
const constantRouterMap = [{path: "/",name: "Login",component: () => import("@/views/Login/index.vue"),meta: {title: "登录",keepAlive: true,hideInMenu: true,},},{path: "/401",name: "error_401",meta: {hideInMenu: true,},component: () => import("@/views/ErrorPage/401.vue"),},{path: "/500",name: "error_500",meta: {hideInMenu: true,},component: () => import("@/views/ErrorPage/500.vue"),},{path: "/AAA",name: "AAA",redirect: "/AAA/BBB",component: Layout,meta: {title: "目录",},children: [{path: "BBB",name: "BBB",component: () => import("@/views/AAA/BBB/index.vue"),meta: {title: "目录1",keepAlive: true,},},{path: "CCC",component: () => import("@/views/AAA/CCC/index.vue"),name: "ChangeRecord",meta: {title: "目录2",keepAlive: true,},},{path: "DDD",component: () => import("@/views/AAA/DDD/index.vue"),name: "UploadManage",meta: {title: "目录3",keepAlive: true,},},],},
];
const router = createRouter({history: createWebHashHistory(),strict: true,routes: constantRouterMap as RouteRecordRaw[],scrollBehavior: () => ({ left: 0, top: 0 }),
}) as any;export const setupRouter = (app: App<Element>) => {app.use(router);
};export default router;

本篇结束，后面文章继续填充：Pinia + Utils公共方法