前置说明：

　　1.React本身只关注页面，并不包含发送ajax请求的代码

　　2.前端应用需要通过ajax请求与后台进行交互(json数据)

　　3.React应用中需要集成第三方ajax库(或自己进行封装)

常用的ajax库：

　　1.jQuery：比较重，为了发送ajax请求而引用整个文件(不建议使用)

　　2.axios：轻量级，建议使用！

　　　　a.封装了XmlHttPRequest对象的ajax

　　　　b.promise风格

　　　　c.可以用在浏览器端和node服务器端

　　3.fetch：原生函数，但老版本浏览器不支持

　　　　a.不再使用XmlHttPRequest对象提交ajax请求

　　　　b.为了兼容低版本的浏览器，可以引入兼容库fetch.js

代码：

　　//其中的地址貌似访问不到了

<!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() {
            //使用axios发送
            const url = `https://api.github.com/search/repositories?q=r&sort=stars`;
            //因为是promise风格的，所以后面可以使用.then()
            axios.get(url).then(response => {
                //数据就在reponse里面
                const result = response.data
                //使用解构得到想要的数据
                const {name, html_url} = result.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>

24_ajax请求_使用axios的更多相关文章

  1. 请求超时VUE axios重新再次请求

    //在main.js设置全局的请求次数,请求的间隙 axios.defaults.retry = 4; axios.defaults.retryDelay = 1000; axios.intercep ...

  2. VUE 数据请求和响应(axios)

    1. 概述 1.1 简介 axios是一个基于Promise(本机支持ES6 Promise实现) 的HTTP库,用于浏览器和 nodejs 的 HTTP 客户端.具有以下特征: 从浏览器中创建 XM ...

  3. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

  4. 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 ...

  5. 25_ajax请求_使用fetch

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue.js请求数据（axios）

    使用npm安装axios npm install axios --save 在main.js中引入axios import axios from "axios"; 注册axios到 ...

  7. [异步请求]ajax、axios、fetch之间的详细区别以及优缺点

    1.jQuery ajax  $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () ...

  8. vue全局设置请求头 (封装axios请求)

    Vue.http.interceptors.push((request, next) => { // 请求发送前的处理逻辑 request.headers.set('Authorization' ...

  9. vue-ajax/axios请求函数封装: axios+promise

    项目文件目录/src/api ajax.js /** * ajax 请求函数模块 * 返回值为promise对象 */ import axios from 'axios' export default ...

随机推荐

  1. 使用Apache Mesos和Consul实现服务的注册发现

    为保证基于Docker应用程序和服务都具有高性能和可用性,设计出一种具有服务发现,高可用性和容错能力的解决方案非常重要. 我们使用Apache Mesos 和Mesosphere的 Marathon实 ...

  2. 如何修改CSV文件的分隔符

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

  3. Java学习---流与文件

    实验10  流与文件操作 一.实验目的 理解和掌握JAVA程序中实现输入/输出的技术和有关的类与方法. 二.实验要求 掌握File类常用的方法 掌握标准数据流及Scanner类的应用. 掌握文件输入输 ...

  4. view之Scroller工具类和GestureDetector的简单用法

    转载:http://ipjmc.iteye.com/blog/1615828 Android里Scroller类是为了实现View平滑滚动的一个Helper类.通常在自定义的View时使用,在View ...

  5. imageLoader之介绍

    相信大家在学习以及实际开发中基本都会与网络数据打交道,而这其中一个非常影响用户体验的就是图片的缓存了,若是没有弄好图片缓存,用户体验会大大下降,总会出现卡顿情况,而这个问题尤其容易出现在ListVie ...

  6. [UE4]Child Widget 留白 padding

    child widget公开一个变量设置padding是一个比较好的设计方案.

  7. netbeans运行项目时，弹出“cannot be run from folder that contains non-ASCII characters in path”的对话框 解决方法

    netbeans运行项目时,弹出“cannot be run from folder that contains non-ASCII characters in path”的对话框,原因是项目路径中有 ...

  8. (转)WebApi返回Json格式字符串

    原文地址:https://www.cnblogs.com/elvinle/p/6252065.html WebApi返回json格式字符串, 在网上能找到好几种方法, 其中有三种普遍的方法, 但是感觉 ...

  9. 干货 | 100+个NLP数据集大放送，再不愁数据！

    奉上100多个按字母顺序排列的开源自然语言处理文本数据集列表(原始未结构化的文本数据),快去按图索骥下载数据自己研究吧! 数据集 Apache软件基金会公开邮件档案:截止到2011年7月11日全部公开 ...

  10. Java - 28 Java 泛型

    Java 泛型 如果我们只写一个排序方法,就能够对整型数组.字符串数组甚至支持排序的任何类型的数组进行排序,这该多好啊. Java泛型方法和泛型类支持程序员使用一个方法指定一组相关方法,或者使用一个类 ...