react——获取数据ajax()、$.ajax()、fetch()、axios

 

 

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可能会存在问题

（大概是10.2.x？？记不清了，衰～是在做微信公众号开发时候遇到的问题～不排除是x5内核所致啊，总之当初把fetch换成axios就好了）。

 

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')
);