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远程请求接口的方法,以后会用实战给大家讲解这部分知识,这里只要做到有个基本认识就可以了。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P24:React高级-Axios请求EasyMock数据

发表评论

提供最优质的资源集合

立即查看 了解详情