第11节 React获取服务器API接口数据2019-06-08

目前主要有两种方式：axios、fetch-jsonp

一、axios的使用

1.1安装

1.1.1使用NPM安装

npm install axios --save

1.1.2使用Yarn安装

$ yarn add axios

1.2引用

在哪里使用，在哪里引用

import Axios from 'axios'

1.3Axios示例

/**
 * 获取服务器数据
 */
getData=()=>{
    var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
    axios.get(api)
        //.then(function (response) {
        .then((response)=> {
            console.log(response.data.result);
            this.setState({
                list:response.data.result
            })
        })
        .catch(function (error) {
            console.log(error);
        });
    //alert("获取服务器数据");
}

1.4DEMO示例

import  React from  'react';

import 'bootstrap/dist/css/bootstrap.min.css';

import axios from 'axios';

//定义组件
class Axios extends React.Component{
    constructor(props){
        super(props);
        this.state={
            list:[]
        }
    }

    /**
     * 获取服务器数据
     */
    getData=()=>{

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

        axios.get(api)
            //.then(function (response) {
            .then((response)=> {
                console.log(response.data.result);
                this.setState({
                    list:response.data.result
                })
            })
            .catch(function (error) {
                console.log(error);
            });

        //alert("获取服务器数据");
    }

    render() {
        return (
            

                
axiox获取服务器数据
                获取
                

                

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

                
            
        )
    }
}

export default  Axios;//导出组件

1.5官网地址

https://www.npmjs.com/package/axios

二、fetch-jsonp的使用

2.1安装

npm install fetch-jsonp

2.2引用

import fetchJsonp from 'fetch-jsonp'

2.3fetch-jsonp示例

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

        fetchJsonp(api)
            .then(function(response) {
                return response.json()
            }).then((json)=> {
                this.setState({
                    list:json.result
                })
        }).catch(function(ex) {
            console.log('parsing failed', ex)
        })

    }

2.4完整DEMO示例

import  React from 'react';

import fetchJsonp from 'fetch-jsonp'
//定义组件
class Fecthjsonp 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)=> {
                this.setState({
                    list:json.result
                })
        }).catch(function(ex) {
            console.log('parsing failed', ex)
        })

    }
    render() {
        return(
            
你好
              

                获取数据
                

                    {

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

                
            
        )
    }
}

export default  Fecthjsonp;//导出组件

2.5官网地址

https://www.npmjs.com/package/fetch-jsonp