摘要：內(nèi)置了三種發(fā)送網(wǎng)絡(luò)請(qǐng)求的方式和。轉(zhuǎn)換二進(jìn)制為發(fā)送到目前為止，不能發(fā)送非序列化的數(shù)據(jù)，所以，要發(fā)送二進(jìn)制數(shù)據(jù)，采用編碼的字符串是個(gè)不錯(cuò)的選擇。在最新版本的層也已經(jīng)支持協(xié)議來(lái)傳輸二進(jìn)制文件，但是，相應(yīng)的原生平臺(tái)的網(wǎng)絡(luò)模塊暫時(shí)還不支持。

端）

本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者及出處

在使用React Native開(kāi)發(fā)中，我們熟練的采用JavaScript的方式發(fā)送請(qǐng)求的方式發(fā)送一個(gè)請(qǐng)求到服務(wù)端，但是處理這個(gè)請(qǐng)求的過(guò)程其實(shí)和處理Web應(yīng)用中發(fā)送的請(qǐng)求的過(guò)程是不一樣的。因?yàn)樘幚磉@個(gè)請(qǐng)求的目標(biāo)不是瀏覽器，而是嵌入這個(gè)應(yīng)用的原生操作系統(tǒng)。

在處理React Native的請(qǐng)求時(shí)，分為兩部分：一部分是JavaScript的運(yùn)行環(huán)境，另一部分是嵌入JavaScript的Native（即原生Android和IOS）運(yùn)行環(huán)境。React Native內(nèi)置了三種發(fā)送網(wǎng)絡(luò)請(qǐng)求的方式：fetch, XMLHttpRequest 和 WebSocket。但是React Native的運(yùn)行環(huán)境和Web應(yīng)用的運(yùn)行環(huán)境不一樣，所以需要在原生應(yīng)用層采用自定義函數(shù)來(lái)拓展運(yùn)行時(shí)（runtime）環(huán)境來(lái)處理JavaScript發(fā)出的網(wǎng)絡(luò)請(qǐng)求。

對(duì)于常用的網(wǎng)絡(luò)請(qǐng)求對(duì)象：XMLHttpRequest（XHR）、Fetch及WebSocket，熟悉前端開(kāi)發(fā)的同學(xué)應(yīng)該非常了解。XHR是Web開(kāi)發(fā)中用得比較多的發(fā)送請(qǐng)求的方式，Fetch和Websocket也是后起之秀，在很多現(xiàn)代Web應(yīng)用中得以采用。但是，在React Native中，這些對(duì)象的使用和Web應(yīng)用是有差別的。當(dāng)你在JS層調(diào)用網(wǎng)絡(luò)請(qǐng)求時(shí)，其實(shí)是經(jīng)歷了兩個(gè)過(guò)程才到達(dá)真正的服務(wù)器端。就像頭部banner表示的那樣。

在React Native中, XMLHttpRequest（XHR）由兩部分組成： “前端”（front-end）和“后端”（back-end）。前端負(fù)責(zé)與JavaScript交互，后端負(fù)責(zé)在原生平臺(tái)上轉(zhuǎn)換JavaScript發(fā)送過(guò)來(lái)的請(qǐng)求為原生系統(tǒng)自己的請(qǐng)求。

這里的后端其實(shí)是一個(gè)原生平臺(tái)頂層抽象的統(tǒng)一API層，使得JavaScript層可以調(diào)用原先系統(tǒng)的網(wǎng)絡(luò)模塊。例如IOS下內(nèi)置的URLSession模塊和Android下的OKHTTP模塊。

在現(xiàn)代Web瀏覽器中，FetchAPI提供了和XHR大部分相同的功能，但是Fetch提供了一種更加簡(jiǎn)單，高效的方式來(lái)跨網(wǎng)絡(luò)異步獲取資源，同時(shí)可操縱Request和Response對(duì)象來(lái)復(fù)用請(qǐng)求。

但是在React Native中，為了兼容兩種平臺(tái)的差異，采用了依賴(lài)于XMLHttpRequest的Fetch Polyfill來(lái)實(shí)現(xiàn)這個(gè)請(qǐng)求對(duì)象。這就意味著我們不能像實(shí)用Web平臺(tái)下的Fetch對(duì)象一樣來(lái)實(shí)用React Native下的該對(duì)象。比如采用這個(gè)對(duì)象來(lái)發(fā)送binary數(shù)據(jù)。當(dāng)然可以采用第三方的庫(kù)比如react-native-fetch-blob來(lái)實(shí)現(xiàn)相應(yīng)的功能。

Websocket作為一種新的通信協(xié)議，采用全雙工通訊方式與服務(wù)器間進(jìn)行通信的網(wǎng)絡(luò)技術(shù)。

