Reactjs之Axios、fetch-jsonp获取后台数据(示例代码)

小白 2021-02-10

栏目: ios ·

来源: 小白

作者:小白

简介  这篇文章主要介绍了Reactjs之Axios、fetch-jsonp获取后台数据(示例代码)以及相关的经验技巧,文章约8144字,浏览量192,点赞数5,值得参考!

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

 


以上就是本文的全部内容,希望对大家的学习有所帮助,本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 原文地址:https://www.cnblogs.com/ywjfx/p/10430794.html

相关文章

如何从reactjs发出Http请求?

如何在reactjs挂钩中创建自定义挂钩?

IE 11问题-自动缓存来自GET请求的响应-Reactjs

如何访问'key'对象reactJS的对象属性

reactJS详细介绍之(一)(示例代码)

ReactJS之遍历对象的方法

7、手把手教React Native实战之ReactJS(示例代码)

原创教程之——reactjs 组件入门教程(示例代码)