专栏首页编程微刊从零开始学习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 条评论
登录 后参与评论

相关文章

  • 从零开始学习React-五分钟上手Echarts折线图(十)

    在jQuery里面,我会经常用到Echarts统计图,那么就从自己熟悉的地方写,今天在我之前写的React项目里面使用一下折线图。

    王小婷
  • 从零开始学习React-在react项目里面使用mock(七)

    从零开始学习React-开发环境的搭建(一) https://www.jianshu.com/p/97f3a1ba168e 从零开始学习React-目录结构...

    王小婷
  • 从零开始学习React-解析json、渲染数据(六)

    在上一节里面,从零开始学习React-axios获取服务器API接口(五)我们请求的api是一个天气的api,这一节是如何获取数据,进行解析,并且渲染到前端。

    王小婷
  • GraphQL快速入门教程

    传统的api调用一般获取到的是后端组装好的一个完整对象,而前端可能只需要用其中的某些字段,大部分数据的查询和传输工作都浪费了。graphQL提供一种全新数据查询...

    Fundebug
  • 使用Moment.js处理时间戳转化为时间年月

    Moment.js 是一个 JavaScript 日期处理类库(处理时间格式化的npm包),用于解析、检验、操作、以及显示日期,在新公司的项目中,大量使用Mom...

    王小婷
  • 基于 Express 应用框架的技术方案选型浅谈

    现在的 Node 对于前端而言可以涵盖各个方面,包括命令行接口、插件、依赖库、脚手架以及 Web 服务等。本文是一篇对于 Node 使用的浅谈文章,会简单讲解一...

    前端迷
  • GraphQL 入门详解

    传统的api调用一般获取到的是后端组装好的一个完整对象,而前端可能只需要用其中的某些字段,大部分数据的查询和传输工作都浪费了。graphQL提供一种全新数据查询...

    Nealyang
  • react 同构初步(4)

    用代理规避跨域其实是很简单的事情,在往期的文章中已经有过类似的案例。但现在需要用"中台"的角度去思考问题。当前的项目分为三大部分:客户端(浏览器),同构服务端(...

    一粒小麦
  • 建站四部曲之前端显示篇(React+上线)

    张风捷特烈
  • React Hook技术实战篇

    Hook在中文的意思是钩子, 而在react也是充当这个角色, Hook是服务于函数组件的方法, Hook提供了各种API, 如State Hook提供类型se...

    JianLiang
  • [Vue 牛刀小试]:第十五章 - 传统开发模式下的 axios 使用入门

      在没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前,无法抛弃 Jquery 的重要理由,除了优秀的前端 DOM 元素操作性以外,...

    程序员宇说
  • 如何更好的在 react 中使用 axios 的拦截器

    axios 算是当下最热门的前端 ajax 处理库,它简单易上手,扩展性强,功能齐全。

    玖柒的小窝
  • 在 React 应用中获取数据

    可以说 React 是构建 web 应用最流行的库。然而,它并不是全能的 web 框架。它只关注 MVC 中的 view 模块。

    前端达人
  • React基础(9)-React中发送Ajax请求以及Mock数据

    把这段商品列表的json代码命名为goodlist.json,放到根目录public的api文件夹内

    itclanCoder
  • React学习(九)-React中发送Ajax请求以及Mock数据

    把这段商品列表的json代码命名为goodlist.json,放到根目录public的api文件夹内

    itclanCoder
  • 只知道ajax?你已经out了

    随着前端技术的发展,请求服务器数据的方法早已不局限于ajax、jQuery的ajax方法。各种js库已如雨后春笋一般,蓬勃发展,本文主要想介绍其中的axios和...

    前端林子
  • 使用 React 和 Django REST Framework 构建你的网站

    在我们最近的工作中,构建网站使用的架构是带有 Django REST Framework(DRF)后端的 React 前端。它们是通过在前端使用 axios(前...

    临书
  • 写给初中级前端的高级进阶指南(JS、TS、Vue、React、性能、学习规划)

    我曾经一度很迷茫,在学了Vue、React的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题...

    ssh_晨曦时梦见兮
  • react实战:umi问卷发布系统

    技术团队中,保持技术分享和持续的学习是完全必要的。企业主会说:"公司不是培训机构。"这固然正确。但一个公司,总会遇到这种或那种需要攻关的难题。当你不愿意分享解决...

    一粒小麦

扫码关注云+社区

领取腾讯云代金券