index.ts
import axios, { Axios } from "axios";
import responseInterceptor from "./interceptors/response";
import requestInterceptor from "./interceptors/request";
// 创建axios实例
const axiosInstance: Axios = axios.create({
baseURL: 'http://127.0.0.1:8088',
timeout: 10000,
withCredentials: true,
});
// 请求拦截器
requestInterceptor(axiosInstance);
// 响应拦截器
responseInterceptor(axiosInstance);
export default axiosInstance;
response.ts
import { Axios } from "axios";
export default (axiosInstance: Axios): void => {
// 相应拦截器
axiosInstance.interceptors.response.use(
(response) => {
const { responseType } = response.config;
// 不拦截blob
if (responseType === "blob") {
return response;
}
const { success, errMsg } = response.data;
// 处理失败请求
if (!success) {
window.$message.error(errMsg);
return Promise.reject(errMsg);
}
return response.data;
},
(error) => {
return Promise.reject(error);
}
);
};
request.ts
import { Axios } from "axios";
export default (axiosInstance: Axios): void => {
axiosInstance.interceptors.request.use((config) => {
return config;
});
};
api api\bussniess\user
import axiosInstance from "@/plugins/axios"
const GETUSERINFOAPI = (data: any): Promise<any> =>
axiosInstance.get('/blog/user', data);
export default{
GETUSERINFOAPI, // 获取用户信息
}
调用
<template>
<div>
<h1 @click="userInfo">首页</h1>
<n-button type="primary" @click="handleClick">按钮</n-button>
</div>
</template>
<script lang="ts" setup>
import { ref } from "@vue/reactivity";
import { userApi } from "@/api";
const handleClick = () => {
console.log(window)
window.$message.warning('警告警告')
}
const userInfo = () => {
console.log(userApi)
userApi.GETUSERINFOAPI({}).then(() => {});
};
</script>
<style lang="scss" scoped></style>