在上文总结ReactNative一些基础知识简单看了下官网的网络请求的方法，通过官网文档再结合项目中实际情况，就可以封装出一个RN的网络请求来。

接口

首先准备个接口，请求参数为

参数名	默认值	描述
methodName	ArticleTop	接口方法名
version	1.0	接口版本号
count		取多少条

返回的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网络请求，具体的基本参数处理和返回的数据样式需要结合项目的实际情况来更改！

ReactNative的网络请求封装

接口

请求

使用

猜你喜欢