博客> iOS--React Native网络请求插件
iOS--React Native网络请求插件
2019-05-21 03:51 评论:0 阅读:147 FBY展菲
ios 网络请求 React Native

一:介绍

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

在React Native移动平台项目开发中,除了React Native 提供的封装好的部分插件和原声组建外,在实际的项目中还需要使用到很多其他的插件,比如网络请求、数据库、相机、相册、通讯录、视频播放器、浏览器、蓝牙连接、图片处理、消息推送、地图、统计、埋点等等APP开发中需要用到的功能,都为IDE开发平台提供封装好的插件,以便项目开发使用。

另外,这些博文都是来源于我日常开发中的技术总结,在时间允许的情况下,我会针对技术点分别分享iOS、Android两个版本,如果有其他技术点需要,可在文章后留言,我会尽全力帮助大家。这篇文章重点介绍网络请求插件的开发与使用

二:实现思路分析

网络请求插件是需要实现前端与服务端的数据交互,其中包括GET请求、POST请求、文件上传、单/多张图片上传、文件下载等功能。这些功能将通过封装后的方法暴漏出来,通过RN接口提供给Javascript开发使用。

具体的实现思路如下:

  1. 新建NetWorkPlugin类,实现RCTBridgeModule协议

  2. 添加RCT_EXPORT_MODULE()宏

  3. 添加React Native跟控制器

  4. 声明被JavaScript 调用的方法

  5. 导入AFNetworking请求库

  6. 新建NetworkHelper类,封装实现网络请求功能

  7. 实现GET请求

  8. 实现POST请求

  9. 实现文件上传

  10. 实现单/多张图片上传

  11. 实现文件下载

  12. Javascript调用浏览器方法

三:实现源码分析

1. 新建NetWorkPlugin类,实现RCTBridgeModule协议

新建继承NSObject的NetWorkPlugin类,并实现RCTBridgeModule协议

// NetWorkPlugin.h
#import <Foundation>
#import <React>
#import <UIKit>
@interface NetWorkPlugin : NSObject<RCTBridgeModule>
@end
2. 添加RCT_EXPORT_MODULE()宏

为了实现RCTBridgeModule协议,NetWorkPlugin的类需要包含RCT_EXPORT_MODULE()宏。 并在这个宏里面添加一个参数“NetWorkPlugin”用来指定在 JavaScript 中访问这个模块的名字。 如果你不指定,默认就会使用这个 Objective-C 类的名字。 如果类名以 RCT 开头,则 JavaScript 端引入的模块名会自动移除这个前缀。

// NetWorkPlugin.m
#import "NetWorkPlugin.h"
@implementation NetWorkPlugin
RCT_EXPORT_MODULE(NetWorkPlugin);
@end
3. 添加React Native跟控制器

如果不添加React Native跟控制器,view将不能正常显示出来,实现方法如下:

// NetWorkPlugin.m
#import <React>

引入之后,在视图初始化或者显示的时候,按照如下方法调用即可

UIViewController *vc = RCTPresentedViewController();
4. 声明被JavaScript 调用的方法

React Native需要明确的声明要给 JavaScript 导出的方法,否则 React Native 不会导出任何方法。下面通过举例来展示声明的方法,通过RCT_EXPORT_METHOD()宏来实现:

// NetWorkPlugin.m
#import "NetWorkPlugin.h"
#import <React>
@implementation NetWorkPlugin
RCT_EXPORT_MODULE(NetWorkPlugin);
RCT_EXPORT_METHOD(post:(NSDictionary *)arguments
                  withCompletionHandler:(RCTResponseSenderBlock)completion
                  failureHandler:(RCTResponseSenderBlock)failure)
{
    NSLog(@"POST网络请求执行方法");
}
@end
5. 导入AFNetworking请求库

网络请求使用的第三方库是AFNetworking,这个库很常见,也比较常用,就不做过多的描述,可手动导入也可使用cocoapods自动导入,导入之后在.m文件中引入头文件。

6. 新建NetworkHelper类,封装实现网络请求功能

新建继承NSObject的NetworkHelper类,定义枚举类型来判断网络状态:

typedef NS_ENUM(NSUInteger, NetworkStatusType) {
    /** 未知网络*/
    NetworkStatusUnknown,
    /** 无网络*/
    NetworkStatusNotReachable,
    /** 手机网络*/
    NetworkStatusReachableViaWWAN,
    /** WIFI网络*/
    NetworkStatusReachableViaWiFi
};

定义网络状态的Block

typedef void(^NetworkStatus)(NetworkStatusType status);

实时获取网络状态,通过Block回调实时获取(此方法可多次调用)

+ (void)networkStatusWithBlock:(NetworkStatus)networkStatus;
7. 实现GET请求

声明GET请求方法:

/**
 *
 *  @param URL        请求地址
 *  @param parameters 请求参数
 *  @param success    请求成功的回调
 *  @param failure    请求失败的回调
 *
 *  @return 返回的对象可取消请求,调用cancel方法
 */
+ (__kindof NSURLSessionTask *)GET:(NSString *)URL
                        parameters:(id)parameters
                           success:(HttpRequestSuccess)success
                           failure:(HttpRequestFailed)failure;
8. 实现POST请求

声明POST请求方法:

/**
 *
 *  @param URL        请求地址
 *  @param parameters 请求参数
 *  @param success    请求成功的回调
 *  @param failure    请求失败的回调
 *
 *  @return 返回的对象可取消请求,调用cancel方法
 */
+ (__kindof NSURLSessionTask *)POST:(NSString *)URL
                         parameters:(id)parameters
                            success:(HttpRequestSuccess)success
                            failure:(HttpRequestFailed)failure;

