在上文總結ReactNative一些基礎知識簡單看了下官網的網路請求的方法，通過官網文件再結合專案中實際情況，就可以封裝出一個RN的網路請求來。

介面

首先準備個介面，請求引數為

返回的Json樣式大概為

{
    "code": 0,
    "msg": "success",
    "version": "1.0",
    "data": {
    }
}

請求

talk is cheap ，show me the code

import {
        Alert,
    } from 'react-native';
//這裡定義介面請求的域名
const BASE_URL =  'http://域名/api/';
/**
 *  method 請求介面名
 *  params 請求引數資料物件
 */
const xhr = (method,params) => {
    params['method'] = method;
      //基本引數version，還可以放些其他的基本引數
    params['version'] = '1.0'
 
;
      //結合Promise來使用，可以非同步處理，無需再寫cb；並且可以結合ES6,的then鏈式呼叫，使用方便
    return new Promise((resolve,reject) => {
        fetch(BASE_URL,{
            method:'POST',//定義請求方式，POST、GET、PUT等
            headers:{
                'Accept': 'application/json', // 提交引數的資料方式,這裡以json的形式
                'Content-Type'
 
: 'application/json',
            },
            body:JSON.stringify(params)//提交的引數
        })
        .then((response) => response.json())//資料解析的方式，json解析
        .then((responseJson) => {
            var code = responseJson.code;//返回直接對映完的資料，可以直接使用
            switch(code){//做一些簡單的處理
                case 0 : {
                    resolve(responseJson)
                    break;
                };
                case 10001 : {
                    Alert.alert('提示','登入過期或在其他裝置登入，是否重新登入',
                        [
                          {text: '取消', onPress: () => console.log('Cancel Pressed!')},
                    {text: '登入', onPress: () => console.log('OK Pressed!')},
                  ]
                    );
                    break;
                };
                default: {
                    Alert.alert('提示',responseJson.msg,
                    [
                        {text: '確定', onPress: () => console.log('OK Pressed!')},
                    ])
                }
            }
        })
        .catch((error) => {
            console.error(error);
        });
    });
}

module.exports = xhr

fetch傳入的具體的一些屬性

• method：請求方式（GET、POST、PUT等）。
• headers：需要用到 Headers 物件使用這個引數。
• body：需要傳送的資料
• mode：跨域設定(cors, no-cors, same-origin)
• cache：快取選項（default, no-store, reload, no-cache, force-cache, or only-if-cached）

headers
關於headers傳引數是json格式的請求方法如上

headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }

傳引數是key value的方式的使用方法

headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: 'key1=value1&key2=value2'

response 物件可以有如下幾種解析方式

• json()
• text()
• formData()

使用

import xhr from '../net/xhr';

class AppServices {
    ArticleTop(method = 'ArticleTop'){
        var params = {
            'count':'10'
        }
        return xhr(method,params)
    }
}

module.exports = new AppServices();

把使用的介面都定義在AppServices裡面，定義方式如上。

接下來就可以呼叫請求，請求發起可以放在元件生命週期裡面的componentDidMount方法，這個方法是在render方法呼叫完之後執行的，也就是元件渲染完之後發起網路請求

import appServices from '../net/appServices';
componentDidMount(){
      appServices.ArticleTop().then( function (res) {
        //this.setState方法來更新元件的State資料了
          console.log('res===='+ JSON.stringify(res));
      })
  }

這樣就封裝了一個簡單的RN網路請求，具體的基本引數處理和返回的資料樣式需要結合專案的實際情況來更改！