专栏首页编程微刊从零开始学习React-axios获取服务器API接口(五)

从零开始学习React-axios获取服务器API接口(五)

react中没有提供专门的请求数据的模块,我们需要使用第三方请求数据模块来实现请求数据,今天来说一说axios。

准备工作:

首先搜索axios,可以看到安装方法,参照文档开始学习了。

1:安装axios

安装axios的时候记得要写--save,表示把模块写入配置文件,不然别人接到这个项目的时候会出现运行不了的情况哦。

cnpm install axios --save

2:引入axios 模块

老规矩,一定要记得在当前写代码的组件里面引入axios 模块。

import  axios  from 'axios'

3:写一个点击事件按钮和方法

写一个点击事件按钮和方法,当点击按钮的时候,会触发绑定在按钮上的方法,执行方法里面的内容。

<button onClick={this.getData}>获取api接口</button>

4:获取数据的方法

打开官方文档,根据文档可以知道,我们需要复制一个请求获取数据的方法,到上一步的方法里面去执行。

5:准备一个免费的api

把api放在方法里面调用

getData=()=>{
var  api='https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7';
axios.get(api)
.then(function (response) {
 // handle success
console.log(response);
  })
.catch(function (error) {
// handle error
console.log(error);
  });
}

6:测试

代码完成之后,进行测试,点击按钮,会发现接口数据被请求过来并且打印在控制台,说明数据成功请求到前端,接下来就是要渲染到前端界面了。

7:渲染

把数据渲染到前端暂时就不写了,因为渲染不同json格式的数据,在后面详细已经写成一篇文章啦,见下一篇咯。

示例代码:Axios.js

import React  from 'react';
import axios from 'axios'
class Axios extends React.Component {
    //构造函数
    constructor() {
        super();
        //react定义数据
        this.state = {
        
        }
    }
    //请求接口的方法
    getData=()=>{
    var  api='https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7';
        axios.get(api)
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  });
    }
    render() {
        return (
        <div> 
        <h2>axios获取数据</h2>
        <button onClick={this.getData}>获取api接口</button>
        </div>
        )
    }
}
export default Axios;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【漏洞预警】Weblogic反序列化漏洞(绕过CVE-2019-2725)0day预警通告

    近日,绿盟科技安全团队发现针对Oracle Weblogic的在野漏洞利用,攻击特征与CVE-2019-2725类似。此攻击可以绕过Oracle官方在4月份发布...

    绿盟科技安全情报
  • Java日志Log4j或者Logback的NDC和MDC功能

    Java中使用的日志的实现框架有很多种,常用的log4j和logback以及java.util.logging,而log4j是apache实现的一个开源日志组件...

    JAVA日知录
  • SpringBoot+Mybatis+Swagger2环境搭建

    SpringBoot相对于传统的SSM框架的优点是提供了默认的样板化配置,简化了Spring应用的初始搭建过程,如果你不想被众多的xml配置文件困扰,可以考虑使...

    Rookie
  • 什么将会替代 JavaScript 呢?

    JavaScript 正在蓬勃发展。但由于 WebAssembly 的出现,它的衰落可能只是一个时间问题。

    数据猿
  • JavaScript设计模式之策略模式

    为达到一个目的做事情的方法有很多种,比如做工资表,需要计算码农,美工,需求三个人的工资。这时候如果是一个靠谱的人事,一定会有这样一个表:

    一粒小麦
  • 网络协议常见面试题

    答:Http协议运行在TCP之上,明文传输,客户端与服务器端都无法验证对方的身份;Https是身披SSL(Secure Socket Layer)外壳的Http...

    Java3y
  • 支持animate.css动画的jquery弹出层特效

    jquery.popup.js是一款支持animate.css动画效果的弹出层模态窗口插件。你可以在初始化插件时,配置模态窗口打开和关闭时的CSS3,使用非常炫...

    用户5997198
  • 【漏洞预警】Weblogic wls9-async反序列化远程代码执行漏洞预警通告V2.0

    4月17日,国家信息安全漏洞共享平台(CNVD)公开了Weblogic反序列化远程代码执行漏洞(CNVD-C-2019-48814),此漏洞存在于weblogi...

    绿盟科技安全情报
  • 【漏洞预警】Weblogic反序列化远程代码执行漏洞预警通告

    4月17日,国家信息安全漏洞共享平台(CNVD)公开了Weblogic反序列化远程代码执行漏洞,此漏洞存在于weblogic自带的wls9_async_resp...

    绿盟科技安全情报
  • 深圳Web前端学习:js中的模块化--【千锋】

    我们知道最常见的模块化方案有CommonJS、AMD、CMD、ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导致依...

    深圳java培训技术

扫码关注云+社区

领取腾讯云代金券