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>