React学习之旅----axios与fetch-jsonp

父组件

import React from 'react'
import Header from './Header'
import Footer from './Footer'
import Axios from './Axios'
import FetchJsonp from './FetchJsonp'
class Father extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: '父组件',
      count: 20
    }
  }
  run = () => {
    alert('我是父组件的run方法')
  }
  getData = () => {
    alert(this.state.title)
  }
  // 获取子组件传过来的数据
  getChildData = (result) => {
    alert(result)
    this.setState({
      title: result
    })
  }
  // 父组件自动调动子组件的方法
  getFooter = () => {
    alert(this.refs.footer.state.title)
    this.refs.footer.run()
  }
  render () {
    return (
      <div>
        {/* 父子组件传值：
父组件给子组件传值
1.在调用子组件的时候定义一个属性  <Header msg='首页'></Header>
2.子组件里面 this.props.msg
说明：父组件不仅可以给子组件传值，还可以给子组件传方法,以及把整个父组件传给子组件。
父组件主动获取子组件的数据
1、调用子组件的时候指定ref的值   <Header ref='header'></Header>
2、通过this.refs.header  获取整个子组件实例 dom加载完成后获取*/}


        {/* 将title传递给子组建 */}
        {/* 传递父组件的方法 */}
        {/* 将整个父组件传递过去 */}
        <Header title={this.state.title} run={this.run} father={this} num={this.state.count}></Header>
        {this.state.title}
        <hr />
        <button onClick={this.getFooter}>获取整个子组件</button>
        <Footer ref='footer'></Footer>
        <hr />
        <Axios></Axios>
        <FetchJsonp></FetchJsonp>
      </div>
    )
  }
}
export default Father

axios.js

import React from 'react'
import axios from 'axios'
class Axios extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list:[]
    };
  }
  getData = () => {
    // alert('ok')
    //通过axios获取服务器数据

    var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';   //接口后台允许了跨域

    axios.get(api)
      .then((response) => {
        console.log(response.data.result);

        //用到this要注意this指向

        this.setState({

          list: response.data.result

        })
      })
      .catch(function (error) {
        console.log(error);
      });
  }
  render () {
    return (
      <div>
        <h2>
          获取服务器数据
        </h2>
        <button onClick={this.getData}>获取服务器数据</button>
        <hr/>
        <ul>
          {
            this.state.list.map((value,key)=>{
              return (
                <li key={key}>{value.title}</li>
              )
            })
          }
          
        </ul>
      </div>
    );
  }
}

export default Axios;

fetchJsonp.js

import React from 'react'
import fetchJsonp from 'fetch-jsonp'
class FetchJsonp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    };
  }
  getData = () => {
    //获取数据

    var api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
    fetchJsonp(api)
      .then(function (response) {
        return response.json()
      }).then((json) => {
        // console.log(json);

        this.setState({

          list: json.result
        })

      }).catch(function (ex) {
        console.log('parsing failed', ex)
      })
  }
  render () {
    return (
      <div>
        <h2>FetchJsonp获取服务器jsonp接口的数据</h2>
        <hr />
        {/* 如何看一个接口支持jsonp，就是在一个接口网址后面加上callback=xxx，只要能获取到数据，就是支持jsonp接口 */}
        <button onClick={this.getData}>获取服务器数据</button>
        <hr />
        <ul>
          {
            this.state.list.map((value, key) => {
              return (
                <li key={key}>{value.title}</li>
              )
            })
          }

        </ul>
      </div>
    );
  }
}

export default FetchJsonp;