react-native-easy-app 詳解與使用之（二） fetch

是一款為React Native App快速開發提供基礎服務的純JS庫(支援 IOS & Android)，特别是在從0到1的項目搭建初期，至少可以為開發者減少30%的工作量。

react-native-easy-app 主要做了這些工作：

1. 對AsyncStorage進行封裝，開發者隻需幾行代碼即可實作一個持久化資料管理器。

2. 對fetch進行封裝，使得開發者隻需關注目前App的前背景互動邏輯和協定，定義好參數設定及解析邏輯即可。

3. 重新封裝了RN的View、Text、Image、FlatList 使用得這些控件在适當的時候支援事件或支援icon與文本，能有效減少布局中的嵌套邏輯。 4. 通過設定一個螢幕參考尺寸，重置XView、XText、XImage的尺寸，實作自動多屏适配

可能有人覺得，不同的App對Http請求的要求各異，第三方庫怎麼可能做到全面的封裝，就算做到了，那也必定會封裝過度。

一千個人心中，有一千個哈姆雷特，也許我的思路能給你帶來不一樣的啟發也未可知呢？

網絡請求（fetch）

我們先來看下React native中文網給出的fetch使用示例：

異步請求（核心代碼）

fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });

同步請求（核心代碼）

try {
    // 注意這裡的await語句，其所在的函數必須有async關鍵字聲明
    let response = await fetch('https://facebook.github.io/react-native/movies.json');
    let responseJson = await response.json();
    return responseJson.movies;
  } catch (error) {
    console.error(error);
  }

RN平台的fetch請求很簡潔，那我們再看看react-native-easy-app的請求 XHttp是不是也可以友善快捷的發送請求呢？

異步請求（核心代碼）示例 1

import { XHttp } from 'react-native-easy-app';

 XHttp().url('https://facebook.github.io/react-native/movies.json').execute('GET')
   .then(({success, json, message, status}) => {
      console.log(json.movies)
    })
    .catch(({message}) => {
        showToast(message);
    })

同步請求（核心代碼）示例 2

import { XHttp } from 'react-native-easy-app';

  const response = await XHttp().url('https://facebook.github.io/react-native/movies.json').execute('GET');
  const {success, json, message, status} = response;
  console.log(json.movies)

異步請求2（核心代碼）示例 3

import { XHttp } from 'react-native-easy-app';

   XHttp().url('https://facebook.github.io/react-native/movies.json').get((success, json, message, status)=>{
       console.log(json.movies)
   });

通過執行上面三段示例代碼，發現輸出了一緻的結果（電影清單數組）：

通過對比發現 XHttp 的使用與React Native平台提供的fetch很相似，其execute('get')方法傳回的是一個promise對象，故也可以像fetch一樣，發送同步或異步請求。另外還可以通過[method]+回調的形式發送請求。

相比原生fetch請求，XHttp 卻傳回了多個參數，我們列印一下示例2中的response看看裡面都有啥？輸出結果，格式化後如下：

success => [true | false] 請求成功或失敗的辨別（預設以Http的請求狀态碼：[ status >= 200 && status < 400 ] 作為判斷依據）。
json => [Json Object | originText] 預設為請求傳回的json對象，必要時可以指定傳回純文字字元串（若請求結果為非标準Json，如XML結構或其它）或通過自定義配置指定請求傳回的資料結構。
message 預設情況下，請求成功時：為[code+url]，失敗時：則為錯誤資訊[錯誤資訊+code+url]，若開發者指定了特定的解析方式，則由開發者制定。
status 預設情況下為Http請求的status code，可由開發者制定，傳回自定義的業務邏輯請求狀态碼

通過上面的示例， react-native-easy-app 的 XHttp 可以像使用fetch一樣友善快捷的發送Http請求，而且還包含請求碼，錯誤資訊，結果也被轉化為了json對象，使用我們發送請求更加友善了。

