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

转载 (原文地址) 小Q 教程 react 64阅读 2018-10-31 16:18:51 举报

https://www.cnblogs.com/LLLLily/p/7492118.html

第一种: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')
);

复制代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复