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