前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React使用axios请求并渲染数据

React使用axios请求并渲染数据

作者头像
Leophen
发布2019-08-23 15:25:54
3.9K0
发布2019-08-23 15:25:54
举报
文章被收录于专栏:Web前端开发

一、什么是 axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中

二、axios 的安装

1、在项目根目录终端引入:

代码语言:javascript
复制
npm isntall --save axios

2、在使用 axios 的 js 文件中加入:

代码语言:javascript
复制
import axios from 'axios';

三、axios 的使用

这里引用 mock-api 生成的数据,结合 Ant Design 组件库做一个导航列表

(1)初始化列表数据 list

代码语言:javascript
复制
constructor(props) {
  super(props);
  this.state = {
    list: []
  }
}

(2)创建 Menu 组件传入生成列表 Menu.Item 的函数 getMenuItems()

代码语言:javascript
复制
render() {
  return (
    <React.Fragment>
      <Menu mode="horizontal">
        { this.getMenuItems() }
      </Menu>
    </React.Fragment>
  )
}

这里的 Menu 为 Ant Design 组件库中的导航菜单组件

(3)完善函数 getMenuItems()

代码语言:javascript
复制
getMenuItems() {
  return this.state.list.map(item => {
    return (
      <Menu.Item key={item.id}>
        <Icon type={item.icon} />{item.title}
      </Menu.Item>
    )
  })
}

(4)通过 axios 请求数据

代码语言:javascript
复制
componentDidMount() {
  axios.get('http://mock-api.com/Ln4LX4nx.mock/winniebloglistdata')
    .then((res) => {
      this.setState({
        list: res.data.data
      })
    })
}

这里的数据由 mock-api 生成

源数据文件:

代码语言:javascript
复制
{
  "success": true,
  "data": [{
    "id": 1,
    "icon": "align-left",
    "title": "列表1"
  }, {
    "id": 2,
    "icon": "align-left",
    "title": "列表2"
  }, {
    "id": 3,
    "icon": "align-left",
    "title": "列表3"
  }, {
    "id": 4,
    "icon": "align-left",
    "title": "列表4"
  }, {
    "id": 5,
    "icon": "align-left",
    "title": "列表5"
  }, {
    "id": 6,
    "icon": "align-left",
    "title": "列表6"
  }]
}

运行效果:

更多 axios 使用请参考 http://www.axios-js.com/zh-cn/docs/

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-08-13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、什么是 axios
  • 二、axios 的安装
    • 1、在项目根目录终端引入:
      • 2、在使用 axios 的 js 文件中加入:
      • 三、axios 的使用
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档