NetworkingModule為JS端提供了發送網絡請求的接口。在Native層，React Native 依賴了okttp網絡庫。主要API 包括以下三個：
- sendRequest：發送網絡請求
- abortRequest：中斷網絡請求
- clearCookies ：清除cookie
其中最重要的的是sendRequest方法，下面我們進行詳細分析。
NetworkingModule創建時初始化了默認的OkHttpClient，并在初始化時設置了cookie管理和存儲策略：
public static OkHttpClient createClient() {
// No timeouts by default
OkHttpClient.Builder client = new OkHttpClient.Builder()
.connectTimeout(0, TimeUnit.MILLISECONDS)
.readTimeout(0, TimeUnit.MILLISECONDS)
.writeTimeout(0, TimeUnit.MILLISECONDS)
.cookieJar(new ReactCookieJarContainer());
return enableTls12OnPreLollipop(client).build();
}
public void initialize() {
// cookie管理和存儲策略
mCookieJarContainer.setCookieJar(new JavaNetCookieJar(mCookieHandler));
}
默認情況下使用webview的CookieManager來管理cookie。首先看一下暴露給JS端的網絡請求方法sendRequest：
public void sendRequest(
final ExecutorToken executorToken, //用于保證JS調用Native API時返回結果給對應的JS VM
String method,
String url,
final int requestId,
ReadableArray headers,
ReadableMap data,
final String responseType,
final boolean useIncrementalUpdates,
int timeout) {
Request.Builder requestBuilder = new Request.Builder().url(url);
if (requestId != 0) {
requestBuilder.tag(requestId);
}
final RCTDeviceEventEmitter eventEmitter = getEventEmitter(executorToken);
OkHttpClient.Builder clientBuilder = mClient.newBuilder();
// 如果JS端監聽了下載進度，則client加入ProgressResponseBody對返回結果攔截
if (useIncrementalUpdates) {
clientBuilder.addNetworkInterceptor(new Interceptor() {
@Override
public Response intercept(Interceptor.Chain chain) throws IOException {
Response originalResponse = chain.proceed(chain.request());
ProgressResponseBody responseBody = new ProgressResponseBody(
originalResponse.body(),
new ProgressListener() {
long last = System.nanoTime();
@Override
public void onProgress(long bytesWritten, long contentLength, boolean done) {
long now = System.nanoTime();
if (!done && !shouldDispatch(now, last)) {
return;
}
if (responseType.equals("text")) {
// For 'text' responses we continuously send response data with progress info to
// JS below, so no need to do anything here.
return;
}
ResponseUtil.onDataReceivedProgress(
eventEmitter,
requestId,
bytesWritten,
contentLength);
last = now;
}
});
return originalResponse.newBuilder().body(responseBody).build();
}
});
}
// 以調用時的timeout為準
if (timeout != mClient.connectTimeoutMillis()) {
clientBuilder.readTimeout(timeout, TimeUnit.MILLISECONDS);
}
OkHttpClient client = clientBuilder.build();
// 構建Header
Headers requestHeaders = extractHeaders(headers, data);
if (requestHeaders == null) {
ResponseUtil.onRequestError(eventEmitter, requestId, "Unrecognized headers format", null);
return;
}
String contentType = requestHeaders.get(CONTENT_TYPE_HEADER_NAME);
String contentEncoding = requestHeaders.get(CONTENT_ENCODING_HEADER_NAME);
requestBuilder.headers(requestHeaders);
// 構建body
if (data == null) {
requestBuilder.method(method, RequestBodyUtil.getEmptyBody(method));
} else if (data.hasKey(REQUEST_BODY_KEY_STRING)) {
if (contentType == null) {
ResponseUtil.onRequestError(
eventEmitter,
requestId,
"Payload is set but no content-type header specified",
null);
return;
}
String body = data.getString(REQUEST_BODY_KEY_STRING);
MediaType contentMediaType = MediaType.parse(contentType);
if (RequestBodyUtil.isGzipEncoding(contentEncoding)) {
RequestBody requestBody = RequestBodyUtil.createGzip(contentMediaType, body);
if (requestBody == null) {
ResponseUtil.onRequestError(eventEmitter, requestId, "Failed to gzip request body", null);
return;
}
requestBuilder.method(method, requestBody);
} else {
requestBuilder.method(method, RequestBody.create(contentMediaType, body));
}
} else if (data.hasKey(REQUEST_BODY_KEY_BASE64)) {
if (contentType == null) {
ResponseUtil.onRequestError(
eventEmitter,
requestId,
"Payload is set but no content-type header specified",
null);
return;
}
String base64String = data.getString(REQUEST_BODY_KEY_BASE64);
MediaType contentMediaType = MediaType.parse(contentType);
requestBuilder.method(
method,
RequestBody.create(contentMediaType, ByteString.decodeBase64(base64String)));
} else if (data.hasKey(REQUEST_BODY_KEY_URI)) {
if (contentType == null) {
ResponseUtil.onRequestError(
eventEmitter,
requestId,
"Payload is set but no content-type header specified",
null);
return;
}
String uri = data.getString(REQUEST_BODY_KEY_URI);
InputStream fileInputStream =
RequestBodyUtil.getFileInputStream(getReactApplicationContext(), uri);
if (fileInputStream == null) {
ResponseUtil.onRequestError(
eventEmitter,
requestId,
"Could not retrieve file for uri " + uri,
null);
return;
}
requestBuilder.method(
method,
RequestBodyUtil.create(MediaType.parse(contentType), fileInputStream));
} else if (data.hasKey(REQUEST_BODY_KEY_FORMDATA)) {
if (contentType == null) {
contentType = "multipart/form-data";
}
ReadableArray parts = data.getArray(REQUEST_BODY_KEY_FORMDATA);
MultipartBody.Builder multipartBuilder =
constructMultipartBody(executorToken, parts, contentType, requestId);
if (multipartBuilder == null) {
return;
}
requestBuilder.method(
method,
RequestBodyUtil.createProgressRequest(
multipartBuilder.build(),
new ProgressListener() {
long last = System.nanoTime();
@Override
public void onProgress(long bytesWritten, long contentLength, boolean done) {
long now = System.nanoTime();
if (done || shouldDispatch(now, last)) {
ResponseUtil.onDataSend(eventEmitter, requestId, bytesWritten, contentLength);
last = now;
}
}
}));
} else {
// Nothing in data payload, at least nothing we could understand anyway.
requestBuilder.method(method, RequestBodyUtil.getEmptyBody(method));
}
// 開始請求
addRequest(requestId);
client.newCall(requestBuilder.build()).enqueue(
new Callback() {
@Override
public void onFailure(Call call, IOException e) {
if (mShuttingDown) {
return;
}
removeRequest(requestId);
ResponseUtil.onRequestError(eventEmitter, requestId, e.getMessage(), e);
}
@Override
public void onResponse(Call call, Response response) throws IOException {
if (mShuttingDown) {
return;
}
removeRequest(requestId);
// Before we touch the body send headers to JS
ResponseUtil.onResponseReceived(
eventEmitter,
requestId,
response.code(),
translateHeaders(response.headers()),
response.request().url().toString());
ResponseBody responseBody = response.body();
try {
// If JS wants progress updates during the download, and it requested a text response,
// periodically send response data updates to JS.
if (useIncrementalUpdates && responseType.equals("text")) {
readWithProgress(eventEmitter, requestId, responseBody);
ResponseUtil.onRequestSuccess(eventEmitter, requestId);
return;
}
// Otherwise send the data in one big chunk, in the format that JS requested.
String responseString = "";
if (responseType.equals("text")) {
responseString = responseBody.string();
} else if (responseType.equals("base64")) {
responseString = Base64.encodeToString(responseBody.bytes(), Base64.NO_WRAP);
}
ResponseUtil.onDataReceived(eventEmitter, requestId, responseString);
ResponseUtil.onRequestSuccess(eventEmitter, requestId);
} catch (IOException e) {
ResponseUtil.onRequestError(eventEmitter, requestId, e.getMessage(), e);
}
}
});
}
請求結果返回后，Native通過RCTDeviceEventEmitter將結果傳遞給JS端：
public static void onDataReceived(
RCTDeviceEventEmitter eventEmitter,
int requestId,
String data) {
WritableArray args = Arguments.createArray();
args.pushInt(requestId);
args.pushString(data);
eventEmitter.emit("didReceiveNetworkData", args);
}
在JS端進行監聽即可獲取到請求結果。同樣，JS為了簡化業務代碼，使用RCTNetworking進行了進一步封裝。