但在實際的App開發中，我們Http請求架構的要求不隻是能發送簡單的Http請求就可以了，比如說，需要列印請求日志、設定header參數、統一處了解析邏輯，甚至可能處理傳回的結構不是标準的json資料等各種需求。

我們來看看 react-native-easy-app 的 XHttp 能滿足我們哪些需求：

注：上面三個示例的請求方式各有所長，下文發送請求示例的地方我都選擇使用請求示例 3 的方式舉例。

需求 1 ：能支援get、post、put、delete等基本常用類型的請求：
- 架構會自動根據輸入的請求類型，自動會處理請求的body有無問題
- 1、通過XHttp 的execute('method')方式發送請求自然是沒有問題
- 2、通過method + 回調的形式（滿足90%的情況），我問下的情況怎麼辦？不用擔心架構提供了另一種方式實作，即：

XHttp().url('https://facebook.github.io/react-native/movies.json').request('HEAD', (success, json, message, status) => {
    console.log(json.movies);
})

需求 2：能支援常用的contentType設定，如 application/json、multipart/form-data、application/x-www-form-urlencoded等
- 當然并不隻是簡單的傳個參數而已，必須能根據請求contentType按正常的方式處理body，如果contentType若為multipart/form-data，則使用FormData去接收拼接開發者傳入的參數
- 1、 XHttp 有三種方式設定contentType，三種常用的方式被提取了出來，如下分别是：直接設定；通過header設定；通過方法直接指定。開發者設定了相應的方式之後，就可以放心的發送Http請求了，剩下的架構會處理（下面示例為：上傳圖檔設定）：

需求 3：能支援逾時設定；支援日志列印；支援傳回非标準Json以及baseUrl的拼接
- 請求超的原理是通過 Promise.race 實作；
- 1.由于逾時請求并不完全屬于某個特定的請求，故引入了一個公共配置對象：XHttpConfig，開發者可以通過兩種試設定請求逾時配置，如下：

import { XHttpConfig } from 'react-native-easy-app';

XHttpConfig().initTimeout(300000); //全局配置，設定所有Http請求的逾時時間為30秒

XHttp().url('https://facebook.github.io/react-native/movies.json').timeout(15000) //設定目前請求逾時間為15秒
    .get((success, json, message, status) => {
    })

2、日志列印也是通過 XHttpConfig().initHttpLogOn(true) 設定為 true 即可，設定完成後，我們發送請求，看看控制台的輸出日志：

XHttpConfig().initHttpLogOn(true);
XHttp().url('https://facebook.github.io/react-native/movies.json').get((success, json, message, status) => {
})

可以看出控制台列印出了詳細的日志，是不是很友善？

3、現在的移動開發99%的情況下前背景互動都是使用的json格式資料，但很難保證一些特殊情況下，App不使用非标準json資料格式的Http請求。比如需要請求一些老網站或者使用一些第三方開放的老接口。這時候隻需要指定傳回純檔案資料即可，下面找一個傳回xml格式的接口，請求看看結果：

let url = 'http://www.webxml.com.cn/WebServices/MobileCodeWS.asmx/getDatabaseInfo'
XHttp().url(url).pureText().get((success, text, message, status) => {
    console.log('XML data', text)
})

控制台輸出結果如下（通過XHttp的 pureText() 指定傳回的資料以純文字傳回）：

4、至于baseUrl的拼接，則是為了在App開發中，減少不必要的baseUrl的重複使用（程式通過判斷傳入的url是否是完整按需拼接BaseUrl），使用方法如下：

import { XHttpConfig, XHttp } from 'react-native-easy-app';

XHttpConfig().initBaseUrl('http://www.webxml.com.cn/WebServices/');
XHttp().url('MobileCodeWS.asmx/getDatabaseInfo').get((success, text, message, status) => {
    console.log('XML data', text)
})

需求 4：能自由設定公共的params、headers；發送Http請求的時候，也能自由設定目前請求的header及param資料。

import { XHttpConfig, XHttp } from 'react-native-easy-app';

