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

1、使用get請求獲取數(shù)據(jù)

       <View style={styles.container}>
           <Text style={{fontSize:20}} onPress={()=>this.onLoad('http://rap.taobao.org/mockjsdata/11793/test')}>獲取數(shù)據(jù)</Text>
           <Text>得到的數(shù)據(jù)：{this.state.result}</Text>
       </View>

當點擊獲取數(shù)據(jù)的時候請求網絡地址,調用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提交數(shù)據(jù)，模擬登陸

  <View style={styles.container}>
       <Text style={{fontSize:20}} onPress={()=>this.onSubmit('http://rap.taobao.org/mockjsdata/11793/submit',{userName:"小明",password:"123456"})}>提交數(shù)據(jù)，模擬登陸</Text>
       <Text>返回結果：{this.state.result}</Text>
   </View>

點擊提交數(shù)據(jù)，模擬登陸之后調用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需要傳遞三個參數(shù)，第一個參數(shù)method,第二個參數(shù)header,第三個參數(shù)body(即傳遞的數(shù)據(jù))
2、onSubmit方法傳遞兩個參數(shù)，一個url,一個是要傳遞的數(shù)據(jù)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工具類之后，代碼減少了很多，這樣代碼維護起來也很方便