(2). axios请求EasyMock
在开发中都是前后端分离的,我们也需要自己模拟数据,通常把自己模拟数据这个过程就叫做mock,你可以用软件自己本地模拟数据,但是作为一个云注意者,我还是选择使用Easy-mock来模拟接口数据。
EasyMock新建一个接口
EasyMock网站:https://www.easy-mock.com/
在创建接口时,写下如下代码:
{
  "data": ['基础按摩', '躺式采耳', '中药泡脚']
}
把请求改为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)})
}
 
                    
                
 
                
            
         浙公网安备 33010602011771号
浙公网安备 33010602011771号