XHttpConfig().initHttpLogOn(true)
    .initBaseUrl('https://facebook.github.io/')
    .initContentType('multipart/form-data')
    .initHeaderSetFunc((headers, request) => {
        headers.headers_customerId = 'headers_CustomerId001';
        headers.headers_refreshToken = 'headers_RefreshToken002';
    })
    .initParamSetFunc((params, request) => {
        params.params_version = 'params_version003';
        params.params_channel_code = 'params_channel_code004';
        params.testChannel = 'testChannel005';
    });

XHttp().url('react-native/movies.json')
    .header({'Content-Type': 'application/json', header_type: 'header_type006'})
    .param({paramUserName: 'paramUserName007', testChannel: 'testChannel008'})
    .post((success, text, message, status) => {
    })

從代碼中可以看出通過XHttpConfig配置，我們設定了公共的heders、params，然後在通過XHttp發送請求時，又設定了特定的header和param的值，同時了修改了contentType的類型，并改為post請求，執行代碼我們看看控制台日志内容：

通過控制台列印的日志，我們可以很清晰的看到，參數從001~008所有的參數（除了005）都能有效設定到請求當中。但為什麼公共參數 params.testChannel = 'testChannel005'; 的設定沒有生效呢，其實是因為，XHttp中的接口請求的私有參數中也設定了一個：testChannel: 'testChannel008' 的參數，兩者的Key相同，是以被接口私有參數給覆寫了（細心的同學也可以發現，日志中'Content-Type': 'application/json'，contentType的類型也被覆寫了），這說明了接口的私有參數具有更高的優先級，這是合理的同時也使接口的請求更靈活友善。

需求 5：能支援自定義資料解析，這也是最重要的。

每個app都有一套前背景資料互動方式，對于傳回的資料都有統一固定的格式：友善前端解析處理，如 cryptonator.com 網站提供的比特币查詢接口，接口url：
https://api.cryptonator.com/api/ticker/btc-usd 。我們先通過postman請求一下：

傳回的資料格式如下：

{
  "ticker": {
    "base": "BTC",
    "target": "USD",
    "price": "5301.78924881",
    "volume": "179358.70555921",
    "change": "-21.18183054"
  },
  "timestamp": 1584291183,
  "success": true,
  "error": ""
}

可以看出，接口傳回的資料結構中，有三個主要字段：

success 接口邏輯成功與失敗的判斷依據。
error 接口若失敗時，包含錯誤資訊。
ticker 接口傳回的主要資料的主體。

以前面XHttp發送請求，接口的成功與否的判斷依然是http的status來判斷，顯示達不到要求，請求cryptonator.com網站api資料統一解析的基本要求，那怎麼自定義資料解析呢？我們試試看。

import { XHttpConfig, XHttp } from 'react-native-easy-app';

XHttpConfig().initHttpLogOn(true)
    .initBaseUrl('https://www.cryptonator.com/api/')
    .initParseDataFunc((result, request, callback) => {
        let {success, json, message, status} = result;
        callback(success && json.success, json.ticker || {}, json.error || message, status);
    });

XHttp().url('ticker/btc-usd').get((success, json, message, status) => {
    console.log('success = ' + success);
    console.log('json    = ' + JSON.stringify(json));
    console.log('message = ' + message);
    console.log('status  = ' + status);
});

我們再看下控制台輸出的請求日志與Http請求列印的4個标準參數的内容：

發現沒有，json對應的值就是傳回的資料結構中：ticker對應的資料。其它字段并不能反映出來，因為資料剛好與預設判斷條件吻合或為空。這是怎麼實作的呢？

因為通過XHttpConfig的initParseDataFunc方法，我們重新定義了，接口請求傳回的标準字段的值：

success => success && json.success 隻有當接口請求與傳回的成功标記同時為true的時候才認為是成功
json => json.ticker 直接讀取json.ticker的值（若為空，則傳回一個沒有任何屬性對象）
message => json.error || message 優先擷取接口傳回的錯誤資訊（若為空，則讀取Http請求的錯誤資訊）
status => status 由于些api并沒有code判斷标記，故依然使用Http的status

