react_ajax

最新推荐文章于 2024-09-03 19:00:00 发布

weixin_44337220

最新推荐文章于 2024-09-03 19:00:00 发布

阅读量58

点赞数

本文链接：https://blog.csdn.net/weixin_44337220/article/details/103883205

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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/babel.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.17.1/axios.js"></script>
<script type="text/babel">
/*
* 需求：
* 1.界面效果如下
* 2.根据指定的关键字在github上搜索匹配的最受关注的库
* 3.显示库名，点击链接查看库
* 4.测试接口：http://aqi.github.com/search/repositories?q=r&sort=stars
*
* */

//promiseduixiang ?????????????
class MostStarRepo extends React.Component{

    state={
        repoName:'',
        repoUrl:''
    }

    componentDidMount(){
        //使用发送异步ajax请求
        const url=`https://api.github.com/search/repositories?q=r&sort=stars`
        axios.get(url).then(response => {
            const result=response.data
            console.log(result)
            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()
    //     })
    //         //data等于上面的result
    //         .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>