今天打算和大家聊一聊API打包。比如我们在使用VUE展示流媒体服务器框架时，几乎都会对API进行封装。不要小看它。这个封装步骤可能会给我们后期带来很大的方便。封装一方面是为了让代码更加规范，另一方面也是方便后期的调整。这篇文章就讲讲vue封装API接口的过程。1.本文使用axios请求，首先在require中配置服务器请求拦截，并添加token，本文模拟token添加1111，域名使用的本地域名，需要自己配置，token可以使用cookies。importaxiosfrom'axios'//创建一个axios对象letservice=axios.create({baseURL:'http://127.0.0.1:3001',//请求接口的域名timeout:9000//请求超时})//添加请求拦截器，service.interceptors.request.use(request=>{//设置请求的头部信息request.headers={token:`1111`,//请求添加的token'Content-Type':'application/json;charset=utf-8'}returnrequest},error=>{Promise.reject(error)})//添加响应拦截器service.interceptors.response.use(response=>{returnresponse.data},error=>{Promise.reject(error)})exportdefaultservice2，创建一个接口文件，把接口统一放到这个js里面，用的时候直接拿，合理使用封装模块//All接口地址exportdefault{exhibitionHotUrl:'/api/exhibition/list',}3、封装api，使用直接访问apirequestimportrequsetfrom'../utils/request'importapiUrlfrom'../utils/apiUrl'//获取数据exportconstgetExhibitionList=params=>{returnrequset({url:apiUrl.exhibitionHotUrl,method:'get',params})}}4、最终页面可以使用//getimport{getExhibitionList}from'../../api/index'getExhibitionHotList=async()=>{//awaitcallsconstresult=awaitgetExhibitionList({你可以在这里写需要传递的参数})if(result.code===200){this.setState({//数据赋值成功exhibitionList:result.data.list})}}api接口封装基本完成