在React Native中，Websocket并不是一個(gè)獨(dú)立的請(qǐng)求，和XMLHttpRequest（XHR）一樣由兩部分組成： “前端”（front-end）和“后端”（back-end）。前端負(fù)責(zé)與JavaScript交互，后端負(fù)責(zé)在原生平臺(tái)上轉(zhuǎn)換JavaScript發(fā)送過(guò)來(lái)的請(qǐng)求為原生系統(tǒng)自己的請(qǐng)求。在IOS中采用的是自己開(kāi)發(fā)的NSStream，而在Android系統(tǒng)中則是OKHTTP模塊。

在React Native開(kāi)發(fā)中，你可以通過(guò)Chrome Developer Tools (CDT)的Sources面板中調(diào)試javascript部分的代碼，包括斷點(diǎn)、輸出信息、斷點(diǎn)調(diào)試等一切javascript調(diào)試所需的信息。但是，唯一缺少的就是網(wǎng)絡(luò)請(qǐng)求的跟蹤調(diào)試。我們沒(méi)辦法像Web開(kāi)發(fā)那樣，可以通過(guò)CDT中的網(wǎng)絡(luò)面板（Network）來(lái)查看應(yīng)用的網(wǎng)絡(luò)請(qǐng)求的相關(guān)信息。

雖然沒(méi)有辦法通過(guò)CDT查看應(yīng)用的網(wǎng)絡(luò)請(qǐng)求，但是我們可以通過(guò)Fiddler、CharlesProxy及Wireshark等軟件設(shè)置代理，來(lái)查看追蹤調(diào)試網(wǎng)絡(luò)請(qǐng)求。這里使用Fiddler來(lái)作為代理。

首先設(shè)置Fiddler的代理端口：
打開(kāi)Filddler -> Tool -> Options -> Connects，在監(jiān)聽(tīng)端口處填寫(xiě)相應(yīng)的端口號(hào)，

在調(diào)試機(jī)器上、Android或者IOS模擬器模擬器中設(shè)置代理：
找到調(diào)試的機(jī)器上的網(wǎng)絡(luò)設(shè)置中，設(shè)置當(dāng)前連接的WIFI的代理地址

刷新應(yīng)用，在fiddler中查看網(wǎng)絡(luò)請(qǐng)求(提示：右鍵，在新頁(yè)簽中打開(kāi)可查看清晰圖片):

看請(qǐng)求頭，返回頭，返回結(jié)果等相關(guān)的網(wǎng)絡(luò)信息。當(dāng)然，還可以根據(jù)相關(guān)代理軟件攔截請(qǐng)求，重新設(shè)置后發(fā)送。

上面通過(guò)設(shè)置代理的方式來(lái)查看和追蹤網(wǎng)絡(luò)請(qǐng)求，雖然功能強(qiáng)大，但是實(shí)際操作起來(lái)有些難度，上手成本比較高。通過(guò)使用Reactotron，可以將調(diào)試的配置信息集成到應(yīng)用中，方便在不同的開(kāi)發(fā)環(huán)境下有相同的調(diào)試配置，節(jié)約開(kāi)發(fā)配置成本。

Reactotron由兩部分組成，一部分是調(diào)試應(yīng)用，一部分是調(diào)試配置。

調(diào)試應(yīng)用分別有各個(gè)操作系統(tǒng)的GUI安裝版本。當(dāng)然，如果習(xí)慣使用命令行，也可以使用NPM安裝reactotron-cli

npm install -g reactotron-cli

設(shè)置調(diào)試配置：

在你的React Native應(yīng)用中安裝reactotron-react-native

npm i --save-dev reactotron-react-native

然后，在你的應(yīng)用的添加配置文件，定制調(diào)試內(nèi)容：

```
import Reactotron, {
  trackGlobalErrors,
  openInEditor,
  overlay,
  asyncStorage,
  networking
} from "reactotron-react-native"
Reactotron
  .configure({
    name: "xxx"                 // 調(diào)試的名稱(chēng)
  })
  .use(trackGlobalErrors())     // 設(shè)置監(jiān)聽(tīng)全局錯(cuò)誤
  .use(openInEditor())          // 設(shè)置在編輯器中打開(kāi)錯(cuò)誤
  .use(overlay())               // 設(shè)置圖片遮蓋圖片（用于UI還原度對(duì)比）
  .use(asyncStorage())          // 設(shè)置異步存儲(chǔ)調(diào)試
  .use(networking())            // 設(shè)置網(wǎng)絡(luò)調(diào)試
  .connect()                    // 連接應(yīng)用（必須）

```
然后在你的應(yīng)用的入口文件中引入這個(gè)配置文件。然后重新啟動(dòng)應(yīng)用。當(dāng)然，還可以使用正則表達(dá)式過(guò)濾請(qǐng)求的`contentType`的類(lèi)型和要忽略的請(qǐng)求的`url`，見(jiàn)下面的配置：

