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開發平臺提供封裝好的插件，以便項目開發使用。react
另外，這些博文都是來源於我平常開發中的技術總結，在時間容許的狀況下，我會針對技術點分別分享iOS、Android兩個版本，若是有其餘技術點須要，可在文章後留言，我會盡全力幫助你們。這篇文章重點介紹網絡請求插件的開發與使用git
源碼Demo獲取方法
若是須要React Native網絡請求插件源碼demo，歡迎關注 【網羅開發】微信公衆號，回覆【65】即可領取。github
網羅天下方法，方便你我開發，全部文檔會持續更新，歡迎關注一塊兒成長！數據庫
二：實現思路分析
網絡請求插件是須要實現前端與服務端的數據交互，其中包括GET請求、POST請求、文件上傳、單/多張圖片上傳、文件下載等功能。這些功能將經過封裝後的方法暴漏出來，經過RN接口提供給Javascript開發使用。json
具體的實現思路以下：react-native
-
新建NetWorkPlugin類，實現RCTBridgeModule協議數組
-
添加RCT_EXPORT_MODULE()宏瀏覽器
-
添加React Native跟控制器緩存
-
聲明被JavaScript 調用的方法
-
導入AFNetworking請求庫
-
新建NetworkHelper類，封裝實現網絡請求功能
-
實現GET請求
-
實現POST請求
-
實現文件上傳
-
實現單/多張圖片上傳
-
實現文件下載
-
Javascript調用瀏覽器方法
三：實現源碼分析
1. 新建NetWorkPlugin類，實現RCTBridgeModule協議
新建繼承NSObject的NetWorkPlugin類，並實現RCTBridgeModule協議
// NetWorkPlugin.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <UIKit/UIKit.h>
@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/RCTUtils.h>
複製代碼
引入<React/RCTUtils.h>以後，在視圖初始化或者顯示的時候，按照以下方法調用便可
UIViewController *vc = RCTPresentedViewController();
複製代碼
4. 聲明被JavaScript 調用的方法
React Native須要明確的聲明要給 JavaScript 導出的方法，不然 React Native 不會導出任何方法。下面經過舉例來展現聲明的方法，經過RCT_EXPORT_METHOD()宏來實現：
// NetWorkPlugin.m
#import "NetWorkPlugin.h"
#import <React/RCTUtils.h>
@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.count; i++) {
NSString *name = names[i];
NSString *filePath = filePaths[i];
[formData appendPartWithFileURL:[NSURL fileURLWithPath:filePath] name:name error:&error];
}
(failure && error) ? failure(error) : nil;
} progress:^(NSProgress * _Nonnull uploadProgress) {
//上傳進度
dispatch_sync(dispatch_get_main_queue(), ^{
progress ? progress(uploadProgress) : nil;
});
} 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;
}
複製代碼
10. 實現單/多張圖片上傳
聲明單/多張圖片上傳方法:
/**
*
* @param URL 請求地址
* @param parameters 請求參數
* @param name 圖片對應服務器上的字段
* @param images 圖片數組
* @param fileNames 圖片文件名數組, 能夠爲nil, 數組內的文件名默認爲當前日期時間"yyyyMMddHHmmss"
* @param imageScale 圖片文件壓縮比 範圍 (0.f ~ 1.f)
* @param imageType 圖片文件的類型,例:png、jpg(默認類型)....
* @param progress 上傳進度信息
* @param success 請求成功的回調
* @param failure 請求失敗的回調
*
* @return 返回的對象可取消請求,調用cancel方法
*/
+ (__kindof 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;
複製代碼
圖片通過等比壓縮後獲得的二進制文件，默認圖片的文件名, 若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.count; i++) {
NSData *imageData = UIImageJPEGRepresentation(images[i], imageScale ?: 1.f);
NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
formatter.dateFormat = @"yyyyMMddHHmmss";
NSString *str = [formatter stringFromDate:[NSDate date]];
NSString *imageFileName = NSStringFormat(@"%@%ld.%@",str,i,imageType?:@"jpg");
[formData appendPartWithFileData:imageData
name:name
fileName:fileNames ? NSStringFormat(@"%@.%@",fileNames[i],imageType?:@"jpg") : imageFileName
mimeType:NSStringFormat(@"image/%@",imageType ?: @"jpg")];
}
} progress:^(NSProgress * _Nonnull uploadProgress) {
dispatch_sync(dispatch_get_main_queue(), ^{
progress ? progress(uploadProgress) : nil;
});
} 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;
}
複製代碼
11. 實現文件下載
聲明文件下載方法:
/**
*
* @param URL 請求地址
* @param fileDir 文件存儲目錄(默認存儲目錄爲Download)
* @param progress 文件下載的進度信息
* @param success 下載成功的回調(回調參數filePath:文件的路徑)
* @param failure 下載失敗的回調
*
* @return 返回NSURLSessionDownloadTask實例，可用於暫停繼續，暫停調用suspend方法，開始下載調用resume方法
*/
+ (__kindof NSURLSessionTask *)downloadWithURL:(NSString *)URL
fileDir:(NSString *)fileDir
progress:(HttpProgress)progress
success:(void(^)(NSString *filePath))success
failure:(HttpRequestFailed)failure;
複製代碼
在下載過程當中能夠獲取到下載進度，下載流程爲：緩存目錄拼接完成，打開文件管理器，建立Download目錄，拼接文件路徑，返回文件位置的URL路徑。文件下載具體的方法實現以下：
+ (NSURLSessionTask *)downloadWithURL:(NSString *)URL
fileDir:(NSString *)fileDir
progress:(HttpProgress)progress
success:(void(^)(NSString *))success
failure:(HttpRequestFailed)failure {
NSString *AllReplaceURL = [self replaceURL:URL];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:AllReplaceURL]];
__block NSURLSessionDownloadTask *downloadTask = [_sessionManager downloadTaskWithRequest:request progress:^(NSProgress * _Nonnull downloadProgress) {
dispatch_sync(dispatch_get_main_queue(), ^{
progress ? progress(downloadProgress) : nil;
});
} destination:^NSURL * _Nonnull(NSURL * _Nonnull targetPath, NSURLResponse * _Nonnull response) {
NSString *downloadDir = [[NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:fileDir ? fileDir : @"Download"];
NSFileManager *fileManager = [NSFileManager defaultManager];
[fileManager createDirectoryAtPath:downloadDir withIntermediateDirectories:YES attributes:nil error:nil];
NSString *filePath = [downloadDir stringByAppendingPathComponent:response.suggestedFilename];
return [NSURL fileURLWithPath:filePath];
} completionHandler:^(NSURLResponse * _Nonnull response, NSURL * _Nullable filePath, NSError * _Nullable error) {
[[self allSessionTask] removeObject:downloadTask];
if(failure && error) {failure(error) ; return ;};
success ? success(filePath.absoluteString /** NSURL->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(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});
複製代碼
但願能夠幫助你們，若有問題可加QQ技術交流羣: 668562416
若是哪裏有什麼不對或者不足的地方，還望讀者多多提意見或建議
如需轉載請聯繫我，通過受權方可轉載，謝謝
本篇已同步到我的博客：FBY展菲
歡迎關注個人公衆號：網羅開發
相關文章
- 1. react-native網絡請求fetch
- 2. React-native fetch請求網絡
- 3. React Native Fetch網絡請求
- 4. Flutter網絡請求插件dio封裝
- 5. react-native(Fetch網絡請求數據)
- 6. 【React Native開發】 - fetch網絡請求
- 7. React Native 之 網絡請求 fetch
- 8. React-Native 之 網絡請求 fetch
- 9. React-Native網絡請求的總結
- 10. React Native 網絡請求封裝：使用Promise封裝fetch請求
- 更多相關文章...
- • HTTP 請求方法 - HTTP 教程
- • Maven 插件 - Maven教程
- • IntelliJ IDEA安裝代碼格式化插件
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
歡迎關注本站公眾號,獲取更多信息
