时间:2021-05-25
一、axios的封装
在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。
在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余。
安装
首先我们要现在项目中安装Axios组件,这一步是一定的。
下载好了以后,就在项目的src文件里再新建两个目录,一个是http,一个是api。http目录是用来封装Axios的,api目录是用来统一来管理我们的接口的。
引入
第一步,先要在http.js里面引入axios
环境的切换
在我们开发项目的时候会有多种环境,就比如开发环境、测试环境、生产环境,使用axios.defaults.baseURL可以设置axios的默认请求地址。
设置响应超时时间
通过axios.defaults.timeout设置默认的请求超时时间。如果超出了响应时间,就会告知用户当前请求超时,请刷新等等
设置接口请求拦截
使用promise返回axios请求的结果
post :
get :
这个时候,http.js里面的就写好了。下面就要去api.js去获取api接口了。
现在是api.js中的内容
首先是要在api.js中引入刚刚封装好的axios
然后就可以根据接口文档来进行数据的获取啦
再再然后,就可以去vue页面通过生命周期来获取数据啦。
再再再注意,这里不一定一定要使用async函数,这只是其中一种方法啦
到此这篇关于详解Vue中Axios封装API接口的思路及方法的文章就介绍到这了,更多相关Vue Axios封装API接口内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
每个项目网络请求接口封装都是很重要的一块,第一次做Vue项目,我们的封装方法如下:(1).新建一个js文件,取名api.js(2).引入axios,mint-U
本文实例讲述了vue实现的请求服务器端API接口。分享给大家供大家参考,具体如下:importaxiosfrom'axios'importrouterfrom'
vue2.xaxios封装的get和post方法importaxiosfrom'axios'importqsfrom'qs'exportclassHttpSer
需求点击导出下载表格对应的excel文件在vue项目中,使用的axios,后台java提供的post接口api实现第一步,在axios请求中加入参数,表示接收的
Vue页面的代码修改头像axios接口letChangeAvatar=(img)=>axios({url:'/user/changeavatar',method