为了账号安全,请及时绑定邮箱和手机立即绑定

请问在React 之中fetch 应该怎么写?

/ 猿问

请问在React 之中fetch 应该怎么写?

慕运维1137616 2019-07-24 15:11:32

React 之中fetch 应该怎么写


查看完整描述

3 回答

?
慕村9548890

1.登陆是我们要用fetch进行登陆验证后,跳转,下面讲一下具体操作:

首先,引入需要的库


向左转|向右转


2.在login页面我们需要拿到用户输入的name和password,如下:

在1部分是记住密码,保存在本地存储localStorage中;

在2部分是调用fetch函数进行数据传输;

在3部分是当打开这个页面时,如果有本地存储的值,及选了记住密码之类的,就在页面渲染


向左转|向右转


3.在fetch函数中我们需要做什么呢?提交url地址,和需要的参数,如果成功就console一下返回值,


向左转|向右转


4.最终结果,如下:


向左转|向右转




查看完整回答
反对 回复 2019-07-28
?
慕桂英3389331

RN自带了一个非常优雅的网络操作库fetch,下面的这个例子从gankio的接口拿到了美女图片的url然后通过state 传给列表组件,列表里返回图片组件显示图片。网络数据获取方法写在componentDidMount中,这个方法是组件生命周期中需要调用的一个方法。
class AwesomeProject extends Component {// 初始化模拟数据

constructor(props) {
super(props);

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {r1 !== r2}});
this.state = {
dataSource: ds,
load:false,
text:''
};
}

//耗时操作放在这里面
componentDidMount(){
this.getNet();
}

getNet(){
fetch('http://gank.io/api/search/query/listview/category/福利/count/10/page/1')//请求地址
.then((response) => response.json())//取数据
.then((responseText) => {//处理数据
//通过setState()方法重新渲染界面
this.setState({
//改变加载ListView
load: true,
//设置数据源刷新界面
dataSource: this.state.dataSource.cloneWithRows(responseText.results),
})

})
.catch((error) => {
console.warn(error);
}).done();
}

render() {
if(this.state.load){
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData)=>
<View>
<Image
style={{ width: 400, height: 250, marginTop: 5 }}
source={{uri:rowData.url}}/>
</View>}
/>
</View>
);
} else{
return(
<View>
<Text>loading......</Text>
</View>
);
}
}
}
这里使用的是fetch的一个参数的方法,参数自然就是url,默认请求方式是GET,还有两个参数的方法,第二个参数是一组请求参数。执行fetch后返回一个Promise对象,通过then继续获取数据,这里response.json表示获取json格式的数据,也可以用text获取纯文本的数据。
获取到json后接下来就是解析json,这里的json里面有一个result数组,直接拿出来作为数据源的数据传入即可。



查看完整回答
反对 回复 2019-07-28
?
森栏

actions:

export const getMenu = () => { return async (dispatch) => { let msg = await fetch('data/nodes',{
method: 'POST', //body: JSON.stringify({"aa":"aa"}),
header: {'content-type':'application/json; charset=utf-8'}
}).then((res)=>res.json()); var state = { nodes: msg };
dispatch({ type: 'INIT',
state
});
};
}

查看完整回答
反对 回复 2019-07-28

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信