React使用axios请求并渲染数据
一、什么是 axios
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
二、axios 的安装
1、在项目根目录终端引入:
npm isntall --save axios
2、在使用 axios 的 js 文件中加入:
import axios from 'axios';
三、axios 的使用
这里引用 mock-api 生成的数据,结合Ant Design 组件库做一个导航列表
(1)初始化列表数据 list
constructor(props) {
super(props);
this.state = {
list: []
}
}
(2)创建 Menu 组件传入生成列表 Menu.Item 的函数 getMenuItems()
render() {
return (
<React.Fragment>
<Menu mode="horizontal">
{ this.getMenuItems() }
</Menu>
</React.Fragment>
)
}
这里的 Menu 为 Ant Design 组件库中的导航菜单组件
(3)完善函数 getMenuItems()
getMenuItems() {
return this.state.list.map(item => {
return (
<Menu.Item key={item.id}>
<Icon type={item.icon} />{item.title}
</Menu.Item>
)
})
}
(4)通过 axios 请求数据
componentDidMount() {
axios.get('http://mock-api.com/Ln4LX4nx.mock/winniebloglistdata')
.then((res) => {
this.setState({
list: res.data.data
})
})
}
这里的数据由 mock-api 生成
源数据文件:
{
"success": true,
"data": [{
"id": ,
"icon": "align-left",
"title": "列表1"
}, {
"id": ,
"icon": "align-left",
"title": "列表2"
}, {
"id": ,
"icon": "align-left",
"title": "列表3"
}, {
"id": ,
"icon": "align-left",
"title": "列表4"
}, {
"id": ,
"icon": "align-left",
"title": "列表5"
}, {
"id": ,
"icon": "align-left",
"title": "列表6"
}]
}
运行效果:
更多 axios 使用请参考 http://www.axios-js.com/zh-cn/docs/
React使用axios请求并渲染数据的更多相关文章
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- 【React自制全家桶】七、React实现ajax请求以及本地数据mock
一.下载axios插件 yarn add axios 二.React的ajax请求代码如何放置 建议放置在生命周期函数之componentDidMount()中 三.ajax之get请求 axios. ...
- ajax和axios请求本地json数据对比
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...
- VUE 使用axios请求第三方接口数据跨域问题解决
VUE是基于node.js,所以解决跨域问题,设置一下反向代理即可. 我这里要调用的第三方接口地址为 http://v.juhe.cn/toutiao/index?type=top&key=1 ...
- react中跨域请求天气预报接口数据
背景故事:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, 如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上 ...
- Vue中如何使用axios请求跨域数据
1.axios不支持jsonp,因为axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净: 2.在使用axios发送请求时,服务器端设置 res.header("Access- ...
- 21 Flutter仿京东商城项目 商品详情 请求接口渲染数据 商品属性数据渲染
加群452892873 下载对应21可文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展. cupertino_icons: ^0.1.2 flutter ...
- angular,vue,react的基本语法—插值表达式,渲染数据,响应式数据
基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...
- drf框架 - 请求模块 | 渲染模块
Postman接口工具 官方 https://www.getpostman.com/ get请求,携带参数采用Paramspost等请求,提交数据包可以采用三种方式:form-date.urlenc ...
随机推荐
- vue地图可视化 ArcGIS篇
ArcGIS for javascript开发心得 本次实例中采用ArcGIS for javascript3.24版本,由于版本3与4在API等存在较大区别,就不一一列举,详细区别看官方解释arcg ...
- [LeetCode] 62. Unique Paths 唯一路径
A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...
- 说一说ORACLE的监听
1.讲在前面 本文档仅适用于如下范围:Oracle以dedicate (专有)连接模式通过TCP/IP协议连接的场景. 2.监听的作用 在谈监听的作用之前,有必要先看看监听的工作原理图: 客户端进程发 ...
- LeetCode 541. 反转字符串 II(Reverse String II)
541. 反转字符串 II 541. Reverse String II
- 大型web项目构建之负载均衡
日常开发和学习中经常会听到或者会看到“负载均衡”这个词汇,但是对于很多初级每天只面对增删改代码的开发人员来说,这个词汇好像离我们很遥远又很接近,很多人多多少少都有点一知半解 我结合以前在开发中遇到的场 ...
- centos6.5上安装5.7版本的mysql
centos6.5上安装5.7版本的mysql https://www.cnblogs.com/lzj0218/p/5724446.html 设置root可以在本机以外的机器访问 mysql -uro ...
- Verilog转电路图
“你写的不是程序,是电路!”这句话听了很多,大多数人还是搞不太懂.程序怎么能是电路呢?这里将一些典型的Verilog转电路图贴出来,也许可以稍稍理解电路思想了. 1. 2. 3. 4. 5. 6. 7 ...
- Js学习03--数据类型
一.数据类型 1.Js中常用的数据类型 简单数据类型 Number 数字类型 String 字符串类型 Boolean 布尔类型 Undefined 变量未初始化 Null 空类型 复杂数据 ...
- 创建包含CRUD操作的Web API接口2:实现Get方法
本节是前一节的延续,上一节中我们已经为我们的Web API项目创建必要的基础设施. 在本节中,我们将在我们的控制器类中实现操作方法,这些方法用来处理HTTP GET请求. 根据Web API命名约定, ...
- Bean进行操作的相关工具方法
Bean进行操作的相关工具方法 /** * <html> * <body> * <P> Copyright 1994 JsonInternational</p ...