25_ajax请求_使用fetch

程序员福跃技术 2022年11月19日

0 收藏 755 点赞 2,327 浏览 1465 个字

<!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.19.0-beta.1/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: ''        }        //在这里发送异步ajax请求        componentDidMount() {            //1.使用axios发送            const url = `https://api.github.com/search/repositories?q=r&sort=stars`;            //因为是promise风格的，所以后面可以使用.then()            axios.get(url).then(response => {                //数据就在response里面                const result = response.data                //使用解构得到想要的数据                const {name, html_url} = result.items[0];                //更新状态                this.setState({repoName: name, repoUrl: html_url})            }).catch((error) => {                alert(error.message)            })            //2.使用fetch发送异步ajax请求            /*fetch(url).then(response => {                return response.json()//response.json()实际上是一个promise对象            }).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>