<!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>

25_ajax请求_使用fetch的更多相关文章

  1. js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术（一） LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq

    js_html_input中autocomplete="off"在chrom中失效的解决办法 分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...

  2. react项目请求数据的fetch的使用

    准备三个文件(封装请求函数),然后测试一下,能不能调用数据 第一个文件  request.js import 'whatwg-fetch'; /** * Parses the JSON returne ...

  3. 24_ajax请求_使用axios

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

  4. Fiddler无法正常抓取谷歌等浏览器的请求_解决方案

    1-先了解Fiddler工作原理: 正常情况下,fiddler是可以抓chrome的请求的. fiddler会自动给浏览器设置一个代理127.0.0.1端口8888,并且记忆浏览器的代理设置,所有的请 ...

  5. 10_常见的get和post请求_路由器_ejs服务器渲染模板引擎

    1. 常见的 get 和 post 请求有哪些? 常见的发送 get 请求方式: 在浏览器地址栏输入 url 地址访问 所有的标签默认发送的是 get 请求:如 script link img a f ...

  6. jquery发起get/post请求_或_获取html页面数据

    备注:我们经常会遇到使用jquery获取某个地址下的部分页面内容,然后替换当前页面对应内容,也就是:局部刷新功能. 当然也可以使用get/post请求获取数据,修改数据,可以参考以下JS代码: 走过的 ...

  7. C#模拟httpwebrequest请求_向服务器模拟cookie发送

    使用C#代码模拟web请求,是一种常用的方法,以前没专门整理过,这里暂时贴上自己整理的完整代码,以后再做梳理: public class MyRequest { #region 辅助方法 public ...

  8. 接口_GET请求_基于python

    1.GET请求(不带参数) # coding:utf-8 import requests r=requests.get("https://www.baidu.com") #r即为r ...

  9. iOS_网络请求_代理方式

    #pragma mark - 网络请求代理方式(异步) - (IBAction)DelegateButtonDidClicked:(UIButton *)sender { // 1.拼接 urlStr ...

随机推荐

  1. 【原创】Docker实战 Dockerfile最佳实践&&容器之间通信

    官方最佳实践文档 https://docs.docker.com/develop/develop-images/dockerfile_best-practices/#from Docker实战(三十) ...

  2. ubuntu 间简单相互通信

    1.  nc  命令 在一台机器上运行nc -l 来监听本机的2222号端口 另外一台机器就能连接到这台监听的机器上,假设上面那台机器的ip是192. nc 之后就能互相发送字符了 2. iptux通 ...

  3. 简单的单进程FTP服务器的实现

    一.功能说明: 1.本程序基于socket实现客户端与服务器端的单进程交互 2.用到的用户名:whw,密码abc123——服务器端密码的验证利用hashlib模块进行MD5的编码以确保通信安全. 3. ...

  4. [UE4]在当前角色正前方2米处生成一个Actor

  5. [UE4]捡枪

    一.给角色添加碰撞胶囊体并添加On Component Begin Overlap事件 二.检查碰到的东西是不是武器 三.要捡的武器是否已经有主人.检查身上是否有同样类型的枪 五.把枪放到背包数组.关 ...

  6. ES6核心内容讲解

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  7. Linux程序的执行

    一.多任务协调机制 $ find /boot | cpio -ocB > /tmp/boot.img 程序执行方式——流式处理 “|”是匿名管道 管道分匿名管道,命名管道.匿名管道属于临时工,随 ...

  8. 表单（同步提交）和AJAX（异步提交）示范

    表单提交(同步提交) HTML文件: PHP文件: 这样就能接收到HTML里输入的内容,注意: FORM表头method为POST,PHP文件获取的方法就是$_POST,method为GET,PHP的 ...

  9. lambda详解

    1:lambda表示方法 auto lambda = [](){}; lambda(); sizeof(lambda) = 1; 等价于类 class lambda{ pulic operator() ...

  10. JPA查询

    Pojo: UserDetails EntityManager: entityManager 1. Ceate Criteria CriteriaBuilder builder = entityMan ...