react学习笔记--使用axios和fetch（实现Ajax）

最新推荐文章于 2022-03-15 19:42:33 发布

家里有蜘蛛

最新推荐文章于 2022-03-15 19:42:33 发布

阅读量487

点赞数 2

分类专栏： # React学习笔记

本文链接：https://blog.csdn.net/qq_44983621/article/details/101230485

版权

React学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

react学习笔记–使用axios和fetch

这个案例是再github上查询到star数量最多的指定的repository。
在这里插入图片描述
在代码中是直接使用的bootcdn中的axios在线链接，实际使用应下载下来。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="example"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

    <script type="text/babel">
        class MostStarRepo extends React.Component {
            state = {
                repName: '',
                repUrl: ''
            }
            componentDidMount() {
                //发送异步请求
                const url =  `https://api.github.com/search/repositories?q=js&sort=stars`;

                axios.get(url).then(response => {
                  const result =  response.data;
                  console.log(result);
                  //选择第一条就是星星最多的
                  const {name,html_url} =  result.items[0];
                  this.setState({repName:name,repUrl: html_url});
                  
                })
                .catch((error) => {
                    alert(error.message);
                })
                /*fetch
                    fetch(url).then(response => {
                        return response.json()
                    }).then(data => {
                        const {name,html_url} =  data.items[0];
                        this.setState({repName:name,repUrl: html_url});
                     }) */
            }

            render() {
                const {repName,repUrl} = this.state;
                if(!repName){
                    return <h2>LOADING...</h2>
                }else{
                    return <h2>Most star repo is <a href={repUrl}>{repName}</a></h2>
                }
            }
        }
        ReactDOM.render(<MostStarRepo/>,document.getElementById('example'));
    </script>
</body>

</html>

家里有蜘蛛

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react学习笔记--使用axios和fetch（实现Ajax）

react学习笔记–使用axios和fetch这个案例是再github上查询到star数量最多的指定的repository。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width...
复制链接

扫一扫

专栏目录