①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>