Reactjs之Axios、fetch-jsonp獲取后台數據

1、新增知識點

/**
 Axios獲取服務器數據(無法跨域，只能讓后台跨域獲取數據)
    react獲取服務器APi接口的數據：
    react中沒有提供專門的請求數據的模塊。但是我們可以使用任何第三方請求數據模塊實現請求數據
        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
 fetch-jsonp請求:返回url會帶回一個callback=
    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)
                    })
    4、其他請求數據的方法也可以...自己封裝模塊用原生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=?
 */

2、案例實現

class Home12 extends React.Component{
    constructor(props){
        console.log("組件加載，首先加載構造方法---1")
        super(props);
        this.state={
            msg:"HOME12 組件信息",
            list:[],
            listjson:[]
        }
    }
    componentWillMount() {
        console.log("構造函數加載完成后，會加載componentWillMount(組件將要掛載)----2")
    }
    getData=()=>{
        //通過axios獲取數據
        var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
        alert("獲取數據");
        axios.get(api).then((response)=> {
            console.log(response.data.result); //接口返回數據
            this.setState({
                //用到this,要用到this取向
                list:response.data.result
            })
        }).catch(function (error) {
            console.log(error);//捕獲異常數據
        })
    }
    getfetchjsonpData=()=>{
        //通過fetchjsonp獲取數據
        var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
        fetchJsonp(api)
            .then(function(response) {
                return response.json()//返回的json數據
            }).then((json) =>{
            //console.log('parsed json', json)
            this.setState({
                listjson:json.result
            })
        }).catch(function(ex) {
            console.log('parsing failed', ex)
        })
    }
    render() {
        console.log("數據將要渲染---3")
        return(
            <div>
                <h2>HOME12組件首頁</h2>
                <h1>axios獲取數據</h1>
                <button onClick={this.getData}>獲取服務器api接口數據</button>
                <hr/>
                <ul>
                    {
                        this.state.list.map( (value,key) =>{
                           return(<li key={key}>{value.title}</li>)
                        })
                    }
                </ul>
                <hr/>
                <h1>fetch-jsonp獲取數據</h1>
                <button onClick={this.getfetchjsonpData}>獲取服務器api接口數據</button>
                <hr/>
                <ul>
                    {
                        this.state.listjson.map( (value,key) =>{
                            return(<li key={key}>{value.title}</li>)
                        })
                    }
                </ul>
            </div>
        )
    }
    //生命的周期函數---組件加載完成
    componentDidMount() {
        console.log("組件加載完成---4")
        this.getData();
    }
}