初识react-native Featch和AsyncStorage

来源:互联网 发布:mysql 自动记录时间 编辑:程序博客网 时间:2024/06/06 07:05

Featch RN的一个网络请求库
第一: 设置一个视图

render() {        return (            <View style={styles.container}>                <NavigationBar                    title={'Feach'}                    statusBar={{                        backgroundColor: '#EE6363',                    }}                />                <Text//模拟一个get请求                    onPress={() => this.onLoad('http://rap.taobao.org/mockjsdata/13275/index_data.json')}                >获取数据</Text>                <Text>返回结果:{this.state.hot1}</Text>                <Text//这是模拟一个登陆请求                    onPress={() => this.onSubmit('https://...', {                        mobilePhone: '...',                        passwd: '...'                    })}                >登陸</Text>            </View>        )

onLoad()方法

constructor(props) {        super(props)        this.state = {            hot1: ''        }    }onLoad(url) {        fetch(url)            .then(response => response.json())            .then(hot => {                    this.setState({                        hot1: JSON.stringify(hot)                    })                }            )            .catch(error => {                this.setState({                    hot1: JSON.stringify(error)                })            })    }

POST请求

onSubmit(url, data) {        fetch(url, {            method: 'POST',            headers: {                'Accept': 'application/json',                'Content-Type': 'application/json',            },            body: JSON.stringify(data)        })            .then(response => response.json())            .then(result => {                this.setState({                    hot1: JSON.stringify(result)                })            })            .catch(error => {                this.setState({                    hot1: JSON.stringify(error)                })            })    }

很简单 也没什么介绍的
get post就是多了一个body体
接下来会请一下网络请求的简单封装
AsyncStorage:是一个react-native的数据存储组件:
简单的几个方法:
AsyncStorage.setItem等于保存一个KEY对应的数据
AsyncStorage.removeItem等于删除一个KEY对应的数据
AsyncStorage.getItem等于获取一个KEY对应的数据
1:先来讲下AsyncStorage.setItem 看下面代码

AsyncStorage.setItem(KEY, 'KEY', (error) => {    if (!error) {        RN2AndroidM.show("保存成功", RN2AndroidM.SHORT)    } else {        RN2AndroidM.show("保存失败", RN2AndroidM.SHORT)    }})

2:AsyncStorage.removeItem

AsyncStorage.removeItem(KEY, (error) => {    if (!error) {        RN2AndroidM.show("移除成功", RN2AndroidM.SHORT)    } else {        RN2AndroidM.show("移除失败", RN2AndroidM.SHORT)    }})

3:AsyncStorage.getItem

AsyncStorage.getItem(KEY, (error, result) => {  if (!error) {       if (result !== '' && result !== null) {           RN2AndroidM.show("取出的内容为:" + result, RN2AndroidM.SHORT)       } else {           RN2AndroidM.show("KEY不存在:", RN2AndroidM.SHORT)       }   } else {       RN2AndroidM.show("取出失败", RN2AndroidM.SHORT)   }})