react 网络请求 axios

react中通过npm来安装axios扩展

cnpm i -S axios

 

 

发起请求

import React, { Component } from 'react'

import axios from 'axios'

export default class App2 extends Component {

  state = {
    users: []
  }

  // 组件挂载完毕后，执行的方法  只执行一次
  /* componentDidMount() {
    axios.get('http://localhost:3000/data/users.json')
      .then(ret => {
        console.log(ret);
      })
  } */
  async componentDidMount() {
    let { data } = await axios.get('/api/users')
    this.setState(state => ({
      users: data
    }))
  }

  render() {
    return (
      <div>
        <ul>
          {
            this.state.users.map(item => (
              <li key={item.id}>{item.name}</li>
            ))
          }
        </ul>
      </div>
    )
  }
}