React学习12----请求接口数据

react获取服务器APi接口的数据：
react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据

我们使用 axios 插件，来请求接口数据
使用如下：
查看文档： axios https://www.npmjs.com/package/axios
1、安装axios模块npm install axios --save / npm install axios --save
2、在哪里使用就在哪里引入import axios from ‘axios’
3、看文档使用
4、测试接口：
var api=‘http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20’;

axios的作者觉得jsonp不太友好，推荐用CORS方式更为干净（后端运行跨域），就是说：
axios不能完成jsonp的跨域请求，需要在接口端设置为允许跨域

这里演示了，get请求，post在文档中自己看

具体例子如下：项目结构：
在这里插入图片描述

Axios.js中请求接口数据：

import React from 'react';
import axios from 'axios';

/**
 react获取服务器APi接口的数据：
 react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据

 1、axios          https://www.npmjs.com/package/axios
 1、安装axios模块npm install axios  --save   /  npm install axios  --save
 2、在哪里使用就在哪里引入import axios from 'axios'
 3、看文档使用
 4、测试接口：
 var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';

 axios的作者觉得jsonp不太友好，推荐用CORS方式更为干净（后端运行跨域），就是说：
 axios不能完成jsonp的跨域请求，需要在接口端设置为允许跨域

 这里演示了，get请求，post在文档中自己看
 */
class Axios extends React.Component{
    constructor(props){
        super(props);
        //定义数据
        this.state = {
            title:'Axios',
            list:[],
        }
    }
    getData=()=>{
        let url ='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
        axios.get(url)
            .then((response)=> {
                //请求成功
                console.log(response);
                // 把请求到的数据，赋值给构造函数的数据
                this.setState({
                    list:response.data.result,
                })


            })
            .catch(function (error) {
                //请求失败
                console.log(error);
            });
    }
    //渲染数据
    render() {
        return (
            <div>
                {this.state.title}
                 <br/><br/>
                <button onClick={this.getData}>拿到接口数据</button>
                {/* 把请求到的数据循环显示 */}
                <ul>
                    {
                        this.state.list.map((value,key)=>{
                            return <li key={key}>{value.title}</li>
                        })
                    }
                </ul>

            </div>
        )
    }
}//class
// 暴露出去，供外部调用
export default Axios;

axios的作者觉得jsonp不太友好，推荐用CORS方式更为干净（后端运行跨域），就是说：
axios不能完成jsonp的跨域请求，需要在接口端设置为允许跨域
fetch-jsonp 插件，能完成跨域请求：
具体使用如下：
查看文档： fetch-jsonp https://www.npmjs.com/package/fetch-jsonp
1、安装：npm install fetch-jsonp --save
2、引入：import fetchJsonp from ‘fetch-jsonp’
3、看文档使用
4、测试接口：
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&callback=?
jsonp请求会在后面拼接一个 callback
5、其他请求数据的方法也可以…自己封装模块用原生js实现数据请求也可以…
FetchJsonp.js 中使用：

import React from 'react';
import fetchJsonp from 'fetch-jsonp';

/**
 *
 fetch-jsonp    https://www.npmjs.com/package/fetch-jsonp
 1、安装：npm install fetch-jsonp  --save
 2、引入：import fetchJsonp from 'fetch-jsonp'
 3、看文档使用
 4、测试接口：
 http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&callback=?
 jsonp请求会在后面拼接一个 callback
 5、其他请求数据的方法也可以...自己封装模块用原生js实现数据请求也可以...
 */
class FetchJsonp extends React.Component{
    constructor(props){
        super(props);
        //定义数据
        this.state = {
            title:'FetchJsonp',
            list:[],
        }
    }

    getData=()=>{
    //    请求数据：
        var url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
        fetchJsonp(url)
            .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>
                {this.state.title}
                <br/><br/>
                <button onClick={this.getData}>拿到接口数据</button>
                <br/><br/>
                {/* 把请求到的数据循环显示 */}
                <ul>
                    {
                        this.state.list.map((value,key)=>{
                            return <li key={key}>{value.title}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}//class
// 暴露出去，供外部调用
export default FetchJsonp;

ok,完了
源码下载：
https://download.csdn.net/download/zhaihaohao1/10980372
rdemo12

React学习12----请求接口数据

猜你喜欢