react——擷取資料的4種方法ajax()、$.ajax()、fetch()、axios

標籤：擷取   etc   方法   ios   style   bsp   json   資料   from   

 

 

第一種：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‘));

 

react——擷取資料的4種方法ajax()、$.ajax()、fetch()、axios