我写的是vue的框架，所有的框架都应该在实际应用中体验过。这里我们使用vue+vuex+Ts+elementEI做一个项目git地址：https://github.com/544076724/...首先下载vue-cli这里使用的版本是4.5.9首先创建项目vuecreateedu-boss-fed然后回答一些问题这里我们配置我们想要的选项然后第一个如果不选，默认是vue2.0版本，这里我们使用2.0.然后选择babel、ts、router、vuex、csspreprocessor、lint。检查完ts，我们还检查了使用class风格的组件语法（可以写jsx语法），也是。我们让ts只处理类型注解，然后把语法转换交给babel（ts处理的并不完美）。这里我们选择no，我们的项目使用的是hash模式路由。如果以后需要使用历史模式，请重新配置。这里我们使用第一个，对于最新的sass，我们这里使用Standard规则，比较松散，适合个人或者小团队使用。这里我们都检查一下，保存save和commit提交时会修复代码。然后第一个，在单独的文件中配置eslint和其他配置。最后就是看个人需求了，是否存储我们之前选择的set，生成模板，以备下次使用。这段代码的重点是请求的封装，拦截器把代码贴在这里//请求拦截器request.interceptors.request.use(function(config){//我们这里是通过重写config配置信息来实现业务功能的统一处理const{user}=store.stateif(user&&user.access_token){config.headers.Authorization=user.access_token}//注意：这里必须返回config，否则无法发送请求returnconfig},function(error){//DosomethingwithrequesterrorreturnPromise.reject(error)})//响应拦截器letisRfreshing=false//控制刷新令牌的状态letrequests:any[]=[]//存储401request请求到来在刷新令牌期间。interceptors.response.use(function(response){//如果状态码是2xx，就会进入这里//console.log('请求响应成功=>',response)//如果是自定义错误状态码，错误处理写在这里returnresponse},asyncfunction(error){//所有超过2xx的状态码都在这里执行//console.log('Requestresponsefailed=>',error)//如果是使用的HTTP状态代码，错误处理写在这里//console.dir(error)if(error.response){//发送了请求，收到了响应，但是状态码超出了2xx范围const{status}=error.responseif(status===400){Message.error('请求参数错误')}elseif(status===401){//令牌无效（未提供令牌，令牌无效，令牌过期）//if任何refresh_token尝试使用refresh_token获取新的access_tokenif(!store.state.user){redirectLogin()returnPromise.reject(error)}//刷新令牌if(!isRfreshing){isRfreshing=true//启用刷新状态//尝试刷新以获取新令牌returnrefreshToken().then(res=>{if(!res.data.success){thrownewError('FailedtorefreshToken')}//刷新令牌成功store.Commit('setUser',res.data.content)//重新发送请求队列中的请求requests.forEach(cb=>cb())//重置请求stsarrayrequests=[]returnrequest(error.config)}).catch(err=>{console.log(err)Message.warning('登录已过期，请重新登录')store.commit('setUser',null)redirectLogin()returnPromise.reject(error)}).finally(()=>{isRfreshing=false//重置刷新状态})}//在刷新状态下，将待处理的请求放入requests数组returnnewPromise(resolve=>{requests.push(()=>{resolve(request(error.config))})})}elseif(status===403){Message.error('没有权限，请联系管理员')}elseif(status===404){Message.error('请求的资源不存在')}elseif(status>=500){Message.error('服务器错误，请联系管理员')}}elseif(error.request){//请求已发送，未收到响应Message.error('请求超时，请刷新重试')}else{//设置时发生错误请求，触发错误Message.error(`requestfailed:${error.message}`)}//继续抛出请求失败的错误对象给之前的调用者returnPromise.reject(error)})这里我们的Invalidtoken(notoken,token无效，令牌已过期），它将尝试刷新令牌，然后再次发送失败的请求。token过期时间比较短（为了安全），刷新token接口（失败重新登录）这里只能执行一次实现是刷新token状态，存储所有其他请求并返回promise，等待为以后刷新成功再重新请求，请求结果返回解析承诺状态。这是上面实现的简化版本。让r;letp=newPromise(resolve=>{r=resolve//存储解析函数})requests.push({r,config:error.config//存储解析函数和对应的请求配置，以供后续调用})requests.forEach(item=>item.r(request(item.config)));其他都是一些常见的需求，有兴趣的可以下载跑来看看登录账号：18201288771密码：111111
