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,}//在对应的vue模板中使用.$https.http1({url:'/api/api/login',method:'post',}).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,})//直接返回returninstance(config);/*为什么可以这样写呢？因为axios本身的返回值是Promise*/}exportdefault{http1,}//使用vue组件的方法同方案2。9.Interceptor:/*拦截器分For:请求成功拦截请求失败拦截响应成功拦截响应失败拦截*///我们可以在实例中添加拦截器或者全局拦截器10.全局拦截器://请求拦截axios.interceptors.request.use((config)=>{//console.log("全局请求拦截成功");//console.log(config);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);})//注意：这个response的拦截器res的输出是这样的//这里我们可以返回res.data，得到的结果就是后台返回给我们的数据，如下：//注意：也可以在对应的请求方法中resolve(response.data)；//实现,//建议在response拦截中处理,划分request11.RequestmethodEncapsulation://globalrequestmethod////封装axiospost请求constpost=(url,params)=>{returnnewPromise((resolve,reject)=>{axios.post(url,qs.stringify(params)).then(response=>{resolve(response.data);}).catch(error=>{reject(error);});});};//封装axiosput请求constput=(url,params)=>{returnnewPromise((resolve,reject)=>{axios.put(url,params).then（响应=>{解决（响应.数据）;}）.catch（错误=>{拒绝（错误）;}）;}）;};//封装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.jscode:/*统一接口管理，在项目中有很多接口。我们在进行一些操作的时候，会在不同的文件中调用很多相同的接口。如果界面发生变化，修改界面就变得很被动，需要花费很多时间。*/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.本期的分享到此就结束了，希望对大家有所帮助，让我们共同努力，勇攀高峰。
