• 13 React axios


    需求:页面中没有显示信息时,显示 Loading....,

       当获取到 用户信息后,显示   xxx (username) 的邮箱是:xxx( email )

      测试接口:http://jsonplaceholder.typicode.com/users

    第一步,定义组件并渲染组件标签,

    第二步,使用 axious 库 请求数据

    注意需要引入 axious 库

    效果如下:

    页面刚加载时:

    渲染请求到的数据时:

     完整代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>Document</title>
     7     <script src="../js/react.development.js"></script>
     8     <script src="../js/react-dom.development.js"></script>
     9     <script src="../js/babel.min.js"></script>
    10     <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>
    11 </head>
    12 <body>
    13     <div id="test"></div>
    14 
    15     <script type="text/babel">
    16         class PersonInfo extends React.Component {
    17             state={
    18               usrname:'',
    19               email:''
    20             }
    21 
    22             componentDidMount(){
    23                 const url="http://jsonplaceholder.typicode.com/users";
    24                 axios.get(url)
    25                     .then(response=>{
    26                         console.log(response);
    27                         const result=response.data[0];
    28                         this.setState({
    29                             username:result.username,
    30                             email:result.email
    31                         })
    32                     })
    33                     .catch(error=>{
    34                         console.log("请求数据失败  "+ error);
    35                     })
    36             }
    37 
    38             render(){
    39                 const {username,email}=this.state;
    40                 if(username){
    41                      return (  <h1>{username}的邮箱是:{email}</h1> )
    42                 }
    43                 else{
    44                      return ( <h1>Loading...</h1> )
    45                 }
    46             }
    47         }
    48         ReactDOM.render(<PersonInfo/>,document.getElementById("test"));
    49     </script>
    50 </body>
    51 </html>
  • 相关阅读:
    制作USB系统盘
    01Mysql 配置方法
    Tec_010_怎样看K线图
    回顾5年内的央行加息历史
    推荐:微软下一代操作系统Windows 7版本详解
    关于USB启动盘制作
    Delphi Program test
    圣诞节 玩具
    敏捷宣言
    [转 TDD] 如何坚持TDD:使用者出现的问题以及解决方案
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/12495400.html
Copyright © 2020-2023  润新知