```
 .use(networking({
    ignoreContentTypes: /^(image)/.*$/i,   // 設(shè)置reactotron要忽略的文件類(lèi)型
    ignoreUrls: //(logs|symbolicate)$/,    // 設(shè)置reactotron要忽略的url請(qǐng)求路徑
 }))
```

![reactotron設(shè)置]

reactotron調(diào)試網(wǎng)絡(luò)只是他的一個(gè)功能之一，其他還有很多強(qiáng)大的功能。有興趣可以查看他的文檔。

React Native默認(rèn)暴露出來(lái)的接口中，是沒(méi)有直接在Chrome Developer Tools查看網(wǎng)絡(luò)請(qǐng)求的方法的，查看 RN 源碼 Libraries/Core/InitializeCore.js，注釋中寫(xiě)著：

Sets an object’s property. If a property with the same name exists, this will
  replace it but maintain its descriptor configuration. By default, the property
  will replaced with a lazy getter.
  *
  The original property value will be preserved as original[PropertyName] so
  that, if necessary, it can be restored. For example, if you want to route
  network requests through DevTools (to trace them):
  *
  global.XMLHttpRequest = global.originalXMLHttpRequest;
  *
  @see https://github.com/facebook/r...

具體實(shí)現(xiàn)在XHRInterceptor.js中。原來(lái)的XMLHttpRequest 被改寫(xiě)成了 originalXMLHttpRequest，所以要在Chrome 中顯示network 只需要替換 XMLHttpRequest 為 originalXMLHttpRequest。在入口文件處設(shè)置：

if (__DEV__) {
  GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest
}

當(dāng)然，這樣有可能會(huì)產(chǎn)生CORS, Chrome 會(huì)限制跨域請(qǐng)求。這時(shí)要么后端配合一下去除限制，要么使用 Allow-Control-Allow-Origin: * 插件。

由于React Native中Fetch對(duì)象的底層采用的是XHR實(shí)現(xiàn)，這就限制了發(fā)送二進(jìn)制數(shù)據(jù)的功能。當(dāng)然React Native提供了一系列的方式來(lái)解決這個(gè)問(wèn)題，比如： 轉(zhuǎn)換二進(jìn)制文件為base64字符串或者采用第三方庫(kù) react-native-fetch-blob。但是并沒(méi)有從底層解決這個(gè)問(wèn)題。

到目前為止，React Native不能發(fā)送非序列化的數(shù)據(jù)，所以，要發(fā)送二進(jìn)制數(shù)據(jù)，采用Base64編碼的字符串是個(gè)不錯(cuò)的選擇。

例如，你從服務(wù)器下載一張圖片（注意：不是通過(guò)url從服務(wù)器獲?。?，請(qǐng)求通過(guò)JavaScript線程，再通過(guò)React Native提供的橋接器，最后通過(guò)原生系統(tǒng)的網(wǎng)絡(luò)模塊發(fā)送到服務(wù)端。服務(wù)端返回一個(gè)Base64編碼過(guò)的圖片，JavaScript線程收到返回的字符串后，會(huì)分配相應(yīng)的內(nèi)存，然后React Native會(huì)調(diào)用相應(yīng)的原生模塊渲染成相應(yīng)圖片。但是值得主要的是，這種方式會(huì)造成典型的性能問(wèn)題——內(nèi)存泄漏。

通過(guò)Base64編碼的方式傳輸二進(jìn)制文件，這里會(huì)造成一系列性能問(wèn)題，這篇文章中列出了大部分性能問(wèn)題及提出了相應(yīng)的解決方案。

現(xiàn)在使用的各種方法發(fā)送二進(jìn)制文件都存在各種問(wèn)題，最終的解決方式是要相應(yīng)的標(biāo)準(zhǔn)能夠?qū)崿F(xiàn)二進(jìn)制的傳輸。目前，WebSocket已經(jīng)支持了二進(jìn)制傳輸。在最新版本的React Native層也已經(jīng)支持WebSocket協(xié)議來(lái)傳輸二進(jìn)制文件，但是，相應(yīng)的原生平臺(tái)的網(wǎng)絡(luò)模塊暫時(shí)還不支持。

React Native開(kāi)發(fā)方式是非常不錯(cuò)的體驗(yàn)，但是，受各個(gè)平臺(tái)差異和標(biāo)準(zhǔn)的限制，不得不折中處理一些問(wèn)題。隨之而來(lái)的是相應(yīng)的性能、效率的問(wèn)題。另外，采用開(kāi)發(fā)，性能上和用戶體驗(yàn)上和原生應(yīng)用還是有一定差距。但是如果在原生應(yīng)用中能夠集成React Native，會(huì)顯著提高開(kāi)發(fā)效率。

Network layer in React Native

reactotron介紹

reactotron

Reactotron on React Native