react--4 ways to get Data Ajax (), $.ajax (), Fetch (), Axios

The first type: 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);            varJSON = (NewFunction (' return ' +res))            ();        Console.log (JSON); })} render () {return<div> <input type= "button" value= "buttons" onclick={ This.get}/> </div>}}reactdom.render (<nav></nav&gt, Document.queryselector (' #app ')));

Second type: $.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= "buttons" onclick={ This.get}/> </div>}}reactdom.render (<nav></nav&gt, Document.queryselector (' #app ')));

Third type: 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= "buttons" onclick={ This.get}/> </div>}}reactdom.render (<nav></nav&gt, Document.queryselector (' #app ')));

Fourth type: 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= "buttons" onclick={ This.get}/> </div>}}reactdom.render (<nav></nav&gt, Document.queryselector (' #app ')));

react--4 ways to get Data Ajax (), $.ajax (), Fetch (), Axios