axios二次打包解决什么问题？（项目中常用）axios二次打包：就是把大部分接口的公共参数配置抽取出来，统一处理。1、代码封装，复用性高，减少代码量，降低维护难度。2.统一处理一些常规问题一劳永逸，比如http错误。3、拦截请求和响应，提前处理数据，如获取token、修改配置项等。axios基本配置-实践1）全局axios默认值axios.defaults.baseURL='https://api.example.com';axios.defaults.headers.common['Authorization']=AUTH_TOKEN;axios.defaults.headers。post['Content-Type']='application/x-www-form-urlencoded';2)Custominstancedefaultvalue//设置创建实例时配置的默认值varinstance=axios.create({baseURL:'https://api.example.com'});//实例创建后修改默认值instance.defaults.headers.common['Authorization']=AUTH_TOKEN;3)区分环境配置letenv="dev";switch(env){case'dev':axios.defaults.baseURL="http://127.0.0.1:8888";break;case'test':axios.defaults.baseURL="http://114.27.34.1:8888";break;case'pro':axios.defaults.baseURL="http://api.zhufeng.cn";break;}4）数据格式配置axios.defaults.headers['Content-Type']='application/x-www-form-urlencoded';//axios.defaults.headers.common['Content-Type']='application/x-www-form-urlencoded';//axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';axios.defaults.transformRequest=function(data,headers){letContentType=headers['Content-Type']||headers.common['Content-Type']||headers.post['Content-Type']||'application/json';if(ContentType==="application/json"){returnJSON.stringify(data);}if(ContentType==="application/x-www-form-urlencoded"){returnQs.stringify(data);}returndata;};项目实践-数据格式服务.interceptors.request.use((config)=>{//开发环境引入打包apiconfig.url=`${BASE_URL}${config.url}`;config.headers['Cache-control']='no-cache,no-store,must-revalidate,max-age=-1,private';//post请求，需要以formdata的形式向后端传递数据，需要传递一个formType为真booleanif(config.method==='post'&&config.formType====true){config.headers['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';config.data=qs.stringify(config.data);}returnconfig;},(error)=>{//DosomethingwithrequesterrorPromise.reject(error);});5)拦截器//添加请求拦截器axios.interceptors.request.use(function(config){//在发送请求之前做一些事情returnconfig;},function(error){//对请求错误做一些事情returnPromise.reject(error);});//添加一个响应拦截器axios.interceptors.response.use(function(response){//对响应数据做一些事情returnresponse;},function(error){//对响应错误做一些事情returnPromise.reject(error);});6)响应错误处理封装拦截器的作用是拦截，可以拦截请求参数和响应结果。一般在项目中主要拦截接口例程报错、网络报错、系统超时、授权认证等axios.interceptors.response。use(function(response){//将获取的响应体信息返回给returnresponse.data;},function(reason){//失败：网络，状态码（axiosfailed）letresponse=reason.response;if(response){//状态码不以2开头switch(response.status){//400参数//401/403Token//404地址//500/503服务器}}else{//network/(超时/中断请求->code:"ECONNABORTED")...if(reason&&reason.code==="ECONNABORTED"){}if(!navigator.onLine){}}returnreason;});一般的项目，所以没有问题，一套公共参数配置。其余的可以在需要时单独配置。axios配置-原理及源码1）HTTP拦截器的设计与实现对于大多数SPA应用，通常使用token进行用户认证。这就需要在认证通过后，我们需要在每次请求时携带认证信息。如果考虑统一处理response，我们的request函数会越来越大，越来越难维护。那么针对这个问题，axios为我们提供了解决方案——拦截器。Axios是一个基于Promise的HTTP客户端，HTTP协议是基于请求和响应的：所以Axios提供了请求拦截器和响应拦截器分别处理请求和响应。1）请求拦截器：这类拦截器的作用是在请求发送前统一执行某些操作，比如在请求头中添加token字段。2）响应拦截器：这类拦截器的作用是在收到服务器响应后统一执行某些操作，比如发现响应状态码为401时自动跳转到登录页面。2）二次封装配置代码：（参考）importaxiosfrom'axios';importqsfrom'qs';/**根据环境变量区分接口默认地址*/switch(process.env.NODE_ENV){case"production"：公理。defaults.baseURL="http://api.zhufengpeixun.cn";break;case"test":axios.defaults.baseURL="http://192.168.20.12:8080";break;default:axios.defaults.baseURL="http://127.0.0.1:3000";}/**设置超时时间和是否允许跨域凭据*/axios.defaults.timeout=10000;axios.defaults.withCredentials=true;/**设置请求传输数据的格式（看服务器要求什么格式）*x-www-form-urlencoded*/axios.defaults.headers['Content-Type']='application/x-www-form-urlencoded';axios.defaults。transformRequest=data=>qs.stringify(data);/**设置请求拦截器*client发送request->[请求拦截器]->server*TOKEN校验(JWT)：接收server返回的token，存入中vuex/localstorage，我们每次向服务器发送请求，都要带上token*/axios.interceptors.request.use(config=>{//carrythetokenlettoken=localStorage.getItem('token');token&&(config.headers.Authorization=token);returnconfig;},error=>{returnPromise.reject(error);});/**ResponseInterceptor*Server返回信息->[统一拦截Processing]->ClientJS获取信息*/axios.defaults.validateStatus=status=>{//自定义成功响应返回的HTTP状态码/^(2|3)\d{2}$/.test(status);};axios.interceptors.response.use(response=>{returnresponse.data;},error=>{let{response}=error;if(response){//=>服务器至少返回结果switch(response.status){case401://=>permissionbreak;case403://=>serverrefusestoexecute(tokenexpires)break;case404://=>pagenotfoundbreak;}}else{//=>服务器连结果都没有返回if(!window.navigator.onLine){//断线处理：可以跳转到断线页面return;}returnPromise.reject(error);}});exportdefaultaxios;【编者按推荐】加入互联网是一种怎样的体验？互联网程序员长大后的职业道路是什么？从源码到业务，React性能优化终极指南等了这么久，谷歌终于推出了FuchsiaOSGC详解，同事小勇看完这篇文章震惊了
