vue3.2/Vite/Ts15: axios 二次封装
·
Yin灏
- 新建 src / utils / request.ts
import axios from "axios";
let request = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 5000,
});
// 请求拦截器
request.interceptors.request.use((config) => {
return config;
});
// 响应拦截器
request.interceptors.response.use(
(response) => {
return response.data;
},
(error) => {
let message = "";
let 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;
- .env.development
VITE_APP_BASE_API = '/api'
- 测试 axios 封装
<script setup lang="ts">
import request from "@/utils/request";
import { onMounted } from "vue";
onMounted(() => {
request({
url: "/user/login",
method: "post",
data: {
username: "admin",
password: "111111",
},
}).then((res) => {
console.log(res);
});
});
</script>