requset封装

//首先引入axios
import axios from "axios";
// 引入element-plus 组件库
import { ElMessage } from "element-plus";

//然后通过create方法来创建一个请求服务
//然后create方法内有一些配置项，比如接口域名`baseURL`、接口请求超时时间`timeout`
//接口url`url`
//接口请求方式`method`等等，需要我们按需传入
// create an axios instance
const service = axios.create({
	// process.env.VUE_APP_BASE_URL, // 完整的api地址 = 接口域名+ 接口路径
	baseURL: "/api",
	// 完整url = 服务根url + 请求url拼接的； 服务根url来源于全局变量；请求url来源于api函数的url参数。
	// withCredentials: true, // 跨域请求时发送cookie
	timeout: 3000, // 请求超时时间 5s，请求超时
});
//下面会定义两个拦截器，分别是 `请求拦截器`，`响应拦截器`
//`请求拦截器`是前端请求后端接口前处理的一些逻辑，比如开启loading，配置header请求头等等
//`响应拦截器`就是后端响应我们前端，返回回来的数据，比如我们可以在这响应拦截器内拿到status Code
//拿到后端接口返回的code，关闭loading、根据code码处理一些详细的逻辑等等一系列操作
//request interceptor   请求拦截器
service.interceptors.request.use(
	(config) => {
		// do something before request is sent。在发送请求之前做一些事情
		// 请求之前的设置
		// 添加请求头信息，可以根据需要自行选择，也可以不要
		// 例如请求头加入“tken”键
		config.headers.Authorization = localStorage.getItem('token') ? JSON.parse(localStorage.getItem('token')) : ''
		return config;
	},
	(error) => {
		// 请求错误时
		return Promise.reject(error);
	}
);

// 响应拦截器
service.interceptors.response.use(
	(response) => {
		response.data.message &&
			ElMessage({
				message: response.data.message,
				type: "success",
			});

		// 对响应数据做点什么
		return response;
	},
	(error) => {
		switch (error.response.status) {
			case 300:
				ElMessage({
					message: "多种选择",
					type: "warning",
				});
				break;
			case 301:
				ElMessage({
					message: "永久重定向",
					type: "warning",
				});
				break;
			case 302:
				ElMessage({
					message: "临时重定向",
					type: "warning",
				});
				break;
			case 303:
				ElMessage({
					message: "查看其他位置",
					type: "warning",
				});
				break;
			case 304:
				ElMessage({
					message: "未修改",
					type: "warning",
				});
				break;
			case 305:
				ElMessage({
					message: "使用代理",
					type: "warning",
				});
				break;
			case 307:
				ElMessage({
					message: "临时重定向",
					type: "warning",
				});
				break;
			case 400:
				ElMessage({
					message: "请求参数错误",
					type: "warning",
				});
				break;
			case 401:
				ElMessage({
					message: "访问没有权限",
					type: "warning",
				});
				break;
			case 403:
				ElMessage({
					message: "访问被禁止",
					type: "warning",
				});
				break;
			case 404:
				ElMessage({
					message: "请求接口未找到",
					type: "warning",
				});
				break;
			case 405:
				ElMessage({
					message: "方法禁用",
					type: "warning",
				});
				break;
			case 406:
				ElMessage({
					message: "不接受",
					type: "warning",
				});
				break;
			case 407:
				ElMessage({
					message: "需要代理授权",
					type: "warning",
				});
				break;
			case 408:
				ElMessage({
					message: "请求超时",
					type: "warning",
				});
				break;
			case 409:
				ElMessage({
					message: "服务器在完成请求时发生冲突",
					type: "warning",
				});
				break;
			case 410:
				ElMessage({
					message: "请求的资源已永久删除",
					type: "warning",
				});
				break;
			case 411:
				ElMessage({
					message: "需要有效长度",
					type: "warning",
				});
				break;
			case 412:
				ElMessage({
					message: "未满足前提条件",
					type: "warning",
				});
				break;
			case 413:
				ElMessage({
					message: "请求实体过大",
					type: "warning",
				});
				break;
			case 414:
				ElMessage({
					message: "请求的 URI 过长",
					type: "warning",
				});
				break;
			case 415:
				ElMessage({
					message: "不支持的媒体类型",
					type: "warning",
				});
				break;
			case 416:
				ElMessage({
					message: "请求范围不符合要求",
					type: "warning",
				});
				break;
			case 417:
				ElMessage({
					message: "未满足期望值",
					type: "warning",
				});
				break;
			case 500:
				ElMessage({
					message: "服务器内部错误",
					type: "warning",
				});
				break;
			case 501:
				ElMessage({
					message: "尚未实施",
					type: "warning",
				});
				break;
			case 502:
				ElMessage({
					message: "错误网关",
					type: "warning",
				});
				break;
			case 503:
				ElMessage({
					message: "服务不可用",
					type: "warning",
				});
				break;
			case 504:
				ElMessage({
					message: "网关超时",
					type: "warning",
				});
				break;
			case 505:
				ElMessage({
					message: "HTTP 版本不受支持",
					type: "warning",
				});
				break;
		}
	}
);

// 最后暴露我们声明的 service 服务
export default service;