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

端）

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

在使用React Native開發(fā)中，我們熟練的采用JavaScript的方式發(fā)送請求的方式發(fā)送一個請求到服務(wù)端，但是處理這個請求的過程其實和處理Web應(yīng)用中發(fā)送的請求的過程是不一樣的。因為處理這個請求的目標(biāo)不是瀏覽器，而是嵌入這個應(yīng)用的原生操作系統(tǒng)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

調(diào)試應(yīng)用分別有各個操作系統(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)試的名稱
  })
  .use(trackGlobalErrors())     // 設(shè)置監(jiān)聽全局錯誤
  .use(openInEditor())          // 設(shè)置在編輯器中打開錯誤
  .use(overlay())               // 設(shè)置圖片遮蓋圖片（用于UI還原度對比）
  .use(asyncStorage())          // 設(shè)置異步存儲調(diào)試
  .use(networking())            // 設(shè)置網(wǎng)絡(luò)調(diào)試
  .connect()                    // 連接應(yīng)用（必須）

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

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

![reactotron設(shè)置]

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

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

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...

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

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

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

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

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

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

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

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

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

Network layer in React Native

reactotron介紹

reactotron

Reactotron on React Native