React --获取服务器数据的两种方式(Axios和FetchJsonp）

/*
react获取服务器APi接口的数据：


    react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据


    1、axios          https://github.com/axios/axios       axios的作者觉得jsonp不太友好，推荐用CORS方式更为干净（后端运行跨域）


          1、安装axios模块npm install axios  --save   /  npm install axios  --save


          2、在哪里使用就在哪里引入import axios from 'axios'

          3、看文档使用


            var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';

            axios.get(api)
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });



    2、fetch-jsonp    https://github.com/camsong/fetch-jsonp


            1、安装 npm install fetch-jsonp  --save

            2、import fetchJsonp from 'fetch-jsonp'


            3、看文档使用

            fetchJsonp('/users.jsonp')
            .then(function(response) {
              return response.json()
            }).then(function(json) {
              console.log('parsed json', json)
            }).catch(function(ex) {
              console.log('parsing failed', ex)
            })


    3、其他请求数据的方法也可以...自己封装模块用原生js实现数据请求也可以...




远程测试API接口：


get请求：

    http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20


jsonp请求地址:

    http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&callback=?

  

*/
import React, { Component } from 'react';

import '../assets/css/index.css';

import Axios from './Axios';


class Home extends Component {

    constructor(props){
        super(props);        
        this.state={ 
          title:'首页组件'         
        }
    }
    render() {
      return (
        <div>
          

            <Axios />

        </div>
      );
    }
  }
  
  export default Home;
  

 

方式一：Axios获取服务器数据：

import React, { Component } from 'react';


import axios from 'axios';

class Axios extends Component {
    constructor(props) {
        super(props);
        this.state = { 

            list:[]
         };
    }

    getData=()=>{


        //通过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>axios获取服务器数据</h2>


                <button onClick={this.getData}>获取服务器api接口数据</button>

                <hr />

                <ul>
                    
                    {

                        this.state.list.map((value,key)=>{

                            return <li key={key}>{value.title}</li>
                        })
                    }   

                    
                </ul>


            </div>
        );
    }
}

export default Axios;

方式二：FetchJsonp获取服务器数据：

import React, { Component } from 'react';


import fetchJsonp from 'fetch-jsonp';


class FetchJsonp extends 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>

                <button onClick={this.getData}>获取服务器api接口数据</button>

                <hr />

                <ul>
                    
                    {

                        this.state.list.map((value,key)=>{

                            return <li key={key}>{value.title}</li>
                        })
                    }   

                    
                </ul>

            </div>
            
        );
    }
}

export default FetchJsonp;

 

转载于:https://www.cnblogs.com/wyanblog/p/10996640.html