从0到1使用VUE-CLI3开发实践（四）：axios包看完本系列前几篇文章后，很多同学建议我暂时不用TS，所以小四将TS换成JS继续下面的文章。今天给大家带来项目中非常重要的一个部分，配置axios，一起来看看吧。axios简介首先要了解axios是什么：axios是基于promises（承诺）的浏览器，node.js是一个http客户端。axios的作用是什么：axios主要是用来向后台发起请求，在请求中做更多的事情是一个可控的功能。从浏览器创建XMLHttpRequest从node.js发送http请求支持PromiseAPI拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止CSRF/XSRF项目配置首先当然你需要安装：npminstallaxios然后我们新建一个api文件夹来放接口和axios配置。下面给大家看一下我配置好后的文件夹目录结构：这个配置可以说是我分的比较详细的配置方法。具体每个文件的用途是什么，我们现在就来看看吧。axios.js文件主要是创建axios实例，配置拦截器。不懂拦截器的同学可以看下图：importaxiosfrom'axios'//创建axios实例letservice=axios.create({//headers:{'Content-Type':'application/json'},timeout:60000})//设置post,putdefaultContent-Typeservice.defaults.headers.post['Content-Type']='application/json'service.defaults.headers.put['Content-Type']='application/json'//添加请求拦截器service.interceptors.request.use((config)=>{if(config.method==='post'||config.method==='put'){//post和put提交时，将对象转成字符串，以应对Java后台解析问题config.data=JSON.stringify(config.data)}//请求发送前处理返回config},(error)=>{//请求错误处理returnPromise.reject(error)})//添加响应拦截器service.interceptors.response.use((response)=>{let{data}=response返回数据},(error)=>{letinfo={},{status,statusText,data}=error.responseif(!error.response){info={code:5000,msg:'网络错误'}}else{//这里格式化错误信息info={code:status,data:data,msg:statusText}}})/***创建一个统一封装的axios实例*@return{AxiosInstance}*/exportdefaultfunction(){returnservice}index.jsindex.js文件主要封装了几个我们常用的方法，get,post,put,deleteimportaxiosfrom'./axios'letinstance=axios()exportdefault{get(url,params,headers){letoptions={}if(params){options.params=params}如果（标题）{选项。headers=headers}返回实例。get(url,options)},post(url,params,headers,data){letoptions={}if(params){options.params=params}if(headers){options.headers=headers}返回instance.post(url,data,options)},put(url,params,headers){letoptions={}if(headers){选项。headers=headers}返回实例。put(url,params,options)},delete(url,params,headers){letoptions={}if(params){options.params=params}if(headers){options.headers=headers}returninstance.delete(url,options)}}install.jsinstall.js文件可以全局安装我们所有的api接口，然后我们只需在main.js文件中导入它importapiListfrom'./apiList'constinstall=function(Vue){if(install.installed){returninstall.installed=trueObject.defineProperties(Vue.prototype,{$api:{get(){returnapiList}}})}exportdefault{install}在main.js中添加：importapifrom'./api/install'Vue.use(api)apiList.js把我们所有的api文件夹导入进去这个文件。importmatchesfrom'./matches'importuserfrom'./user'exportdefault{matches,user}baseUrl.js根据不同的环境设置不同的baseUrls。在配置这个文件之前，我们需要先做以下事情：1.在根目录下新建一个.env.dev文件，在文件中写入NODE_ENV='dev'2.在package.json文件中添加："build:dev":"vue-cli-servicebuild--modedev","build:pre":"vue-cli-servicebuild--modepre",下面是baseUrl.js的代码：letbaseUrl='/api'//本地代理开关(process.env.NODE_ENV){case'dev':baseUrl='http://testserver.feleti.cn/'//测试环境urlbreakcase'pre':baseUrl='https://pre-server.feleti.cn'//预启动环境urlbreakcase'production':baseUrl='https://api.feleti.cn'//生产环境urlbreak}exportdefaultbaseUrlmatches和user文件夹是根据api的类型来区分的。项目后也推荐给大家根据api的类型划分不同的文件存储。在小项目中这样做可能比较麻烦，但是如果项目比较大，这样做的优势就会体现出来。我们只看matches文件夹的内容：urls.js把一个类型的所有url接口都放到这个文件里。我暂时只放了一个，大家可以继续加。importbaseUrlfrom'../baseUrl'exportdefault{matches:baseUrl+'/matches'}index.js部分接口需要在header中添加token或其他，可以配置如下。importapifrom'../index'importurlsfrom'./urls'constheader={}exportdefault{matches(params){//返回一个promisereturnapi.get(urls.matches,params,header)}}配置完以上所有文件后，你就大功告成了。让我们看看如何使用它。在组件中调用created(){this.matches()},methods:{asyncmatches(){//这里包裹了一个trycatch，当请求失败时，会执行catch中的try{//定义参数对象letparams={type:'zc'}letres=awaitthis.$api.matches.matches(params)console.log('getMatches->res',res)}catch(e){console.log('catch->e',e)}}}之后可以在控制台看到我们调用成功的输出日志：在项目开始之前。今天涉及到的很多文件在后续的配置中都会有渐进式的变化，比如配置用户相关的接口，配置全局加载等，只要能充分理解今天的内容，后面配置到这里就很容易了。预读：使用vue-cli3从0到1制作全功能手机站（一）开发实用手机站从0到1（二）：git提交规范配置从0到1使用VUE-CLI3开发实战（三）：ES6知识储备
