http.js【axios的封装，拦截器】

最新推荐文章于 2025-05-26 19:37:55 发布

原创最新推荐文章于 2025-05-26 19:37:55 发布 · 745 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

web前端专栏收录该内容

419 篇文章

订阅专栏

本文介绍如何在Vue项目中全局配置Axios，包括设置超时时间、请求头、基URL、拦截器等，确保API调用的一致性和安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


export default {

	install: function(Vue,axios,router) {

		axios.defaults.timeout = 5000;

		axios.defaults.headers.post['accept'] = 'application/json';
		axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

// axios.defaults.headers.common['token'] = localStorage.getItem("currentUser_token");

		axios.defaults.baseURL = 'http://192.168.4.195:9092/';
		// axios.defaults.baseURL = 'http://192.168.4.64:9092/';

		axios.interceptors.request.use(
			config => {

				if (sessionStorage.getItem("currentUser_token")) {
					config.headers.common['token'] = sessionStorage.getItem("currentUser_token");

				}
				return config;
			},
			err => {
				return Promise.reject(err);
			});


// http response 拦截器
		axios.interceptors.response.use(
			response => {
				return response;
			},
			error => {
				if (error.response) {
					switch (error.response.status) {
						case 401:
							// 401 清除token信息并跳转到登录页面
							// store.commit('users/clearUser');
							router.replace({
								path: '/',
								query: {redirect: router.currentRoute.fullPath}
							});
							break;
						case 403:
							// 403 无权限，跳转到首页
							router.replace({
								path: '/',
								query: {redirect: router.currentRoute.fullPath}
							});
							break;
					}
				}
				// console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
				/*return Promise.reject(error.response.data)*/
				return Promise.reject('');
			});
		//将axios挂载到Vue原型上
		Vue.prototype.axios = axios;
		Vue.prototype.http = params => {
			return new Promise((resolve, reject) => {
				axios.post("/CallMethod", params)
					.then(response => {

						resolve(response.data);
					})
					.catch(err => {
						reject(err);
					})
			})
		};
	}
}