13 React axios

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

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

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

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

13 React  axios

 

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

注意需要引入 axious 库

13 React  axios

效果如下:

页面刚加载时:

13 React  axios

渲染请求到的数据时:

13 React  axios

 完整代码:

 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>

 

13 React axios

上一篇:Android Studio点击按钮实现页面跳转、网页跳转


下一篇:axios