<!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. 如何修改CSV文件的分隔符

    Excel转成CSV文件,在Windows下默认的列表分隔符是逗号(,).在某些情况下,我们可能需要更改列表分隔符,如某个单元格内容包含逗号,而这可能导致使用它的程序出错,这样就需要更改列表分隔符:再 ...

  2. Python——字符串2.0（实验）（python programming）

    直接打s,是程序员看到的:打print(),是用户看到的 列表 ] #列表索引,与数组唯一不同:等号左端可修改 转载自:https://www.cnblogs.com/wwwwwei/p/104816 ...

  3. 阿里云线上ROS静态路由转发，有大坑。

    原因见上去,阿里云不支持VPC中转流量,VPC1和VPC2都在国内,VPC3在香港,如果按阿里云的做法,必须付费2次国际隧道的钱,才可以实现三个VPC互通.明显很浪费钱. 所以我们只能在三个VPC,各 ...

  4. [UE4]蓝图调试

    1.蓝图下断点:选择蓝图节点按F9下断点:再按一下F9就会去掉断点. 2.游戏运行到断点会自动这暂停,鼠标移到某个变量上面,会显示该变量的值. 3.按F10执行下一步. 4.蓝图调试没有跳出函数的功能 ...

  5. POI实现导出Excel和模板导出Excel

    一.导出过程 1.用户请求导出 2.先访问数据库,查询需要导出的结果集 3.创建导出的Excel工作簿 4.遍历结果集,写入工作簿 5.将Excel已文件下载的形式回复给请求客户端 二.具体实现(截取 ...

  6. C++和C#进程之间通过命名管道通信（上）

    C++和C#进程之间通过命名管道通信(上) "命名管道"是一种简单的进程间通信(IPC)机制.命名管道可在同一台计算机的不同进程之间,或在跨越一个网络的不同计算机的不同进程之间,支 ...

  7. DOM内容操作和自定义、样式改变

    自定义 function 方法名或函数名(参数1,参数2,...) { 方法体: return返回值:(可不写) } function abc() { alert("123"); ...

  8. Echarts动态加载饼状图实例（二）

    一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div class="ui-contai ...

  9. Pyhton-Web框架之【Django】

    一.什么是web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. 对于所有的 ...

  10. suricata 关键字补充说明

    基本关键字 1.msg(对匹配到的规则的说明,第一部分约定用大写字母表示,msg始终是签名的第一个关键字) 注意:msg中必须转义以下字符: ; \ " msg :“ATTACK-RESPO ...