1.开发环境vuecli42。电脑系统winodws10专业版3.开发过程中，我们会索取资料。我使用公理。下面分享一下我自己的打包配置。希望对你有帮助。4、废话不多说，直接进入操作：//installnpmiaxios--save5、在src目录下创建文件夹network（意为network）。目录结构如下：文件目录说明：api:统一管理接口https:axios请求封装6、第一版https.js问价代码如下：importaxiosfrom'axios'importqsfrom"qs"/*一般使用全局配置。这里我使用创建实例的方法。优点：当接口不在服务器上时，我们可以使用这种创建实例的方式，方便管理和使用*/////第一种写法consthttp1=(config,success,failure)=>{constinstance=axios.create({//baseURL:'http://192.168.1.115:3000',timeout:5000,})instance(config).then(res=>{//console.log(res);成功（资源）；}）。catch(err=>{//console.log(err);failure(err);})}exportdefault{http1,}//在对应的vue模板api中使用this.$https.http1({url:'//api/login',方法:'post',},(res)=>{console.log('请求成功');console.log(res);});7.https.js第二版问价格代码如下：importaxiosfrom'axios'importqsfrom"qs"/*一般使用全局配置。这里我使用创建实例的方法。优点：当接口不在服务器上时，我们可以通过该方法创建实例方法，方便管理和使用*/////第二种写法consthttp1=(config)=>{returnnewPromise((resolve,reject)=>{constinstance=axios.create({//baseURL:'http://192.168.1.115:3000',timeout:5000,})instance(config).then(res=>{resolve(res);}).catch(err=>{reject(err);})})}exportdefault{http1,}//使用this.$https.http1({url:'/api/api/login',method:'postinthecorrespondingvuetemplate',}).then((res)=>{console.log('请求成功');console.log(res);});8、第三版https.js要价代码如下：importaxiosfrom'axios'importqsfrom"qs"/*一般使用全局配置。这里我使用创建实例的方法。优点：当接口不在服务器上时，我们可以使用这种创建实例的方式，方便管理和使用*/////第二种写法consthttp1=(config)=>{constinstance=axios.create({//baseURL:'http://192.168.1.115:3000',timeout:5000,})//直接returnreturninstance(config);/*为什么可以这样写呢？因为axios本身的返回值是Promise*/}exportdefault{http1,}//使用vue组件的方法同方案二9.拦截器：/*拦截器分为：请求成功拦截请求失败interceptionresponsesuccessinterceptionresponsefailureinterception*///我们可以给实例添加拦截器或者全局拦截器10.全局拦截器://请求拦截axios.interceptors.request.use((config)=>{//console.log("全局请求拦截成功");//console.log(con如图）;returnconfig;},(err)=>{//console.log("全局拦截失败");console.log(err);})//响应拦截:axios.interceptors.response.use((res)=>{//响应拦截成功console.log("响应拦截成功");console.log(res);//console.log(res.data);returnres;//注意：这里返回（期望数据）},(err)=>{console.log("Responseinterceptionfailed");console.log(err);})//注意：这个响应的拦截器res的输出是这样的//这里我们可以返回res.data，结果就是后台返回给我们的数据，如下：//注意：你也可以在对应的请求方法中resolve(response.data)；//实现,//建议在response拦截中处理，分请求11.请求方法封装://全局请求方法////封装axios的post请求constpost=(url,params)=>{returnnewPromise((resolve,reject)=>{axios.post(url,qs.stringify(params)).then(response=>{resolve(response.data);}).catch(error=>{reject(error);});});};//封装axios的put请求constput=(url,params)=>{returnnewPromise((resolve,reject)=>{axios.put(url,params).then(响应=>{解析(响应.数据);}).catch(error=>{reject(error);});});};//封装axios的删除请求constdel=(url,params)=>{returnnewPromise((resolve,reject)=>{axios.delete(url,params).then(response=>{resolve(response.data);}).catch(error=>{reject(error);});});};constget=(url,query)=>{returnaxios.get(url,query);};const$axios={post:post,get:get,put:put,delete:del};//实例请求方法可以写在例子中，方法同12.api.js代码：/*统一接口管理，项目中有很多接口，我们在进行一些操作的时候，会在不同的地方调用很多相同的接口文件，如果界面发生变化，修改界面就变得很被动，而且会消耗很多时间*/importhttpsfrom'@/network/https.js';//实例方法调用//exportdefaultfunctionclogin(){//returnhttps.http1().post('/api/api/login');//}//letclogin=()=>{//returnhttps.http1().post('/api/api/login');//}letclogin=()=>{returnhttps.$axios.post('/api/api/login');}export{clogin}13.在对应的vue模板中使用：import{clogin}from'../network/api.js';//import{clogin}from'@/network/api.js';//使用clogin().then((res)=>{console.log('请求成功');console.log(res);}).catch((err)=>{console.log('请求失败');console.log(err);});14.获取请求参数：letaa={a:'222',b:'999',};clogin({params:aa}).then((res)=>{console.log('请求成功');console.log(res);}).catch((err)=>{console.log('请求失败');console.log(err);});15、post请求参数：letaa={a:'222',b:'999',};clogin(aa).then((res)=>{console.log('请求成功');console.log(res);}).catch((err)=>{console.log('请求成功失败');console.log(err);});16.本期的分享到此就结束了，希望对大家有所帮助，让我们共同努力，勇攀高峰。
