胜者可以容纳心中的世界，败者只能看到对方在该目录下创建一个request目录，并创建api.js和http.js文件2.配置http.jsfile//importaxiosimportaxiosfrom'axios'//importstroeimportstorefrom'@/store/index'//importrouterimportrouterfrom'@/router/index'//elementUi消息提示组件。import{Message}from'element-ui'//iviewUI框架的loadingbar组件，浏览器顶部加载动画import{LoadingBar}from'iview'//配置请求取消。搜索等场景，输入较快，接口调用频繁case//声明一个数组，存放每次请求的取消函数和axios标识letpending=[]constCancelToken=axios.CancelTokenletremovePending=(config)=>{for(letpinpending){if(pending[p].u===config.url+JSON.stringify(config.data)+'&'+config.method){pending[p].f()pending.splice(p,1)}}}//环境参数console.log(process.env.NODE_ENV,process.env.ENV_CONFIG,'environmentparameters')//根据不同的环境配置不同的请求地址if(process.env.NODE_ENV==='development'){console.log(router,store,'http.js中的路由器信息')axios.defaults.baseURL='https://api.bangzhu.tech/new_simulate'}elseif(process.env.NODE_ENV==='testing'){axios.defaults.baseURL='https://api.bangzhu.tech/new_simulate'}elseif(process.env.NODE_ENV==='production'){axios.defaults.baseURL='https://www.bangzhu.tech/api'}//设置请求的最大时长，超时请求接口失效。axios.defaults.timeout=50000//设置请求头参数axios.defaults.headers.post['Content-Type']='application/json;charset=UTF-8'//设置请求参数By-User-Info:8(userid)axios.defaults.headers.common['By-User-Info']=localStorage.getItem('userInfo_admin')?JSON.parse(localStorage.getItem('userInfo_admin')).user_id:''//携带请求cookieaxios.defaults.withCredentials=true//请求拦截器axios.interceptors.request.use(config=>{//取消请求removePending(config)config.cancelToken=newCancelToken((c)=>{//这里的axios标识是请求地址&请求方式拼接的字符串，当然你也可以选择其他一些方式pending.push({u:config.url+JSON.stringify(config.data)+'&'+config.method,f:c})})//在request请求头的header中配置Authorization，如果你登陆了，你有授权，设置它if(store.state.userInfo&&store.state.userInfo.Authorization){consttoken=store.state.userInfo.Authorizationtoken&&(config.headers.Authorization=token)}returnconfig},error=>{Message.error({消息：'Requestinterfaceerror',duration:3000})returnPromise.error(error)})//响应拦截器axios.interceptors.response.use(response=>{//如果返回的状态码是200，表示接口请求成功，可以正常获取数据//取消响应removePending(response.config)//否则抛出错误if(response.status===200){returnPromise.resolve(response)}else{returnPromise.reject(response)}},error=>{if(error.response.status){switch(error.response.status){//401:Notloggedin//如果没有登录，则跳转到登录页面并携带当前页面的路径//登录成功后返回当前页面，这一步需要在登录页面进行操作case401:Message.error({message:'Nopermission',duration:1000})router.replace({name:'login'})break//403tokenexpired//提示用户登录过期//清除localtoken并清除vuex中的token对象//跳转到登录页面case403:Message.error({message:'登录过期，请重新登录',duration:1000})//清除tokenlocalStorage.removeItem('token')//跳转到登录页面，传入要浏览页面的fullPath。登录成功后，跳转到要访问的页面。localStorage.clear()store.dispatch('loginOut')break//404请求不存在case404:Message.error({message:'网络请求不存在',duration:1500})break//其他错误,直接抛出错误提示default:{Message.error({message:error.response.data.message,duration:1500})}}returnPromise.reject(error.response)}})exportfunctionget(url,params,config){//如果是表单/数据提交信息if(config){axios.defaults.headers.post['Content-Type']='multipart/form-data'}LoadingBar.start()returnnewPromise(async(resolve,reject)=>{axios.get(url,{params:params}).然后(res=>{resolve(res.data)LoadingBar.finish()}).catch(err=>{reject(err.data)LoadingBar.error()})})}exportfunctionpost(url,params,config){//如果请求头需要特殊设置if(config){axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8'}LoadingBar.start()returnnewPromise((resolve,reject)=>{axios.post(url,params).then(res=>{resolve(res.data)LoadingBar.finish()}).catch(err=>{reject(err.data)LoadingBar.error()})})}导出函数put(url,params){LoadingBar.start()console.log(window.location.hash)returnnewPromise((resolve,reject)=>{axios.put(url,params).then(res=>{resolve(res.data)LoadingBar.finish()}).catch(err=>{reject(err.data)LoadingBar.error()})})}三、配置api.js文件。我在api中配置了所有接口。在js文件中，修改接口名称等更方便，也容易定位//1.引入http.js中导出的??get/post/put方法import{get,post,put}from'./http'//2.定义接口，退出登录界面和参数exportconstLOGIN_OUT=params=>get('/auth/login_out',params)//微信登录界面exportconstWECHAT_LOGIN=params=>post('/index.php/login/wechat',params)4.接口使用//引入要使用的接口import{LOGIN_OUT,WECHAT_LOGIN}from'@/request/api'...exportdefault{...methods:{gotoLogin(){letparams={username:'',password:''}//接口使用WECHAT_LOGIN(params).then(res=>{console.log(res)}).catch(error=>{console.log(错误)})}}}
