react-ajax_react ajax catch-CSDN博客

本文链接：https://blog.csdn.net/qq_35350265/article/details/111314384

1. 为什么要用Ajax

2. 常用的Ajax请求库

3. Ajax请求实例

1. 为什么要用Ajax

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

2. 常用的Ajax请求库

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

3. Ajax请求实例

返回星标最多的GitHub

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>11_ajax</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/babel.min.js"></script>
<!-- 引入ajax包 -->
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.17.1/axios.min.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 {
    constructor (props) {
      super(props)
      this.state = {
        repoName: '',
        repoUrl: ''
      }
    }
    
    componentDidMount () {
	  //根据星标数排序
	  //使用axios发送异步ajax请求
      const url = `https://api.github.com/search/repositories?q=${this.props.searchWord}&sort=stars`
      //获取请求
      axios.get(url)
        .then(response => {
          const result = response.data
          console.log(result)
		  //得到数据
          const repo = result.items[0]
		  //更新状态
          this.setState({
            repoName: repo.name,
            repoUrl: repo.html_url
          })
        })
        .catch(error => {
          // debugger
          console.log(error)
          alert('请求失败 '+ error.message)
        })
      //根据星标数排序
	  //使用fetch发送异步ajax请求
      /*fetch(url, {method: "GET"})
        .then(response => response.json())
        .then(data => {
          console.log(data)
          if(data.message) {
            alert(`请求失败: ${data.message}`)
          } else {
			//得到数据
            const repo = data.items[0]
			//更新状态
            this.setState({
              repoName: repo.name,
              repoUrl: repo.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 searchWord="r"/>, document.getElementById('example'))
</script>
</body>
</html>