React 初探 [六] ajax 请求

桃扇骨 2022-11-27 00:37 153阅读 0赞

> 今天是北京下暴雨的一天，从昨天下班开始各个平台已经开始推送消息，今天有大暴雨，建议在家办公，很多公园也都关闭了，公司也说非必要可以不来公司，但是左等右等，大暴雨还是没有按时到来，为此大家都提前到了公司。下午两点天渐渐变天了，然后大雨，因此一批人冒着大雨回家了，我选择再看几节React 课程，那么现在雨是彻底停了！因此------万事不要慌！

### 前置说明 ###

1.  React 本身只关注界面，并不包含发送ajax 请求的代码
2.  前端应用需要通过ajax 请求与后台进行交互

### 常用的ajax请求库 ###

1、jQuery 比较重，如果只是为了进行ajax请求而另外引用不建议用

2、axios 轻量级 建议用

1.  封装XmlHttpRequest 对象 提交ajax 请求
2.  Promise 风格
3.  可用在浏览器端的node 服务器端

3、fetch ：原生函数，但是老版本的浏览器不支持

1.  不再使用XMLHTTPRequest 对象 提交ajax 请求
2.  为了兼容低版本浏览器，可以引入fetch.js 库

### 实践 ###

axios 和 fetch 的使用均在如下的代码里

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ajax 请求</title>
        <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.js"></script>
        <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    
    <body>
        <div id="example"></div>
        <script type="text/babel">
            /**
    需求：
    1、界面下过如下
    2、根据指定的关键字在github上搜索匹配的最受关注的库
    3、显示库名 点击链接查看库
    4、测试接口 ：https://api.github.com/search/repositories?q=r&srot=stars
    */
    /**  
    思路 创建组件 渲染组件  页面需要的数据 库名 和 库的地址 
         数据的获得需要 ajax 异步请求 ====》在钩子函数中
    */
            class MostStarRepo extends React.Component {
                state = {
                    repoName:'',
                    repoUrl :''
                }
    
                componentDidMount(){
                    // const url = 'https://api.github.com/search/repositories?q=react&srot=stars'
                    const url =`https://api.github.com/search/repositories?q=react&srot=stars`
                    // 发送异步请求
                    axios.get(url).then(res=>{
                        const result =  res.data
                        // console.log(res)
                        const {name,html_url} = result.items[0]
                        // 更新状态
                        this.setState({repoName:name,repoUrl:html_url})
                    }).catch(error=>{
                        console.log(error)
                    })
    
                    // 使用fetch 发送异步的ajax 请求
                    fetch(url).then(res=>{
                        return res.json()
                    }).then(data=>{
                        console.log(data)
                        const {name,html_url} = data.items[0]
                        // 更新状态
                        this.setState({repoName:name,repoUrl:html_url})
                    }).catch(error=>{
                        console.log(error)
                    })
                }
                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>

小结：axios 和 fetch 在请求时很像，只是在得到结果的数据处理有稍微的不同