react--学习笔记10（ajax请求使用axios）

Dear 丶 2022-11-29 05:48 188阅读 0赞

### ajax请求使用axios: ###

### **1. 前置说明** ###

1.  React本身只关注于界面, 并不包含发送ajax请求的代码
2.  前端应用需要通过ajax请求与后台进行交互(json数据)
3.  react应用中需要集成第三方ajax库(或自己封装)

### **2. 常用的ajax请求库** ###

1.  jQuery: 比较重, 如果需要另外引入不建议使用
2.  axios: 轻量级, 建议使用
    
    1.  封装XmlHttpRequest对象的ajax
    2.   promise风格
    3.  可以用在浏览器端和node服务器端
3.  fetch: 原生函数, 但老版本浏览器不支持
    
    1.  不再使用XmlHttpRequest对象提交ajax请求
    2.  为了兼容低版本的浏览器, 可以引入兼容库fetch.js

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="example"></div>
    		<script type="text/javascript" src="js/react.development.js"></script>
    		<script type="text/javascript" src="js/react-dom.development.js"></script>
    		<script type="text/javascript" src="js/prop-types.js"></script>
    		<script type="text/javascript" src="js/babel.min.js"></script>
    		<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.js"></script>
    		<script type="text/babel">
    		
    		/**需求:
      		1. 界面效果如下
      		2. 根据指定的关键字在github上搜索匹配的最受关注的库
      		3. 显示库名, 点击链接查看库
    		4. 测试接口: https://api.github.com/search/repositories?q=r&sort=stars**/
    		
    		class MostStarRepo extends React.Component{
    			state={
    				repoName:'',
    				repoUrl:''
    			}
    			componentDidMount(){
    				//使用axios发送异步的ajax请求
    				const url = `https://api.github.com/search/repositories?q=r&sort=stars`
    				axios.get(url)
    				.then(response=>{
    				const result =response.data
    				//得到数据
    				const {name, html_url} =result.items[0]
    				//更新状态
    				this.setState({repoName:name,repoUrl:html_url})
    				})
    			}
    			render() {
    				const {repoName, repoUrl} =this.state
    				if(!repoName){
    					return <h2>LOADING.......</h2>
    				}else{
    					return<h2>Most star repo is <a href={repoUrl}>{repoName}</a></h2>
    				}
    				
    			}
    		}
    		ReactDOM.render(<MostStarRepo />,document.getElementById('example'))
    		</script>
    	</body>
    </html>

![20200819215043426.gif][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="example"></div>
    		<script type="text/javascript" src="js/react.development.js"></script>
    		<script type="text/javascript" src="js/react-dom.development.js"></script>
    		<script type="text/javascript" src="js/prop-types.js"></script>
    		<script type="text/javascript" src="js/babel.min.js"></script>
    		<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.js"></script>
    		<script type="text/babel">
    		
    		/**需求:
      		1. 界面效果如下
      		2. 根据指定的关键字在github上搜索匹配的最受关注的库
      		3. 显示库名, 点击链接查看库
    		4. 测试接口: https://api.github.com/search/repositories?q=r&sort=stars**/
    		
    		class MostStarRepo extends React.Component{
    			state={
    				repoName:'',
    				repoUrl:''
    			}
    			componentDidMount(){
    				//使用axios发送异步的ajax请求
    				const url = `https://api.github.com/search/repositories?q=re&sort=stars`
    				axios.get(url)
    				.then(response=>{
    				const result = response.data
    				//得到数据
    				const {name, html_url} =result.items[0]
    				//更新状态
    				this.setState({repoName:name,repoUrl:html_url})
    				})
    				.catch((error)=>{
    					alert(error.message)
    				})
    
                  //使用fetch发送异步的ajax请求
    //            fetch(url)
    //            .then(response =>{
    //            	return response.json()
    //            })
    //            .then(data =>{
    //              //得到数据
    //				const {name, html_url} =data.items[0]
    //				//更新状态
    //				this.setState({repoName:name,repoUrl:html_url})	
    //            })
    
    			}
    			render() {
    				const {repoName, repoUrl} =this.state
    				if(!repoName){
    					return <h2>LOADING.......</h2>
    				}else{
    					return<h2>Most star repo is <a href={repoUrl}>{repoName}</a></h2>
    				}
    				
    			}
    		}
    		ReactDOM.render(<MostStarRepo />,document.getElementById('example'))
    		</script>
    	</body>
    </html>

[20200819215043426.gif]: /images/20221124/80d6c275f71c47ebac582e70a1fefbdb.png