前置说明：

　　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. springboot（二 如何访问静态资源和使用模板引擎，以及 全局异常捕获）

    在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. 默认配置 Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /static / ...

  2. 廖雪峰Java1-4数组操作-4多维数组

    二维数组 二维数组就是元素为数组的数组 二维数组每个数组的长度不要求一样.比如 int[][] = { { 1, 2 }, { 3, 4, 5 }, { 6, 7, 8, 9 } } int[][] ...

  3. maven之BOM及BOM和provided的一个小坑

    BOM(Bill of Materials)定义一整套相互兼容的jar包版本集合,使用时只需要依赖该BOM文件,即可放心的使用需要的依赖jar包,且无需再指定版本号.BOM的维护方负责版本升级,并保证 ...

  4. HDOJ 2003 求绝对值

    #include<cstdio> #include<cmath> int main() { double a; while (scanf_s("%lf", ...

  5. host文件的工作原理及应用

    host文件的工作原理及应用 Hosts文件是一个用于存储计算机网络中节点信息的文件,它可以将主机名映射到相应的IP地址,实现DNS的功能,它可以由计算机的用户进行控制. 一.Hosts文件基本介绍 ...

  6. jQuery对象的获取与操作方法总结

    一.文章概述: 众所周知,jQuery 是一个 JavaScript 库,包含多个可重用的函数,用来辅助我们简化javascript开发,它极大地简化了 JavaScript 编程.但是需要注意的一点 ...

  7. [UE4]UE4是单线程的吗？

    并行与串行 并行是同时在执行,串行是一个接一个地执行 进程与线程 笼统的说,进程是游戏的一次运行,线程是进程里面分配CPU资源的最小单位 类比 1.把世界看成一台计算机 2.世界里面的人可以看成是一个 ...

  8. [UE4]实例化材质

    在虚幻引擎 4 中,材质实例化用来更改材质的外观,而不会引起成本高昂的材质重新编译. 实例化材质官方文档

  9. [UE4]控制台命令，生成机器人

    在关卡蓝图中: 运行游戏的手,按“·”键(键盘第二行第一个键,数字1前面的一个键)呼出控制台输入界面,输入“ce 事件名称 参数值”,然后回车. 可以添加一个Trigger Box作为机器人的出生点

  10. WebSocket 跨域

    http://www.cnblogs.com/joeymary/p/5259464.html