axios实用包axios在vue官方推荐后被越来越多的人使用，但是不得不说直接在项目中使用axios比较麻烦，需要自己写一个每次都是一堆配置，而且配置写在业务代码里很不雅。一般在项目中使用的时候会重新封装，以便更好的使用。但是我在网上找了一圈，也没有找到令我满意的解决方案。它要么不够优雅，要么根本不实用。所以我自己实现了一个简单但非常实用的包。实现思路我个人理想的请求方案如下：实际请求和请求配置解耦请求配置可配置请求配置集中管理请求配置分散你可能会问，什么是集中管理什么是分散集中管理这不难理解，但是如果它集中成一个文件，在项目初期可能没有问题，但是一旦项目变大，这个文件对维护者来说简直是灾难，所以需要将一个文件分成多个文件“集中”管理。但是划分规则是什么？按功能模块划分。这在我们公司的项目中一直是很好的做法。以下是文件结构：.├──src|├──模块||├──模块1|||├──api.js|||└──...||├──模组2|||├──api.js|||└──...||└──...|├──api.js|└──...└──...我们的包写在src/api.js文件中。添加axiosbasicconfiguration具体配置项的意思这里就不写了，具体见官网。baseURL可以根据公司情况和环境变量注入不同的值。importAxiosfrom'axios';exportconstaxios=Axios.create({baseURL:process.env.VUE_APP_API_BASIC_URL,responseType:'json',//withCredentials:true,headers:{'Accept':'application/json','Content-Type':'application/json'},validateStatus:status=>((status>=200&&status<300)||status===304)});addrequestinterceptor请求拦截器可以做一些骚操作，这里简单添加token即可。axios.interceptors.request.use(config=>{/*FIXME*///这里根据公司情况替换获取token的方式consttoken="xxx";if(token){config.headers.Authorization=`持有人${token}`;}returnconfig;},error=>Promise.reject(error);;获取不同模块下的apisrequire.context是webpack动态导入文件的一种方法。如果你的公司没有使用webpack进行打包，可以使用node的fs模块。require.context的具体使用见webpack官网letapisConfig={};constapis={};constcontext=require.context(`./modules`,true,/apis\.js$/);context.keys().forEach(key=>{const{default:api}=context(key);apisConfig=Object.assign(apisConfig,api);});封装发送请求方法，直接上传代码：Object.keys(apisConfig).forEach(key=>{constconfig=apisConfig[key];/***真正发送请求的方法*@paramrestfulrestful参数*@paramparams请求参数*@return{Promise>}*/functionrequest(restful,params){config.method=config.method||'get';letparameter={};letquery={};if(config.restful){constmatch=config.url.match(/{[^{}]+}/g);if(!config.transform){if(match&&match.length>0){匹配.forEach(str=>{str=str.slice(1,-1);if(!restful||Object.prototype.toString.call(restful)!=='[objectObject]'||!Object.keys(restful).includes(str)){让取消；config.cancelToken=newCancelToken(c=>cancel=c);取消（未注入${key}请求中的${str}参数）；}else{config.url=config.url.replace(`{${str}}`,restful[str]);}});配置.transform=true;}else{让我们取消；config.cancelToken=newCancelToken(c=>cancel=c);cancel('你好像不需要restful，请删除restful属性，或者赋值为false');}}参数=参数；查询=参数[2]；}else{参数=restful;查询=参数[1]；}if(config.method==='get'||config.method==='delete'){config.params={...参数，...查询};}elseif(config.method==='post'||config.method==='put'||config.method==='patch'){config.data=parameter;config.params=查询；}返回axios.request(config);}apis[key]=请求;});这里解决一个痛点：axios不支持restful至少我在官网上没看到有支持restful的。如果有人知道axios是如何原生支持restful的，请评论或发邮件寻求指导，谢谢。完整代码完整代码可以在我github上的项目中看到。使用方法1.编写请求配置在每个模块下的apis.js文件中编写如下配置：exportdefault{getTest:{//请求urlurl:'/user/{id}',//请求方法，默认是get方法，不需要写method:'get'//是否支持restfulrestful:true}，如果请求的域名与基本配置不一致，可以使用绝对URL，记得带上网络协议2.引入封装后在main.js中引入axios并添加到window对象中，这样就可以全局使用了importapifrom'./api';window.api=api;3.使用window.apiwindow.api.getTest({userId:1,id:2},{name:'Tom'}).then((data:any)=>{console.log(data);发送请求；}).catch((e:any)=>{Promise.reject(e);});4.使请求更hacky虽然可以使用Promise来简单获取数据和捕获错误，但是如果你使用ES7中的async功能，你就必须使用try/catch。这里使用大佬提供了一个比较hack的方法，参见Howtowriteasyncawaitwithouttry-catchblocksinJavascriptasyncgetTestData(){const[error,data]=awaitto(window.api.getTest({userId:1,id:2},{name:'Tom'}));if(error){...}...}最后，由于本人经验不足，可能会有一些bug。如果您发现，请及时报告并与您分享，谢谢。欢迎转载，转载请注明出处：https://blog.kaguramea.me/archives/axios-encapsulation
