前置说明：

　　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. JavaScript和HTML DOM的区别与联系

    JavaScript和HTML DOM的区别与联系 区别: javascript JavaScript 是因特网上最流行的浏览器脚本语言.很容易使用!你一定会喜欢它的! JavaScript 被数百万 ...

  2. Java-Runoob-高级教程-实例-方法：12. Java 实例 – Enum（枚举）构造函数及方法的使用-um

    ylbtech-Java-Runoob-高级教程-实例-方法:12. Java 实例 – Enum(枚举)构造函数及方法的使用 1.返回顶部 1. Java 实例 - Enum(枚举)构造函数及方法的 ...

  3. SCCM2012 R2实战系列之五：发现方法

    打开SCCM2012的控制台 点击左侧栏的“管理”选项,然后展开“层次结构配置”,点击“发现方法”来配置客户端发现. 勾选“启用Active Directory林发现”.“发现Active Direc ...

  4. 第11章 拾遗4：IPv6（1）_报文格式和地址类型

    1. IPv4和IPv6协议栈的比较 (1)IPv6取代IPv4,支持IPv6的动态路由协议都属于IPv6协议(如RIPng.OSPFv3). (2)Internet控制消息协议IPv6版(ICMPv ...

  5. FastDFS+Nginx+fastdfs-nginx-module集群搭建

    一.实验环境说明 操作系统: Centos 6.6 x64 FastDFS 相关版本: fastdfs-5.05 fastdfs-nginx-module-v1.16 libfastcommon-v1 ...

  6. pymongo

    import pymongofrom bson import ObjectIdimport jsonmongo_client=pymongo.MongoClient(host='127.0.0.1', ...

  7. asp.net 基础内容

    1. ViewData ViewBag  TempData 区别? 1.ViewData和TempData是字典类型,赋值方式用字典方式,ViewData["myName"] 2. ...

  8. 自媒体运营排版利器----Markdown here

    Markdown Here ​ 下载chrome插件直接下载 使用:打开网页文章编辑器,比如cnblog 用markdown语法写文章,之后点击编译 可以设置好css语法,以后每次可以套用同样的模板 ...

  9. mongo数据库的安装与使用

    下载mongoDB安装包.https://pan.baidu.com/s/1cvSJtc 默认安装.会在系统盘的program Files文件夹下法相一个MongoDB的文件夹,这个就是软件安装的位置 ...

  10. [Unity动画]04.Avatar Mask

    参考链接: https://www.cnblogs.com/hammerc/p/4832637.html Avatar Mask主要用于动画层融合.例如说,边跑边举起东西,这个实际上就是下半身播放跑步 ...