前置说明：

　　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. error: Error retrieving parent for item: No resource found that matches the given name 'android:Widget.Material.ActionButton'.

    引用appcompat 类库提示 error: Error retrieving parent for item: No resource found that  matches the given ...

  2. join、on、where、having的使用区别

    on.where.having的区别 on.where.having这三个都可以加条件的子句中,on是最先执行,where次之,having最后.on是在生成中间的临时表时起作用的,where,hav ...

  3. ubuntu下 net core 安装web模板

    ---恢复内容开始--- 今天想试试在Linux用C#开发WebAPI,查了下,要用: dotnet new -t Web 来建立工程,结果我试了下,出来这段: Invalid input switc ...

  4. DB通用类：Sqlite通用类库

    Sqlite通用类库 using System; using System.Collections; using System.Collections.Generic; using System.IO ...

  5. mysql中min和max查询优化

    mysql max() 函数的需扫描where条件过滤后的所有行: 在测试环境中重现: 测试版本:Server version:         5.1.58-log MySQL Community ...

  6. tkinter简单使用

    第一个运行程序 # -*- coding: utf-8 -*- import tkinter as tk //引入 root = tk.Tk() // 实例化root T大写k小写 root.titl ...

  7. The Kernel Boot Process.内核引导过程

    原文标题:The Kernel Boot Process 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限,只好挑一些国外高手的精彩文章翻译一下.一来自己 ...

  8. TextView右上角显示小红点，小红点根据TextView的长度移动，小红点被TextView挤出去不显示的问题；

    大概就是图片这个样,这个功能很常见,本来我以为很简单,谁知道真的很简单: 遇到点小问题,记录一下,哈哈: 小红点的Drawable: <?xml version="1.0" ...

  9. 关于oracle中varchar2与nvarchar2的一点认识

    今天在oracle 10g下测试了下varchar2与nvarchar2这两种类型,网上有很多关于这两种类型的区别的帖子,我还是自己测试了下. varchar2(size type),size最大为4 ...

  10. windows7下搭建robot framework环境指导

    第一步 安装Python并设置环境变量 1.安装python: python下载地址https://www.python.org/,建议用2.7.x版本 2.设置环境变量: 方法如下所示 第二步 安装 ...