zoukankan      html  css  js  c++  java
  • (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)})
    }
    
  • 相关阅读:
    day21作业
    作业day20
    K8S架构图
    day20 类的继承
    课上随手记
    第一篇CEPH集群的学习
    day19 类的讲解
    Eureka工作原理
    局域网、以太网(标准以太网、工业以太网和实时以太网)与无线局域网
    无线局域网,有线局域网
  • 原文地址:https://www.cnblogs.com/wangRong-smile/p/13177073.html
Copyright © 2011-2022 走看看