时间戳

首页 > 技术文章 > react中的数据请求

react中的数据请求

yuyujuan 2018-12-17 21:24 原文

 在react中，没有提供专门的请求数据的模块，所以我们可以采用第三方请求数据的模块进行数据请求，常见的有axios和fetch-jsonp，下面来总结这两种方式的用法。

axios

查看文档

https://github.com/axios/axios

创建项目

1，使用npx create-react-app react-router创建项目，

2，在src文件夹下新建components文件夹和assets文件夹，在assets文件夹中新建css文件夹和images文件夹，并将src文件夹下的相关文件进行归类。

安装和使用

1，在项目的根目录中执行命令：npm install axios --save进行安装

2，在components文件夹下面新建Axios.js组件，并在App.js中引入该组件。

3，在需要进行数据请求的页面引入axios，所以在Axios.js文件下面通过import引入axios。

4，通过生命周期函数或者相关事件触发数据请求。

5，渲染数据

下面贴出相关代码：axios.js

import React, { Component } from 'react';

import axios from 'axios';
class Axios extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[]
         };
    }
    getData=()=>{
        //通过axios获取服务器数据
        var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';   //接口后台允许了跨域
        axios.get(api)
        // 箭头函数改变this指向
        .then((res)=> {
            this.setState({
                list:res.data.result
            })
        })
        .catch(function (error) {
            console.log(error);
        });
    }
    render() {
        return (            
            <div>
                 <button onClick={this.getData}>获取服务器api接口数据</button>
                 <br />
                 <br />
                 <ul>
                    {
                        this.state.list.map((value,key)=>{
                            return <li key={key}>{value.title}</li>
                        })
                    } 
                </ul>
            </div>
        );
    }
}

export default Axios;

fetch-jsonp

查看文档

https://github.com/camsong/fetch-jsonp

创建项目

还是上面的项目，继续在components文件夹下面新建fetchJsonp.js文件，并在根组件App.js中引入。

安装和使用

1，在项目根目录执行命令：npm install fetch-jsonp --save进行安装

2，在FetchJsonp.js中引入

3，通过生命周期函数或者相关事件触发数据请求。

4，渲染数据

下面贴出fetchJsonp.js的代码

import React, { Component } from 'react';
import fetchJsonp from 'fetch-jsonp';

class FetchJsonp extends 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 (            
            <div>
                 这是fetch-jsonp组件
                 <br />
                 <button onClick={this.getData}>获取服务器api接口数据</button>
                 <ul>
                    {
                        this.state.list.map((value,key)=>{
                            return <li key={key}>{value.title}</li>
                        })
                    }   
                </ul>
            </div>
        );
    }
}

export default FetchJsonp;

代码下载：点这里

推荐阅读