封装网络请求

前言

最近开新项目又得封装网络请求, 之前的用响应式变量有点折磨, 这次直接用 axios 了, 正好水一篇博客吧.

基本用法

import axios from 'axios';

const instance = axios.create({
	baseURL: 'http://localhost:3000',
	timeout: 5000,
});

export { instance };

对 response 和 request 的处理

之后 axios.get 或者 post 什么的就行了. 但是用的时候会发现, 每次都需要这样子

// 这里假设100为请求成功, 1为token无效或缺少
//
//interface Response{
//  message: string,
//  code: number,
//  data: any
//}
//
//
instance.get('/info').then((res) => {
	if (!res.data) {
		// 数据为空
		return;
	}
	const { code } = res.data;
	if (code === 1) {
		router.push('/login');
		userStore.clear();
		showMsg('请重新登录');
	}
	const { data } = resp.data;
	return data;
});

这样的话每次都需要判断 code, 然后从 res.data 里拿 data. 在页面里面其实并不关心 code, 如果能找个什么地方统一处理的话可以省好多事情.

axios 提供了两个拦截器, axios.interceptors.request.use和axios.interceptors.response.use, 一个针对请求, 一个针对回复. 在这里可以用回复来统一处理

const codeHandler = {
	// 处理业务错误
	1: () => {
		router.push('/login');
		userStore.clear();
		showMsg('请重新登录');
	},
};
const httpCodeHandler = {
	// 处理http状态码错误
	// ...
};
instance.interceptors.response.use(
	(resp) => {
		const { code } = resp.data;
		if (code !== 100) {
			codeHandler[code]?.(resp);
			return promise.reject(resp);
		}
		const { data } = resp.data;
		return data;
	},
	(error) => {
		const { status } = error;
		httpCodeHandler[status]?.();
		return Promise.reject(error);
	}
);

这样子的话每次请求就可以直接使用 data 而不需要在意 code 了

instance
	.get('/info')
	.then((data) => {
		// 做点成功做的事情
	})
	.catch((err) => {
		console.error(err);
	});

这里也可以用一下 request 的拦截器, 之后不用再手动加 token

instance.interceptors.request.use((config) => {
	if (!config.url.startsWith('/auth')) {
		// 不需要鉴权
		return config;
	}
	// 获取token操作
	const token = localstorage.getItem('token');
	if (!token) {
		router.push('/login');
		return;
	}
	config.headers.Authorization = `Bearer ${token}`;
	return config;
});

解耦合

写到这里之后用的还算方便, 如果业务逻辑一直这么简单的话. 但是随着项目的庞大, 这个可能就存在一点问题. 现在的话其实路由/页面、仓库、网络请求耦合在一起了, 在更加复杂的情况下要做修改就会相当痛苦. 这里可以用发布订阅的设计模式来解耦合.

class EventBus {
	on(eventName, listener) {
		if (!this.listeners[eventName]) {
			this.listeners[eventName] = new Set();
		}
		this.listeners[eventName].add(listener);
	}

	emit(eventName, ...args) {
		this.listeners[eventName].forEach((listener) => listener(...args));
	}

	off(eventName, listener) {
		if (!this.listeners[eventName]) {
			throw new Error(`Event with name ${eventName} is not found`);
		}
		this.listeners[eventName].delete(listener);
	}
}

export default new EventBus();

这样的话, 网络请求这里就不必再导入 useUserStore 和 useRouter 之类的函数了, 只需要导入 EventBus, 然后这样

网络请求

const codeHandler = {
	// 处理业务错误
	1: () => {
		eventBus.emit('API:UN_AUTH');
	},
};

仓库

export const useUserStore = defineStore('user', () => {
	eventBus.on('API:UN_AUTH', () => {
		logout();
	});

	const userInfo = ref();
	const setUser = (user) => {
		userInfo.value = user;
	};
	const logout = () => {
		userInfo.value = null;
		localstorage.removeItem('token');
	};
	return {
		userInfo,
		setUser,
		logout,
	};
});

路由

const router =
	createRouter();
	// ...
eventEmitter.on('API:UN_AUTH', () => {
	router.push('/auth/login');
});

页面

eventEmitter.on('API:UN_AUTH', () => {
	showMsg('...');
});

这样这几个部分只需要在自己的地方做好自己的事情就可以了.