准备
参考
安装axios
yarn add axios
中文官网
src下新建request文件夹，该文件下新建index.ts
import axios from 'axios';
import { ElMessage } from 'element-plus';// const errorCodeType = function (code: number): string {
// let errMessage: string = '未知错误';
// switch (code) {
// case 400:
// errMessage = '错误的请求';
// break;
// case 401:
// errMessage = '未授权，请重新登录';
// break;
// case 403:
// errMessage = '拒绝访问';
// break;
// case 404:
// errMessage = '请求错误,未找到该资源';
// break;
// case 405:
// errMessage = '请求方法未允许';
// break;
// case 408:
// errMessage = '请求超时';
// break;
// case 500:
// errMessage = '服务器端出错';
// break;
// case 501:
// errMessage = '网络未实现';
// break;
// case 502:
// errMessage = '网络错误';
// break;
// case 503:
// errMessage = '服务不可用';
// break;
// case 504:
// errMessage = '网络超时';
// break;
// case 505:
// errMessage = 'http版本不支持该请求';
// break;
// default:
// errMessage = `其他连接错误 --${code}`;
// }
// return errMessage;
// };// 配置新建一个 axios 实例
const service = axios.create({baseURL: import.meta.env.VITE_API_URL,timeout: 50000,headers: { 'Content-Type': 'application/json' }
});// 添加请求拦截器
service.interceptors.request.use((config) => {// 在发送请求之前做些什么 token// if (Session.get('token')) {// config.headers!['Authorization'] = `${Session.get('token')}`;// }return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);// 添加响应拦截器
service.interceptors.response.use((response) => {// 对响应数据做点什么const res = response.data;return res;// if (res.code && res.code !== 0) {// // `token` 过期或者账号已在别处登录// if (res.code === 401 || res.code === 4001) {// Session.clear(); // 清除浏览器全部临时缓存// window.location.href = '/'; // 去登录页// ElMessageBox.alert('你已被登出，请重新登录', '提示', {})// .then(() => {})// .catch(() => {});// }// return Promise.reject(service.interceptors.response);// } else {// return res;// }},(error) => {// 对响应错误做点什么if (error.message.indexOf('timeout') != -1) {ElMessage.error('网络超时');} else if (error.message == 'Network Error') {ElMessage.error('网络连接错误');} else {if (error.response.data) ElMessage.error(error.response.statusText);else ElMessage.error('接口路径找不到');}return Promise.reject(error);}
);// 导出 axios 实例
export default service;
使用
api.get('/users').then((response: AxiosResponse) => {console.log(response.data);}).catch((error: any) => {console.error(error);});// 发送POST请求
api.post('/users', { name: 'John Doe' }).then((response: AxiosResponse) => {console.log(response.data);}).catch((error: any) => {console.error(error);});
