14 react fetch

①get 方式

 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             componentDidMount(){
18                 const url="http://jsonplaceholder.typicode.com/users";
19                 //get请求
20                 fetch(url)
21                     .then(response=>{
22                         console.log(response);
23                         return response.json();
24                     })
25                     .then(data=>{
26                         console.log(data);
27                     })
28                     .catch(error=>{
29                         console.log(error);
30                     })
31             }
32 
33             render(){
34                 return( <h1>fetch方式的get请求获取数据</h1>)
35             }
36         }
37 
38         ReactDOM.render(<PersonInfo/>,document.getElementById("test"));
39     </script>
40 </body>
41 </html>

②post 方式

 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             componentDidMount(){
18                 const url="http://jsonplaceholder.typicode.com/users";
19                 //post请求
20                 fetch(url,{
21                     method:"POST",
22                 })
23                 .then(response=>{
24                     console.log(response);
25                 })
26                 .then(data=>{
27                     console.log(data); //undefined
28                 })
29                 .catch(error=>{
30                     console.log(error);
31                 })
32             }
33 
34             render(){
35                 return( <h1>fetch方式的post请求获取数据</h1>)
36             }
37         }
38 
39         ReactDOM.render(<PersonInfo/>,document.getElementById("test"));
40     </script>
41 </body>
42 </html>