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": 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/