axios封装

183 阅读1分钟

axios封装(http.ts)

import axios from 'axios';
import baseUrl from './baseUrl';

const instance = axios.create({ timeout: 5000 });

//vue-cli
// if (process.env.NODE_ENV === "development") {
//   instance.defaults.baseURL = baseURL; // 开发环境
// } else if (process.env.NODE_ENV === "production") {
//   instance.defaults.baseURL = "/"; // 生产环境
// }

//vite
if (import.meta.env.DEV) {
	instance.defaults.baseURL = baseUrl; //开发环境
} else {
	instance.defaults.baseURL = '/'; //生产环境
}

// 设置默认请求头
instance.defaults.headers.get['Content-Type'] = 'application/json;charset=UTF-8';
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 请求拦截器
instance.interceptors.request.use((config) => {
	config.headers.token = ''; //加token验证
	// ...otherConfig
	const newConfig = {
		...config,
		params: config.params || {},
		//...otherConfig
	};
	return newConfig;
});
//响应拦截器
instance.interceptors.response.use((res) => {
	if (res.status === 200) return Promise.resolve(res);
	if (res.status !== 200) return Promise.reject(res);
	// 其他响应类型
	(err) => {
		if (err.response.status) {
			switch (err.response.status) {
				case 5002:
					break; //自定义响应类型
				// 验证失败
				case 403:
					break;
				// 404请求不存在
				case 404:
					break;
				// 其他错误,直接抛出错误提示
				default:
			}
		}
		return Promise.reject(err.response);
	};
});

export default instance;

请求方法封装(apiFn.ts)

import instance from './httpFn';

export async function post(url, params) {
	try {
		const { data } = await instance.post(url, params);
		return Promise.resolve(data);
	} catch (error) {
		console.log(error);
		return Promise.reject(error);
	}
}

export async function get(url, params) {
	try {
		const { data } = await instance.get(url, { params });
		return Promise.resolve(data);
	} catch (error) {
		console.log(error);
		return Promise.reject(error);
	}
}

//处理POSTbody序列化传参
export async function postBody(url, params) {
	try {
		const { data } = await instance({
			url: url,
			data: params,
			method: 'post',
			headers: {
				'Content-Type': 'application/json',
			},
		});
		return Promise.resolve(data);
	} catch (error) {
		console.log(error);
		return Promise.reject(error);
	}
}

// 表单
export async function form(url: string, form: FormData) {
	try {
		const { data } = await instance({
			url,
			data: form,
			method: 'post',
			headers: {
				'Content-Type': 'multipart/form-data',
			},
		});
		return Promise.resolve(data);
	} catch (error) {
		console.log(error);
		return Promise.reject(error);
	}
}