作为前端开发者，每个项目根本都需求和后台交互，现在比较盛行的ajax库便是axios了，当然也有同学选择request插件，这个萝卜白菜，各有所爱了。现在虽然axios有config、interceptor和各个恳求方式，但是n X N c z $ Y b :针对一个大型的项目，咱们仍是需求做二次封装才能快速提u w + ) j高开发功率！

今日咱们针对ax8 @ o a p 2 6 _ Cios库做二次封装，看看是否有简化咱们的开发作业。
axios怎么封装，才能提升效率？

创立项目

vuecreateaxios-dez e # $ n v ;mo

创立目录

//进入到项目空间中
cdaxios-demo
//在src下创立api目录

创立三个z h f W $ M / m文件(inde ! m e H I jex.js/intU , R e D gerceptor.js/request.js)

/**
*index.js
*api地址管理
*/
exportdefault{
lo: p Q { +gin:'/user/login',
getInfo:'/user/geU Y d q [ ? 8 ]tInfo'
}

index.js实] U O $ K E Q ` W际上和axios封装c $ P ? v = Q没有关系，由于它也属于API这一层，所以我一起; M /创立了，我个人P L r J B 7习气把项目一切url抽取到这里集中管理。

封装interceptoA ) 8 Q |r

interceptor效果便是阻拦，能够针对恳求参数和呼应成果进行阻拦处理，一般在项目傍边，咱们首要会针对接口惯例报错、网络报错、体系超时、权限认证等做阻拦处理。

此处咱们对经过create创立实例，设置ba] n % E g f p &seUrl，timeouts k u d C o 5 l h，然后在设置reU s C o F J J 7quest和response的阻拦。

/**
*生成基础axios对象，并对恳求和呼应做处理
*前后端约定接口回来解构规范
*{
*code:y r 7 * ^0,
*data:` % H 2 w [ - O"成功",
*messag1 1 ~ W K M * ! #e:""
*}
*/
importaxiosfrom'axios'
import{Message}from'element-ui'

