在实际项目中，与后台的数据交互是必不可少的。我平时用的都是axios库，所以下面的例子也是基于axios封装的。如果你对axios不了解，请看这里的axios文档1.安装首先是npm。安装axios很简单：npminstallaxios2.没有封装的问题如果你在一个没有封装接口的项目中，你可以看到文件中到处都是这样的接口调用方法：this.$axios.post("/user/add",{params:{name:this.name,age:this.age}}).then(res=>{console.log(res)}).then(err=>{console.log(err)})不是不可以这样写，但是有一些缺陷。接口请求的url分散在各个文件中。如果需要在接口调用成功或失败时做一些处理，则需要对每个文件进行更改。因此，这些接口请求是统一的、集中的。如果有调整，直接在集中文件中查找修改即可，不用逐个文件检查。3、创建文件首先在项目的src目录下，新建文件夹和文件目录结构如下：├──src源代码目录│├──apis接口文件目录││├──login.api.js登录模块接口api││└──user.api.js用户模块接口api│├──服务请求相关文件目录││├──address.js请求地址配置文件││└──request.jsaxiospackage,requestinterception,responsecode处理等操作的api接口文件模块的划分可以根据你的实际项目按照业务功能或者业务逻辑或者其他形式来划分。4、请求地址配置一般我们项目中会有多个项目环境，少的话会有开发环境和生产环境。一般情况下，开发环境和生产模式会有不同的baseURL，所以我们需要根据不同的环境切换不同的baseURL。address.jsfile://根据process.env.NODE_ENV在不同的baseURL之间切换constisPro=process.env.NODE_ENV==='production'module.exports={//'apis':在vue.config中由代理设置.js代理baseURL:isPro?'http://192.168.100.120/ceds':'/apis'}5.axios配置（设置请求头、响应码处理）的大致思路是封装一个请求类，里面包含get、post等request方法，这些请求方法会调用request方法，调用传入不同参数的原始axios请求，然后返回一个Promise。request.js文件：importaxiosfrom'axios'importQsfrom'qs'importVuefrom'vue'import{getToken}from'@Utils/session.utils'//storeandgettokenfileimportaddressfrom'./address'//请求地址classRequest{constructor(){//创建一个axios实例this._axios=axios.create({baseURL:address.baseURL,timeout:1000*5,//请求超时headers:{}})//请求拦截this._axios.interceptors.request.use(config=>{constrequestHeader={'X-Requested-With':'XMLHttpRequest','Content-Type':'application/json;charset=UTF-8','Access-Control-Allow-Origin':'*',token:getToken()//统一在请求头添加token}config.headers=Object.assign(config.headers,requestHeader)returnconfig},error=>{承诺.reject(错误)})}//根据请求方式，判断参数是放在query还是body//最直观的区别，比如GET请求是在url中包含参数，而POST是通过请求body把参数放在body中，所以在提交的时候参数的形式是有区别的//下面列出四种你可以自行调整常用请求方式的参数形式/***发送get请求*@param{String}url地址*@param{Object}query查询参数*@returnjson数据*/get(url,query={}){returnthis._request('get')(url,{...query})}/***发送post请求*@param{String}url地址*@param{Object}body查询参数*@返回json数据*/post(url,body={},headers){让数据if(this.isFormData(body)){data=body}elseif(Array.isArray(body)){data=body}else{data={...body}}returnthis._request('post')(url,headers)(url,data)}put(url,body={}){returnthis._request('put')(url,{...body})}delete(url,body={}){returnthis._request('delete')(url,{...body})}是FormData=v=>{returnObject.prototype.toString.call(v)==='[objectFormData]'}/***设置请求头*@param{Object}header请求头*/setHeaders(header){Object.keys(header).forEach(key=>{this._axios.defaults.headers[key]=header[key]})}//处理请求头handleHeaders(){constheaders={}headers['XMIME-TYPE']='3'Headers['Content-Type']='application/json;charset=UTF-8'returnheaders}/***sendrequest*@param{String}method请求方法类型*@paramheaders*@returns{function(*=,*=):Promise
