前置说明：

　　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. i++ 和 ++i的字节码指令

    代码 public class Test{ public static void main(String args[]){ int i=0;i=i++; System.out.println(i);} ...

  2. a++ 与 ++a 的运算

    var a=5: b=a++和b=++a的区别: 前者是先赋值,再自加,即b=a:a=a+1: //结果b=5,a=6 后者是先自加,再赋值,即a=a+1;b=a;  //结果a=6,b=6

  3. 关于New，delete

    new delete 为表达式.这个过程不能重载,但是分解的步骤可以重载. String* ps = newe String("Hello") 分解为: String* ps; v ...

  4. Java虚拟机------JVM分析工具

    主要介绍JVM的分析工具: jps jps:Java Virtual Machine Process Status Tool http://docs.oracle.com/javase/1.5.0/d ...

  5. oracle执行update时卡死问题的解决办法

    原因: 由于在PLSQL Developer执行update时没有commit,oracle将该条记录锁住了. 可以通过以下办法解决: 先查询锁定记录 Sql代码 SELECT s.sid, s.se ...

  6. ubuntu 16.04 ssh免密码连接不上

    我们在用ubuntu系统搭建集群的时候,配置免密码登录是必须经过的一步 我这里集群的每个节点都是采用的是root用户,因为ubuntu系统不同centos,ubuntu真的限制太多太不友好了 下面看看 ...

  7. 微信小程序学习笔记1--小程序的代码构成

    最近打算学习一下微信小程序,看了微信公众平台的文档感觉还比较简单,就从这个方向重新找回学习的状态吧: 1.先了解一下小程序的代码构成: 创建项目后会看到四种后缀的文件: .json 后缀的 JSON ...

  8. vue的异步组件按需加载

    当build打包后,app.js过大的时候,可以考虑用异步组件的方式. import HomeHeader from "./components/Header"; import H ...

  9. springboot打包

    springboot项目运行package命令,默认打出来的jar包只有几kb.想要打出可执行的jar包,加入插件: <build> <plugins> <plugin& ...

  10. 性能测试day01_性能基本概念

    其实第一次接触性能是15年的时候,懵懵懂懂的被领导拉去做第一次做性能压测,如今有机会重新听一下云层大大讲解性能,于是打算以此博客记录下整个学习的过程,如若有不同意见者可以在下面留言指出,也欢迎大家一起 ...