src/utils/request.jsimportaxiosfrom'axios'//方法一:当请求方法、请求URL、请求参数都相同时,视为同一个请求//functiongenerateReqKey(config){//const{method,url,params,data}=config;//return[method,url,JSON.stringify(params),JSON.stringify(data)].join("&");//}//方法二:请求方法,请求URL对于同一个请求,(不判断参数是否一致,当列表页面网络不稳定时,先发起page:2数据,后发起page:3数据,会returned,resultinginthedisplayofpagenumber3,showingthedataofpagenumber2)//用于生成请求KeyfunctiongenerateReqKey(config){const{method,url}=config;return[method,url].join("&");}//用于结合当前请求向pendingRequest对象添加信息constpendingRequest=newMap();functionaddPendingRequest(config){constrequestKey=generateReqKey(config);config.cancelToken=config.cancelToken||newaxios.CancelToken((cancel)=>{if(!pendingRequest.has(requestKey)){pendingRequest.set(requestKey,cancel);}});}//检查是否有重复请求,如果有,取消发送的请求functionremovePendingRequest(config){constrequestKey=generateReqKey(config);如果(pendingRequest.has(请求stKey)){constcancelToken=pendingRequest.get(requestKey);cancelToken(requestKey);pendingRequest.delete(requestKey);}}//创建axios实例constservice=axios.create({baseURL:'接口地址',timeout:30000})//请求拦截器service.interceptors.request.use(config=>{removePendingRequest(config);//检查是否有重复请求,如果有则取消发送的请求addPendingRequest(config);//把当前的请求信息添加到pendingRequest对象中returnconfig;},error=>{Promise.reject(error)})//响应拦截器service.interceptors.response.use(response=>{removePendingRequest(response.config);//从pendingRequest对象中移除请求returnresponse.data},error=>{removePendingRequest(error.config||{});//从pendingRequest对象中移除请求if(axios.isCancel(error)){console.log("Repeatrequestcanceled:"+error.message);}else{//添加异常处理}returnPromise.reject(error)})exportdefaultservicesrc/api/index.jsimportrequestfrom'@/utils/request'//验证码导出函数在getCode(data){returnrequest({url:'/support/country',method:'get',params:data})}页面调用
