Text虽然在vue中使用axios非常方便，但是在实际操作中，我们在日常操作中，可能会创建一个全局的方法来统一管理，以简化操作，以求在日常操作中保持接口规则一致。而在实际的接口对接中，我们大部分需要请求Intercept配合response来处理token和回调状态码。然后我就根据自己的需要简单的进行了分包。（之前很少接触vue，主要是用ng和react，这次新项目想用vue，熟悉一下vue的一些新特性和新方法，如有不对的地方，欢迎大家批评指正）前提条件：熟悉前端ts、node等1、安装axiosnpminstallaxios2。为拦截器和全局方法写一个http.ts文件http逻辑的封装，为了代码分离，我也为拦截器逻辑创建了interceptors.ts文件，放在一起。interceptors.ts（拦截器，请求和响应拦截以及一些逻辑处理）importaxiosfrom'axios'；从'ant-design-vue'导入{message}；//这是我引入的antd组件库，为了方便弹出toastexportclassInterceptors{publicinstance:any;constructor(){//创建一个axios实例this.instance=axios.create({timeout:1000*12});//初始化拦截器this.initInterceptors();}//为了在http.ts中获取初始化的axios实例publicgetInterceptors(){returnthis.instance;}//初始化拦截器publicinitInterceptors(){//设置post请求头this.instance.defaults.headers.post['Content-Type']='应用程序/x-www-form-urlencoded';/***请求拦截器*每次请求前，如果有token，则在请求头中携带token*/this.instance.interceptors.request.use((config)=>{//在登录流程控制中，根据本地是否有token来判断用户的登录状态//但是即使token存在，token也有可能过期，所以在每个请求头中都携带了token//后台是根据携带token到什么地方判断用户的登录状态，返回给我们相应的状态码token;}}returnconfig;},(error)=>{console.log(error);},);//响应拦截器this.instance.interceptors.response.use(//请求成功(res)=>{if(res.headers.authorization){localStorage.setItem('id_token',res.headers.authorization);}else{if(res.data&&res.data.token){localStorage.setItem('id_token',res.data.token);}}if(res.status===200){returnPromise.resolve(res.data);}else{this.errorHandle(res);返回Promise.reject(res.data);}},//请求失败（错误）=>{const{response}=error;if(response){//请求已发送，但不在2xx范围内this.errorHandle(response);返回Promise.reject(response.data);}else{//处理网络断开的情况//eg:当请求超时或者网络断开时，更新state的网络状态//网络状态控制app.vue中一个全局断线提醒组件的显示和隐藏//关于断线组件中数据的刷新和重新获取，会在message.warn('中说明断线组件网络连接异常，请稍后重试！');}});}/***HTTP握手错误*@paramres响应回调，根据不同的响应执行不同的操作*/privateerrorHandle(res:any){//状态码判断开关(res.status){case401:break;案例403：中断；case404:message.warn('请求的资源不存在');休息;默认值：message.warn('连接错误');}}}http.ts（http封装，根据实际情况处理）/***@authorkeiferju*@time2019-08-2912:57*@titlehttp请求封装*@desc**/import{Interceptors}来自'@/service/interceptors';从'ant-design-vue'导入{message,Modal};//播放toastimportrouterfrom'../router';exportclassHttpService{publicaxios：任何；公共模态：任何；constructor(){//获取一个axios实例this.axios=newInterceptors().getInterceptors();}/***getrequest*@paramparamsparameter*@paramjwttoken是否校验*@parammodulenamemodule*@paramoperationinterface*@paramflagflag*@paramversonversion,default1.0.0*@paramserviceservice,默认服务*/publicgetData(params:object,jwt:boolean,modulename:string,operation:string,flag:string,verson='1.0.0',service='services'){consturl=service+'/'+verson+'/'+模块名+'/'+操作；constbody={parameter:{data:params,tag:flag,},};returnnewPromise((resolve,reject)=>{this.axios.get(url,{params:body,headers:{isJwt:jwt},}).then((res)=>{this.结果处理（资源，解决）；}).catch((err)=>{reject(err.message);});});}/***post请求*@paramparams参数*@paramjwt是否token校正检查*@parammodulename模块*@param操作接口*@paramflagflag*@paramversonversion,default1.0.0*@paramserviceservice,默认服务*/publicpostData(params:object,jwt:boolean,modulename:string,operation:string,flag:string,verson='1.0.0',service='services'){consturl=service+'/'+verson+'/'+模块名+'/'+操作；constbody={数据：参数，标签：标志，};returnnewPromise((resolve,reject)=>{this.axios.post(url,body,{headers:{isJwt:jwt},}).then((res)=>{this.resultHandle(res,resolve);}).catch((err)=>{重新项目（错误消息）；});});}/****@paramres*@paramresolve*/publicresultHandle(res:any,resolve){if(res.status>0){resolve(res.data);}else{this.errorHandle(res);}}/***服务器状态处理，如中断异常、退出异常等)*@paramres*/publicerrorHandle(res:any){message.warn(res.msg);//统一说一下服务器提示，我们的提示都是服务器提供的//状态码判断开关(res.status){case-102:break;案例-152：中断；默认值：//控制台。日志（其他）；}}}3。挂载我们定义了拦截器，那么我们就要全局挂载它，方便我们使用.main.tsimportVuefrom'vue';importAppfrom'./App.vue';importHighchartsVuefrom'highcharts-vue';Vue.config.productionTip=false;Vue.prototype.$httpService=newHttpService();//挂载服务newVue({router,render:(h)=>h(App),}).$mount('#app');4.ts桥（不知道怎么调用呢，我从ng开始就一直这样调用）我上一步做完肯定会报错，$httpService是什么，它不存在，这是因为ts的特性导致的导致.main.ts同级目录创建一个xx。d.ts文件。从'./service/http'导入{HttpService}；声明模块'vue/types/vue'{interfaceVue{$httpService:HttpService;}}5.在其他组件中使用，直接使用this调用即可，不需要再引用，但是注意在this点发生变化的回调中使用时找不到。你应该知道如何解决它。this.$httpService.postData({},true,'execute','xxx','tag').then((result)=>{//doing},(error)=>{console.log(error);});最后：这是ts下的封装，js应该更简单，更简单（步骤会少一些，网上教程应该很多）。挂载http工具的方式通常适合我们定义全局的工具类或者服务。
