2-1 axios

一、安装

yarn add axios

二、直接请求

//1.导入axios
import axios from 'axios'
class App extends React.Component{
  constructor(props){
    super(props);
    this.state={
      songs:[]
    }
  }
//2.发送请求
componentDidMount(){
    var url='http://192.168.14.15:5000/search?keywords=海阔天空'
    axios.get(url).then(res=>{
      var songs=res.data.result.songs;
      this.setState({
        songs
      })
    })
  }
//3.渲染
 render(){
  {this.state.songs.map(item=>{
      return (<div key={item.id}>
           <p> {item.name}</p>
           </div>)
    )
  }

三、将axios挂载原型再请求

3-1 index.js配置

//axios挂载到原型上
import axios from 'axios';
React.Component.prototype.$http = axios;

3-2请求数据

componentDidMount(){
        var url = "https://music.aityp.com/top/playlist?cat=华语"
        this.$http.get(url).then(res=>{
            this.setState({
                musics:res.data.playlists
            })
        })
    }

3-3渲染数据

//父组件
render() {
        return (
            <div className="content">
                {this.state.musics.map((item,index)=>{
                    return(
                        <div key={index} onClick={this.handleDetail.bind(this,item.id)}>
                            <MusicItem data={item} ></MusicItem>
                        </div>
                    )
                })}
            </div>
        );
    }
//子组件
    render() {
        return (
            <div className="music-item">
                <img src={this.props.data.coverImgUrl} alt="" />
                <p>{this.props.data.name}</p>
            </div>
        );
    }