P24:React高级-Axios请求EasyMock数据
目录
上节课只是小试身手,用了一个掘金的临时接口,这个接口并不是自己写的,没准什么时候就不能使用了。在开发中都是前后端分离的,我们也需要自己模拟数据,通常把自己模拟数据这个过程就叫做mock
,你可以用软件自己本地模拟数据,但是作为一个云注意者,我还是选择使用Easy-mock
来模拟接口数据。
EasyMock 新建一个接口
EasyMock 网站:easy-mock
然后你没注册需要注册一下,这个过程我相信大家都会,这里不做过多讲解。
在创建接口时,写下如下代码:
{ "data": ['基础按摩', '躺式采耳', '中药泡脚'] }
然后在上节课的 Axios 代码部分,把请求改为get
,然后预览,到控制台查看结果。
componentDidMount(){ axios.get('改为你自己的接口 URL') .then((res)=>{console.log('axios 获取数据成功:'+JSON.stringify(res)) }) .catch((error)=>{console.log('axios 获取数据失败'+error)}) }
这时候你应该可以获得接口数据了,也说明我们的接口制作正常了,这就很类似我们项目中的真实接口了。
修改程序 变为动态接口
在客户端已经得到了远程数据,那剩下的就是setState
一下就可以了,代码如下:
componentDidMount(){ axios.get('xxxx') .then((res)=>{ console.log('axios 获取数据成功:'+JSON.stringify(res)) this.setState({ list:res.data.data }) }) .catch((error)=>{console.log('axios 获取数据失败'+error)}) }
那这时候再浏览 React 程序,也是完全可以使用的,不过已经不是以前写死的东西,而是使用远端接口数据。
总结
我们这两节课只是让你简单的学会 React 远程请求接口的方法,以后会用实战给大家讲解这部分知识,这里只要做到有个基本认识就可以了。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P24:React高级-Axios请求EasyMock数据
码云笔记 » P24:React高级-Axios请求EasyMock数据