首先需要有两个概念：请求成功和请求失败。请求成功后，获取结果的成功与失败。由于工作中有大量的网络请求数据，我们需要对网络请求进行封装。准备工作：在src文件夹下创建一个utils文件，在utils文件夹下创建一个request.js文件，然后上传代码//封装网络请求import$axiosfrom"axios"importqsfrom"query-string"//错误信息的响应方式consterrorHandle=(status,other)=>{switch(status){case400://请求头和服务器限制console.log("服务器不理解请求的语法");休息;case401://token校验失败，用户认证失败console.log("(Unauthorized)Therequestrequiresauthentication");休息;case403://用户身份已过期，服务器请求被限制console.log("(Forbidden)Theserverrejectedtherequest");休息;case404://网络请求地址错误console.log("(notfound)服务器找不到请求的网页。");休息;默认值：console.log（其他）；休息;}}//创建一个axios对象constinstance=$axios.create({timeout:5000//请求超时})//全局配置instance.defaults.baseURL='http://iwenwiki.com';//instance.defaults.headers.common['Authorization']=AUTH_TOKEN;instance.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';//创建请求拦截和响应拦截操作instance.interceptors.request.use(config=>{//配置if(config.method==='post'){config.data=qs.stringify(config.data);}returnconfig;},error=>Promise.reject(error))instance.interceptors.response.use(//成功/***成功与失败的判断：*1.请求成功与请求失败*2.请求成功：结果成功与结果失败*/response=>response.status===200?Promise.resolve(response):Promise.reject(response),error=>{const{response}=error;//ES6解构赋值/***response中包含的信息：*status*data*///if(response){////给开发者特定的错误信息////errorHandle(response.status,r响应.数据）；//返回Promise.reject(response);//}else{//console.log("请求中断或网络断开");//}if(error){errorHandle(error.status,error.data);返回Promise.reject（错误）；}else{console.log('请求中断或断开网络');}})导出默认实例；在src文件夹下创建api文件夹，在api文件夹下创建base.js（存储所有请求路径）constbase={baseURL:"http://xxx",xx:"xxx"}exportdefaultbase;在api文件夹下创建index.js（统一处理请求方法）import$axiosfrom'../utils/request'importbasefrom'./base'constapi={xxfunction(){//return$axios.get|post(base.baseURL+base.xx)返回$axios。get|post(base.baseURL+base.xx,{params})}}导出默认api；组件引入并使用importapifrom'../xxx;api.xxfunction(withoutparameters|withparameters).then()...或者全局挂载apiimportapifrom'../xxx';Vue.prototype.$api=api;this.$api.get|post(请求)
