Reactjs之Axiosfetch-jsonp获取后台数据

Posted 2021-02-10 小白

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();
    }
}