初识react-native Featch和AsyncStorage

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)
   }
})

初识react-native Featch和AsyncStorage

猜你喜欢