POST请求具体的方法实现如下:

+ (NSURLSessionTask *)POST:(NSString *)URL
                parameters:(id)parameters
                   success:(HttpRequestSuccess)success
                   failure:(HttpRequestFailed)failure {
    NSString *AllReplaceURL = [self replaceURL:URL];
    [self setAFHTTPSessionManagerProperty:^(AFHTTPSessionManager *sessionManager) {
        [sessionManager.requestSerializer setQueryStringSerializationWithBlock:^NSString * _Nonnull(NSURLRequest * _Nonnull request, id  _Nonnull parameters, NSError * _Nullable __autoreleasing * _Nullable error) {
            return parameters;
        }];
    }];
    NSURLSessionTask *sessionTask = [_sessionManager POST:AllReplaceURL parameters:parameters progress:^(NSProgress * _Nonnull uploadProgress) {

    } success:^(NSURLSessionDataTask * _Nonnull task, id  _Nullable responseObject) {

        if (_isOpenLog) {NSLog(@"responseObject = %@",[self jsonToString:responseObject]);}
        [[self allSessionTask] removeObject:task];
        success ? success(responseObject) : nil;

    } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {

        if (_isOpenLog) {NSLog(@"error = %@",error);}
        [[self allSessionTask] removeObject:task];
        failure ? failure(error) : nil;

    }];
    sessionTask ? [[self allSessionTask] addObject:sessionTask] : nil ;
    return sessionTask;
}
9. 实现文件上传

声明文件上传方法:

/**
 * 
 *  @param URL        请求地址
 *  @param parameters 请求参数
 *  @param names       文件对应服务器上的字段
 *  @param filePaths   文件本地的沙盒路径
 *  @param progress   上传进度信息
 *  @param success    请求成功的回调
 *  @param failure    请求失败的回调
 *
 *  @return 返回的对象可取消请求,调用cancel方法
 */
+ (__kindof NSURLSessionTask *)uploadFileWithURL:(NSString *)URL
                                      parameters:(id)parameters
                                            names:(NSArray<NSString> *)names
                                        filePaths:(NSArray<NSString> *)filePaths
                                        progress:(HttpProgress)progress
                                         success:(HttpRequestSuccess)success
                                         failure:(HttpRequestFailed)failure;

文件上传具体的方法实现如下:

+ (NSURLSessionTask *)uploadFileWithURL:(NSString *)URL
                             parameters:(id)parameters
                                  names:(NSArray<NSString> *)names
                              filePaths:(NSArray<NSString> *)filePaths
                               progress:(HttpProgress)progress
                                success:(HttpRequestSuccess)success
                                failure:(HttpRequestFailed)failure {

    NSString *AllReplaceURL = [self replaceURL:URL];

    NSURLSessionTask *sessionTask = [_sessionManager POST:AllReplaceURL parameters:parameters constructingBodyWithBlock:^(id<AFMultipartFormData>  _Nonnull formData) {
        NSError *error = nil;
        for (NSUInteger i = 0; i < filePaths xss=removed xss=removed xss=removed xss=removed> *)images
                                         fileNames:(NSArray<NSString> *)fileNames
                                        imageScale:(CGFloat)imageScale
                                         imageType:(NSString *)imageType
                                          progress:(HttpProgress)progress
                                           success:(HttpRequestSuccess)success
                                           failure:(HttpRequestFailed)failure;

图片经过等比压缩后得到的二进制文件,默认图片的文件名, 若fileNames为nil就使用,单/多张图片上传具体的方法实现如下:

+ (NSURLSessionTask *)uploadImagesWithURL:(NSString *)URL
                               parameters:(id)parameters
                                     name:(NSString *)name
                                   images:(NSArray<UIImage> *)images
                                fileNames:(NSArray<NSString> *)fileNames
                               imageScale:(CGFloat)imageScale
                                imageType:(NSString *)imageType
                                 progress:(HttpProgress)progress
                                  success:(HttpRequestSuccess)success
                                  failure:(HttpRequestFailed)failure {

    NSString *AllReplaceURL = [self replaceURL:URL];

    NSURLSessionTask *sessionTask = [_sessionManager POST:AllReplaceURL parameters:parameters constructingBodyWithBlock:^(id<AFMultipartFormData>  _Nonnull formData) {

        for (NSUInteger i = 0; i < images xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed>NSString*/) : nil;

    }];
    [downloadTask resume];
    downloadTask ? [[self allSessionTask] addObject:downloadTask] : nil ;

    return downloadTask;
}
12. Javascript调用浏览器方法

现在从 Javascript 里可以这样调用这个方法:

import { NativeModules } from "react-native";
const NetWorkPlugin = NativeModules.NetWorkPlugin;
NetworkPlugin.post({url:"http://192.168.1.1:8080/ApiSystem/login",params:{name:"15842137500",login_type:"0",password:"000000"},headers:{}},(msg) => {
                                         Alert.alert&#40;JSON.stringify(msg&#41;);

                                         },(err) => {
                                         Alert.alert&#40;JSON.stringify(err&#41;);
                                         });

源码Demo获取方法

如果需要React Native网络请求插件源码demo,欢迎关注 【网罗开发】微信公众号,回复【65】便可领取。 网罗天下方法,方便你我开发,所有文档会持续更新,欢迎关注一起成长!

希望可以帮助大家,如有问题可加QQ技术交流群: 668562416

如果哪里有什么不对或者不足的地方,还望读者多多提意见或建议

如需转载请联系我,经过授权方可转载,谢谢


 qrcode_for_gh_d6198f9bed87_430-3.jpg

收藏
0
sina weixin mail 回到顶部