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数据的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。