import React from 'react';
import ReactDOM from 'react-dom';
import fetchJsonp from 'fetch-jsonp';


class App extends React.Component{
    state ={
        isLoading:false,
        data:null
    };
    fetchData = async() =>{
        fetchJsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a',{
            jsonpCallback:'cb'
        }).then(res=>{
            return res.json();
        }).then(data=>{
            console.log(data);
        })
    };
    render(){
        let {isLoading, data} = this.state;
        return (<div>
            <h2>fetch-jsonp跨域取数据</h2>
            <button onClick={this.fetchData}>获取数据</button>

            <div>
                {
                    isLoading?<strong>加载中...</strong>:
                    <div>
                        {
                            data==null?<strong>暂无数据...</strong>:
                            <ul>
                                <li>名字: {data.name}</li>
                                <li>公司网址: {data.company}</li>
                                <li>头像: 
                                    <img src={data.avatar_url} alt=""/>
                                </li>
                            </ul>
                        }
                    </div>
                }
            </div>
        </div>)
    }
}


ReactDOM.render(
    <App />
    , document.getElementById('root'));