<!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. Consul实践指导-DNS接口

    DNS是consul提供的主要查询接口之一.DNS接口允许应用程序在没有与consul高度集成的情况下使用服务发现. 例如:替代consul的HTTP API请求,主机能够通过名字查找直接使用DNS服 ...

  2. 为帮助保护你的安全，您的Web浏览器已经限制此文件显示可能访问您的计算机的活动内容

    在开发时,会遇到是要HTML来做UI,是要js与C++进行交互. 在加载完页面后,一些电脑中会出现“为帮助保护你的安全,您的Web浏览器已经限制此文件显示可能访问您的计算机的活动内容”(用IE打开,自 ...

  3. Python工程化小结

    对如何写一个工业级的Python项目作一个top-down小结. 一.项目结构 顶层结构: 文件夹: model可以是项目中的自定义类: utils是一些工程工具,比如log,tracker log存 ...

  4. 使用Dotfuscator混淆你的.net程序

    简介 众所周知C#等net框架的程序是无法防止反编译的,但可以通过混淆,让反编译出来的代码非常难看. Dotfuscator是微软推荐使用的第三方混淆器,用来保护你的net程序.可以在安装VS的时候顺 ...

  5. Github上关于iOS的各种开源项目集合2（强烈建议大家收藏，查看，总有一款你需要）

    资源list:Github上关于大数据的开源项目.论文等合集 Awesome Big Data A curated list of awesome big data frameworks, resou ...

  6. Device supprts x86,armeabi-v7a,but APK only aupports armeabi；模拟机不能运行。

    在真机可以运行,模拟机却不可以: 这个是模拟机: 修改: defaultConfig { ndk{ abiFilters "armeabi" } } 为: defaultConfi ...

  7. 内存大小设置 Java heap space错误

    1. 问题描述 当从数据库中查询大量的数据,每个模板取出来几百万条数据,或者是频繁的刷新项目.模板时就会占用Java虚拟机JVM的大量内存,超过内存就会出现报java.lang.OutOfMemory ...

  8. 删除n天前的所有目录和文件

    删除目录 find /your_dir/ -maxdepth -type d -mtime + -exec rm -rf {} \; 删除文件 find /目录/ -mtime + -name &qu ...

  9. 关于js中的时间——计算时间差等

    获取当前(系统)时间: var NowDate= new Date(); // 获取当前日期时间 // 输出为: Wed May 03 2017 14:52:08 GMT+0800 (中国标准时间) ...

  10. StanFord ML 笔记 第十部分

    第十部分: 1.PCA降维 2.LDA 注释:一直看理论感觉坚持不了,现在进行<机器学习实战>的边写代码边看理论