React获取数据的四种方式

Dear 丶 2022-04-10 13:29 484阅读 0赞

## ajax() ##

import React from 'react';
    import ReactDom from 'react-dom';
    import ajax from './tool.js';
    
    class Nav extends React.Component{
        constructor(){
            super();
            this.state = {
                arr: {}
            };
            this.get = this.get.bind(this);
        }
        get(){
            ajax('./data/data.json',function(res){
                // var json = JSON.parse(res);
                var json = (new Function('return' + res))();
                console.log(json);
            })
        }
        render(){
            return <div>
                <input type="button" value="按钮" onClick={this.get}/>
            </div>
        }
    }
    
    
    ReactDom.render(
        <Nav></Nav>,
        document.querySelector('#app')
    );

## $.ajax() ##

import React from 'react';
    import ReactDom from 'react-dom';
    import $ from 'jquery';
    class Nav extends React.Component{
        constructor(){
            super();
            this.state = {
                arr: {}
            };
            this.get = this.get.bind(this);
        }
        get(){
            $.ajax({
                type:'get',
                url:'data/data.json',
                success:function(res){
                    console.log(res);
                }
            })
        }
        render(){
            return <div>
                <input type="button" value="按钮" onClick={this.get}/>
            </div>
        }
    }
    
    
    ReactDom.render(
        <Nav></Nav>,
        document.querySelector('#app')
    );

## fetch()--------------fetch在ios10.x.x可能会存在问题 ##

import React from 'react';
    import ReactDom from 'react-dom';
    import $ from 'jquery';
    
    class Nav extends React.Component{
        constructor(){
            super();
            this.state = {
                arr: {}
            };
            this.get = this.get.bind(this);
        }
        get(){
            fetch('data/word.txt').then((res)=>{
                if(res.ok){
                    res.text().then((data)=>{
                        console.log(data);
                    })
                }
            }).catch((res)=>{
                console.log(res.status);
            });
        }
        render(){
            return <div>
                <input type="button" value="按钮" onClick={this.get}/>
            </div>
        }
    }
    
    
    ReactDom.render(
        <Nav></Nav>,
        document.querySelector('#app')
    );

## axios ##

import React from 'react';
    import ReactDom from 'react-dom';
    import axios from 'axios';
    
    class Nav extends React.Component{
        constructor(){
            super();
            this.state = {
                arr: {}
            };
            this.get = this.get.bind(this);
        }
        get(){
            axios.get('./data/data.json').then((res)=>{
                console.log(res.data);
                console.log(res.data[3]);
            }).catch((err)=>{
                console.log(err.status);
            })
        }
        render(){
            return <div>
                <input type="button" value="按钮" onClick={this.get}/>
            </div>
        }
    }
    
    
    ReactDom.render(
        <Nav></Nav>,
        document.querySelector('#app')
    );