這樣Http請求傳回的參數自定義問題就解決了，這時候可能有人會說：我的app不隻是請求一個背景或者還要請求第三方接口，不同的背景傳回的資料結構也完全不一樣，這種情況下麼處理？不用擔心，這種情況也是有解的：

辦法一（非标準接口較少的情況）：

比如說，我的請求以cryptonator.com網站的api為主，偶爾要請求域名查詢接口：

https://api.domainsdb.info/v1/domains/search?domain=zhangsan&zone=com

，這個時候，我可以依然保持前面的自定義解析方式不變，在請求域名查詢的時候，增加一個标記：

FHttp().url('https://api.domainsdb.info/v1/domains/search')
   .param({domain: 'zhangsan', zone: 'com'})
   .contentType('text/plain')
   .rawData()
   .get((success, json, message, status) => {
       if (success) {
           console.log('rawData', JSON.stringify(json))
       } else {
           console.log(message)
       }
   })

接口請求列印的日志為：

請求依然成功，各參數也沒有問題，因為在發送Http請求的時候增加了一個标記rawData()，這個标記就是用于特殊處理的，标記目前Http請求需要傳回原始的，不做任何解析的資料（設定此标記，會自動忽略使用者自定義的資料解析方式）

辦法二（也有可能一個App要請求多個不同的平台或者新老版本過渡，而且不同風格的接口數量還不在少數），同時在這種情況下可能請求的參數風格，公共參數也有不同的要求，這就更複雜了，這種情況能否處理？答案是肯定的：

假設目前App要請求三個平台：分别為SA，SB，SC，這三個平台要求不同的公共參數（包括header），且傳回的資料結構也完全不一緻，這時候我們可以這樣處理，配置與請求都可以完全獨立的實作：

import { XHttpConfig, XHttp } from 'react-native-easy-app';

XHttpConfig('SA').initHttpLogOn(true) ...

XHttpConfig('SB').initHttpLogOn(true) ...

XHttpConfig('SC').initHttpLogOn(true) ...

const url = 'https://facebook.github.io/react-native/movies.json';

XHttp('SA').url(url) .get((success, json, message, status) =>{
});

XHttp('SB').url(url) .get((success, json, message, status) =>{
});

XHttp('SC').url(url) .get((success, json, message, status) =>{
});

就是這麼簡單，配置與請求可以通過serverTag來差別，預設情況下使用同一個配置，但若指定了新的serverTag，發送Http請求時就可以通過serverTag來指定使用哪個Http請求的配置，這樣同一個app裡面，請求不同的伺服器，以及處理不同伺服器傳回的資料也完全沒有壓力。

通過上面的例子，我們可以看出，XHttpConfig的三個公共配置方法：initHeaderSetFunc、initParamSetFunc、initParseDataFunc 是一個面向切面的程式設計模式，這些方法還有一個共同的參數request(第二個參數)裡面包含了請求的所有原始資訊，是以可以有更多的想象空間，就等你去探索。

可能部分同學覺得，架構的參數設定挺友善，但資料的解析我想完全自己實作可以麼？當然可以，通過fetch方法，傳回的是原fetch請求的promise，架構不做任何處理：

也有同學想，架構的解析很友善，我想完全使用架構的解析，但有些參數是放在header裡面，我怎麼才能在解析資料的時候取到response的header資料呢？這個問題也不用擔心，在所有示例中，我清單的解析回調的參數都是4個：(success, json, message, status)，但實際上有5個參數，第5就是response，它就是fetch傳回的reponse，你可以從裡取到任何想要的資料，包括headers

const url = 'https://facebook.github.io/react-native/movies.json';

XHttp().url(url).get((success, json, message, status, response) => {
    console.log(JSON.stringify(response.headers))
});

