ReactNative使用Fetch请求数据

在ReactNative使用Fetch，不需要安装，是一个全局的，直接使用即可

1、使用get请求获取数据

       <View style={styles.container}>
           <Text style={{fontSize:20}} onPress={()=>this.onLoad('http://rap.taobao.org/mockjsdata/11793/test')}>获取数据</Text>
           <Text>得到的数据：{this.state.result}</Text>
       </View>

当点击获取数据的时候请求网络地址,调用onLoad方法，代码如下：

    onLoad(url){
        fetch(url)
            .then(response=>response.json())
            .then(result=>{
                this.setState({
                    result:JSON.stringify(result)
                })
            })
            .catch(error=>{//捕获异常
                this.setState({
                    result:JSON.stringify(error)
                })
            })
    }

在这之前要先初始化result为一个空字符串

  constructor(props) {
        super(props);
        this.state = {result:''}
    }

运行截图：

2、使用POST提交数据，模拟登陆

  <View style={styles.container}>
       <Text style={{fontSize:20}} onPress={()=>this.onSubmit('http://rap.taobao.org/mockjsdata/11793/submit',{userName:"小明",password:"123456"})}>提交数据，模拟登陆</Text>
       <Text>返回结果：{this.state.result}</Text>
   </View>

点击提交数据，模拟登陆之后调用onSubmit方法：

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

1、使用Post提交的时候，fetch需要传递三个参数，第一个参数method,第二个参数header,第三个参数body(即传递的数据)
2、onSubmit方法传递两个参数，一个url,一个是要传递的数据data，运行截图：

3、对Fetch的一个封装

• 新建一个HttpUtil.js类

/**
 * Created by Dell on 2018/3/7.
 */
export  default class HttpUtil{
    static get(url){
        return new Promise((resolve,reject)=>{
            fetch(url)
                .then(response=>response.json())
                .then(result=>{
                    resolve(result)
                })
                .catch(error=>{
                    reject(error)
                })
        })
    }
    static post(url,data){
        return new Promise((resolve,reject)=>{
            fetch(url,{
                method:'POST',
                header:{
                    'Accept':"application/json",
                    'Content-Type':"application/json"
                },
                body:JSON.stringify(data)
            })
                .then(response=>response.json())
                .then(result=>{
                    resolve(result)
                })
                .catch(error=>{
                    reject(error)
                })
        })
    }
}

• 使用的时候直接导入该类

import HttpUtil from './HttpUtil'

调用get方法

    onLoad(url) {
        HttpUtil.get(url)
            .then(result => {
                this.setState({
                    result: JSON.stringify(result)
                })
            })
            .catch(error => {
                this.setState({
                    result: JSON.stringify(error)
                })
            })
    }

调用post方法

    onSubmit(url, data) {
        HttpUtil.post(url,data)
            .then(result => {
                this.setState({
                    result: JSON.stringify(result)
                })
            })
            .catch(error => {
                this.setState({
                    result: JSON.stringify(error)
                })
            })
    }

相比之下，在封装fetch工具类之后，代码减少了很多，这样代码维护起来也很方便