react——获取数据的4种方法ajax()$.ajax()fetch()axios

Posted 2020-10-06 LLLLily

 

 

第一种：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()

 

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