const {success, json, message, status, response} = await XHttp().url(url).execute('GET');
console.log(JSON.stringify(response.headers))

也有同學可能想到有一種應用場景oauth2需要特别處理：

發送請求req1，因為accessToken失效而請求失敗
程式通過refreshToken重新擷取到了新的accessToken
拿着新的accessToken重新請求req1

這種應用場景怎麼處理呢？

XHttpConfig()
    .initHttpLogOn(true)
    .initBaseUrl(ApiCredit.baseUrl)
    .initContentType(XHttpConst.CONTENT_TYPE_URLENCODED)
    .initHeaderSetFunc((headers, request) => {
        if (request.internal) {
            Object.assign(headers, AuthToken.baseHeaders());//添加基礎參數
            headers.customerId = RNStorage.customerId;
            if (RNStorage.refreshToken) {//若refreshToken不為空，則拼接
                headers['access-token'] = RNStorage.accessToken;
                headers['refresh-token'] = RNStorage.refreshToken;
            }
        }
    })
    .initParamSetFunc((params, request) => {
        if (request.internal && RNStorage.customerId) {
            params.CUSTOMER_ID = RNStorage.customerId;
        }
    }).initParseDataFunc((result, request, callback) => {
    let {success, json, response, message, status} = result;
    AuthToken.parseTokenRes(response);//解析token
    if (status === 503) {//指定的Token過期标記
        this.refreshToken(request, callback)
    } else {
        let {successful, msg, code} = json;
        callback(success && successful === 1, selfOr(json.data, {}), selfOr(msg, message), code);
    }
});

static refreshToken(request, callback) {
    if (global.hasQueryToken) {
        global.tokenExpiredList.push({request, callback});
    } else {
        global.hasQueryToken = true;
        global.tokenExpiredList = [{request, callback}];
        const refreshUrl = `${RNStorage.baseUrl}api/refreshToken?refreshToken=${RNStorage.refreshToken}`;
        fetch(refreshUrl).then(resp => {
            resp.json().then(({successful, data: {accessToken}}) => {
                if (successful === 1) {// 擷取到新的accessToken
                    RNStorage.accessToken = accessToken;
                    global.tokenExpiredList.map(({request, callback}) => {
                        request.resendRequest(request, callback);
                    });
                    global.tokenExpiredList = [];
                } else {
                    console.log('Token 過期，登出');
                }
            });
        }).catch(err => {
            console.log('Token 過期，登出');
        }).finally(() => {
            global.hasQueryToken = false;
        });
    }
};

在這裡我就不做詳細說明了直接貼代碼，詳細的請大家可以直接閱讀源碼或者參考

庫對應的

示例

項目，至于原理是：在請求的時候，将初請求的方法引用儲存到了request中，并命名為resendRequest，若擷取到新的token之後，重新請求一遍resendRequest方法，傳入原來的參數即可。

可能有同學覺得react-native-easy-app封裝XHttp與XHttpConfig的方法與參數太多了，根本沒辦法記住，架構雖好卻不便于使用，這個目前可能需要大家參考示例項目來寫了（後面我會完善說明文檔）。

當然大家有沒有發現，在使用這些庫方法的時候，代碼有提示呢？那就對了。因為我為主要的方法增加了dts描述文檔，是以在寫代碼過程中，如果不記得方法名參數直接通過代碼自動提示來寫就行了（自動提示在webStorm上的體驗更好）：

react-native-easy-app 詳解與使用之（三） View，Text，Image，Flatlist

想進一步了解，請移步至

npm

或github檢視

，有源碼及使用

，待大家一探究竟，歡迎朋友們 Star！

react-native-easy-app 詳解與使用之（二） fetch

網絡請求（fetch）

react-native-easy-app 詳解與使用之（三） View，Text，Image，Flatlist

繼續閱讀

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

Android電視機（機頂盒）初次開發的一些經驗分享

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

android 主線程的相關問題

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

layui多任務上傳添加進度條

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題