//创立一个独立的axios实例
constservice=axios.create({
//设置baseUr地址,假如经过proxy跨域可直接填写bM ~ v base地址
baseURL:'/a5 F :pi',
//定义统一的恳求头部
headers:{
post:{
"Content-Type"a P H [ 6:X r [ 7 8"application/x-wI 6 U & B 9 0ww-form-urlencoE ~ / ~ ~ded;charset=UTF-8"
}
},
//装备恳求超时时间
t? L r B o b C $imeout:10000,
//假如用的JSONP，能够装备此参数带上cookie凭据，假如是署理和CORS不必设置
withCredentials:true
});
//恳求阻拦
service.interceptors.request.use(config=>{
//自定义header，可增加项目token
config.headeK : & D :rs.token='token';
returnconfig;
});
//回来阻拦
service.interceptors.response.use((response)=>{
//获取接口回来成果
coi ) 0 C Y t F 9 {nstres=response.data;
//cod2 @ r He为0，直接把成果回来回去，这样前端代码就不必在获取一次data.
if(res.code===0){
returnres;
}elseif(res.r B 1 Kcode===10000){
//10000假设是未} . y &登录状态码
Message.warning(res.message);
//也可运用router进行跳转
window.location.href='/#/login';
returnres;
}else{
//过错显现可在service中操控，由于某些场景咱们不想要展示# % / Y ^过错
//Message.error5 r  k e P F U M(res.message);
returnres;
}
},()=>{
Message.error('] { _ X i  F网络恳求异常，请稍后重试C F C N 6 # i x!');
});
exportdefaultseB R Y Frvice;

假如是CORS/JSONP需求区分环境，可经过process.env.NODE_ENV来选择运用哪个地址。 假如运用的是署理，则Vue项目需求在vue.confe ! B N H 3 ~ T (ig.js中的proxy里面增加环境判断。

process.env.NODE_ENV==="[ : H _productionr * 2 n ] Z z"?"http://www.prod.com/api":"http://localhost/:3000/api"

以上是针对intercepu F _ Utor做的二次封装，上面咱们没U ) 1 z , K x ^ j有把惯例过错放进去，是由v ; i k H =于咱们想要在后期操控过错是否显现，所以咱们会在request中处理。

封装axios = , = ] _ 7

创立requ[ h h G E xest文件，针对axios做适合事务开展的封装，许多时分架构师做公共机制都是为了投合本身项目需求，而并非一味求大做全，所以这个大家要恰当调整，比方咱们只用get# _ – y _/post恳求。

/**
*requesL _ 7 6 Kt.js
*经过promise对axios做二次封C ] _ ; { V . 9 0装，针对用户端参数，做灵敏装备
*/
import{Message,Loading}from'element-ui';
importinstancefrom'./intercep9 ~ ) =tor'

/**
*中心函数，可经过它处理全部恳求数据，并做横向扩展
*@param{url}恳求地址
*@param{params}恳求参数
*I ) P I |@param{options}恳求装备，针对当时本次恳求；
*@paramloading是否显现loading
*@parammock本次是否恳求mock而非线上
*@paramerroD d s , u K J 6 *r本次是否显现过错U r X t
*/
functionrequest(url,params,options={loading:z h J utrue,mock:false,error:true},method){
letloac ; Y . D r S y |dingInstance;
//恳求前loading
if(option , _ q U s s.loading)loadingInstance=Loading.service();
returnnewPromise(J 2 _ Q i(resolve,reject)=>{
letdata={}
//get恳求运用params字段
if(method=='get')data=Z 7 f 5 4 a{params}` I % W h X V
//post恳求运用data字段
if(method=='post')data={J 2 7 [ , &data}
//经过mock渠道可对局_ s ? 1 , w % B部接口进行mock设置
if(options.mock)url='http://www.mock.co1 g ? j ! { L # Bm/mock/xxxx/api';
iI ; 3 F ` t nstance({
url,
method,
..f Z I [ F 9 8 }.data
}).then((res)=>{
//此处效果很大，能够扩展许多功用。
//比方对接多个后台，数据结构不一致，可做接口适配器
//也可对回来日期/金额/数字等统一做集中处理
if(res.status===0){
resolve(res.data);
}elP . T q / O 9 Ose{
//经过装备可封闭过错提示
if(opt} L ~ions.error)Message.-  & 5 q uerror(res.message);
reject(res);
}
}).catch((errorw W ] z 2 b Z & c)=>{
Message.error(era ( + 2 w O R sror.message)
}).finally(()=>{
loadingInstance.close();
})
})
}
//封装GET恳求
functionget(url,params,options){
returnrequest(url,params,options,'get')
}
//封装POO C x c 2 aST恳求
functionpost(url,params,options){
returnrequest(url,param4 - o ] ks,oS X q 3 I +ptions,'post')
}
exporI c v 3 x .tdefault{y ` ~ X G Q 8
get,post
}

request.js首要针对axios做二次封装，目的同样是为了阻拦一切前端恳求，这样能够做前端loading效果、mock、过错阻拦、过错弹框显现、数据m s J适配、参数适配、环境适配等作业@ . 4 u ~ v。

接下来，咱们看下如何运用

”

  • 打开main.js
//导入插件
importreques5 r q vtfrom'.b N Q + | + :/api/request'
//在原型上扩展,这样不必在每个页面都导入requesp h r o U 2 h m qt
Vue.prototype.w d = } j grequest=request;
  • 恳u , c ~ + 5求T e B调用
this.ry p s p 9equest.get('/login',{userName:'admin',userPwi X K - $ Z x f ud:'admin'}).then((res={})=>{
//此! q Y y R _ f o s处只接收成功数据，失败数据不回来
}).catch(()=>{
//catch能够不要，假如想要捕获异常，就加上去
})

假如不做二次封装，咱们很难实现以上功用点，这是在公司做了许多个中型后台体系后I 9 k ] F D )，总结出来的一些个人经历，我信任您看了之后，会有一些启示和协助，假如有疑问或许不够完善能够留言或联系我，我进行修订。

有兴趣可关注我个人微信公众号( Y E Z B l：前端未来

axios怎么封装，才能提升效率？