vue——封装axios请求函数(功能实现)

谁借莪１个温暖的怀抱￠ 2022-08-31 15:20 232阅读 0赞

最近在其他项目组又接触到了`vue-cli`搭建的项目，感觉自己都忘记怎么使用了。很多东西就是这样，用的多了，温故知新，用的少了，会遗忘的越来越多。

现在把项目中的`axios`请求函数的封装记录如下：

import axios from "axios";
    import router from "@/router";
    import store from "@/store";
    import "../../public/static/config";//此处是禁止编译的js文件直接放在了public文件夹下面
    import { Message,Loading} from "element-ui";
    //接口域名
    let loading;
    const BASE_URL = window.config.API_HOST;//这个地方其实是上面的config.js文件中的参数，直接挂载到window上了
    //创建axios实例
    const http = axios.create({ 
    	baseURL:BASE_URL,//设置接口地址
    	timeout:1000*30//设置超时时间
    })
    //POST请求头的设置
    //http.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';
    //http.defaults.headers.post['Content-Type']='application/json;charset=UTF-8';
    let isRefresh = false;
    let requests = [];
    //请求拦截器
    http.interceptors.request.use(
    	config=>{ 
    		loading&&loading.close();
    		loading = Loading.service({ 
    			text:'努力加载中，请稍后...',
    			fullscreen:true,
    			background:'rgba(255,255,255,0)',
    			spinner:'el-icon-loading'
    		})
    		//获取token
    		let authToken = getAccessToken();
    		if(!authToken){ 
    			return config
    		}
    		const nowTime = new Date().getTime();
    		const oldTime = localStorage.getItem('oldtime');
    		const expires = localStorage.getItem('expires');
    		//计算token是否过期
    		if(location.href.includes('user')&&Number(oldTime)+expires*1000<=nowTime){ 
    			//判断是否正在刷新token
    			if(!isRefresh){ 
    				isRefresh = true;
    				//请求刷新token,失败则跳转登录
    				setTimeout(()=>{ 
    					localStorage.setItem('token',null);
    					localStorage.setItem('expires',3600);
    					localStorage.setItem('oldtime',nowTime);
    					requests.forEach(i=>i('321'));
    					requests = [];
    					isRefresh = false;
    					return http(config)
    				},3000)
    			}else{ 
    				return new Promise(resolve=>{ 
    					//将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行
    					requests.push(token=>{ 
    						config.heeaders.Authorization = token;
    						resolve(http(config));
    					})
    				})
    			}
    			return Promise.reject();
    		}
    		config.headers.Authorization = 'Bearer'+authToken;
    		return config;
    	},
    	error=>{ 
    		return Promise.reject(error);
    	}
    )
    //响应拦截器
    http.interceptors.response.use(
    	response=>{ 
    		loading.close();
    		//如果返回的状态码为200，说明接口请求成功，可以正常拿到数据，否则的话抛出错误
    		if(response.status==200||response.status==204){ 
    			return Promise.resolve(response);
    		}else{ 
    			return Promise.reject(response);
    		}
    	},
    	error=>{ 
    		loading.close();
    		if(!error){ 
    			return Promise.reject();
    		}
    		if(error.response){ 
    			switch(error.response.status){ 
    				case 401:
    					store.commit('logout');
    					//跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转到需要访问的页面
    					setTimeout(()=>{ 
    						router.replace({ 
    							path:'/index',
    							query:{ 
    								redirect:router.currentRoute.fullPath
    							}
    						})
    					},1000)
    					const originalRequest = error.config
    					store.dispatch('delToken');
    					store.dispatch('refreshToken').then(res=>{ 
    						//重新请求
    						return http(originalRequest);
    					}).catch(err=>{ 
    						Message.error('登录过期请重新登录!');
    						store.dispatch('handleLogOut');
    						router.replace('/index');
    					})
    					break;
    				case 403:
    					Message({ 
    						duration:2000,
    						message:'登录过期，请重新登录',
    						type:'error'
    					})
    					store.commit('logout');
    					//跳转登录页面，并将要浏览器的页面fullPath传过去，登录成功后，跳转需要访问的页面
    					setTimeout(()=>{ 
    						router.replace({ 
    							path:'/index',
    							query:{ 
    								redirect:router.currentRoute.fullPath
    							}
    						})
    					},1000)
    					break
    				case 404:
    					Message({ 
    						duration:2000,
    						message:'请求不存在',
    						type:'error'
    					})
    					router.replace({ 
    						path:'/404'
    					})
    					break;
    					//其他错误，直接抛出错误提示
    				default:
    					if(error.response.data.error.code && error.response.data.error.code.indexOf('xxxx')!=-1){ 
    						Message({ 
    							duration:2000,
    							message:error.response.data.message || error.response.data.error.message,
    							type:'error'
    						})
    					}
    			}
    			return Promise.reject(errors.response);
    		}else if(error.message.includes('timeout')){ 
    			Message.error('请求超时，请稍后再试');
    			return;
    		}
    	}
    )
    export default http
    function getAccessToken(){ 
    	return localStorage.getItem('token');
    }