前端axios在项目实战中的封装

　　简介
　　Axios是一个简单的基于Promise的HTTP请求库，用于浏览器客户端和node。js。
　　今天给大家讲一下，我们平时在项目中都是怎么使用它的安装npminstallaxiosS基本使用importaxiosfromaxios；axios。get（users）。then（res｛console。log（res。data）；｝）；
　　平时我们都是使用vue这样的支持单页面（spa）开发的框架来完成业务页面开发，但是不大可能在每个页面上都像上面那样去引入axios然后调用接口，一般来说我们都会对axios做一次封装，从而可以对请求前和请求后做一些处理，比如说日志监控、错误处理等封装
　　我们可以在项目目录下建一个http。js文件，内容如下，我们以vue和elementui为例单独引入一次axiosimportaxiosfromaxios；vuex，里面存放着登录后的token信息，每次请求前要放到header里importstorefromstore；elementui的右上角提示信息组件及加载组件import｛Notification，Loading｝fromelementui；import｛自定义超时时间，一般30秒TIMEOUTTIME，和后台约定这个值为1时，代表业务数据返回正常，其它情况有报错STATUSCODEOK，右上角提示信息停留时长，一般3秒NOTIFYSTAYTIME，这个值为401常量，代表请求是没有授权的，需要授权或登录CODEUNAUTHORIZED，header里jwt的token信息，用于每次请求的授权校验HEADERTOKENNAME｝fromconfig；路由importrouterfromrouter；loading加载遮罩，请求前加全屏遮罩，防止重复请求letloadingInstacenull；创建axios实例constfetchaxios。create（｛请求的baseUrlbaseURL：process。env。VUEAPPBACKENDAPIPXURL，是否可以查cookiewithCredentials：true，请求超时时间timeout：TIMEOUTTIME，｝）；request请求时拦截器fetch。interceptors。request。use（（config）｛请求前加loading遮罩loadingInstaceLoading。service（｛lock：true，text：加载中，spinner：eliconloading，background：rgba（0，0，0，0。7），｝）；if（store。getters。token）｛如果已经登录或授权，那么把token带在请求的header里config。headers〔HEADERTOKENNAME〕store。getters。token；｝returnconfig；｝，（error）｛请求时报错了，关掉loading遮罩，防止页面卡死loadingInstaceloadingInstace。close（）；并把错误信息提示在页面右上角，统一处理Notification。error（｛title：错误，message：error。message，duration：NOTIFYSTAYTIME，｝）；returnPromise。reject（error）；｝）；respone返回数据时拦截器fetch。interceptors。response。use（（res）｛statusCode为200以下的会走这里关掉loading遮罩loadingInstaceloadingInstace。close（）；和后台约定的，如果返回的数据code不为1那么就是有业务错误并把后台返回的业务错误信息提示在页面上if（res。data。coderes。data。code！STATUSCODEOK）｛Notification。error（｛title：错误，message：res。data。msg，duration：NOTIFYSTAYTIME，｝）；｝returnres；｝，（err）｛返回结果statusCode不为200，一般为200以上常见的比如，401，500这些的关掉loading遮罩，防止页面卡死loadingInstaceloadingInstace。close（）；有返回数据时if（err。response）｛如果是401的话，说明没有授权或者登录，直接去授权或登录页if（err。response。statusCODEUNAUTHORIZED）｛router。push（login）；｝else｛其他情况，把错误信息显示在页面上Notification。error（｛title：错误，message：err。message，duration：NOTIFYSTAYTIME，｝）；｝｝elseif（err。request）｛request时错误信息，同上面一样的处理逻辑if（err。request。statusCODEUNAUTHORIZED）｛router。push（login）；｝else｛Notification。error（｛title：错误，message：err。message，duration：NOTIFYSTAYTIME，｝）；｝｝else｛其它错误信息提示Notification。error（｛title：错误，message：err。message，duration：NOTIFYSTAYTIME，｝）；｝returnPromise。reject（err）；｝）；最终把封装的方法返回exportdefaultfetch；使用引入封装的httpimporthttpfromhttp获取个人用户的区域列表http（｛method：post，url：xxxxxx，请求参数data：｛username：xxx，password：xxx｝｝）。then（res｛console。log（res｝）
　　觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