React Native教程 - 調用Web API

react-native官網Fetch介紹：https://facebook.github.io/react-native/docs/network.html#content

react-native中不支持$，也就是說咱們沒法使用$HTTP來調用API，根據react-native官網教程，咱們能夠使用fetch，這也是一個更好的網絡API，它在react native中默承認以使用。

在react－native項目中，咱們仍是使用咱們的慣用方法，寫一個服務js來放咱們的全部API，可是在react-native中，咱們將會有一些定義上和使用方法上的變化。

瞭解fetch

fetch(input, init)

第一個參數input能夠是一個字符串，包含獲取資源的URL；

第二個參數對象是可選的，它能夠自定義HTTP請求中的一些部分；

method: 請求使用的方法，如 GET、POST。

headers: 請求的頭信息，形式爲 Headers 對象或 ByteString。

body: 請求的 body 信息：多是一個 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 對象。注意 GET 或 HEAD 方法的請求不能包含 body 信息。

mode: 請求的模式，如 cors、no-cors 或者same-origin。

credentials: 請求的 credentials，如 omit、same-origin 或者include。

cache:  請求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.

fectch()的返回值是一個Promise對象，它能夠使用then和catch指定回調函數：

fetch(input, init)
.then((response) => response.json())
        .then((responseJson) => {console.log(responseText);})
        .catch((error) => {console.warn(error);});

fetch返回函數callback()的參數定義：fetch返回函數參數定義

1. 若是接口調用成功，咱們返回callback(null,data)；有兩個參數：
   第一個參數傳null，表明接口調用成功；
   第二個參數data爲接口返回的數據；
2. 若是接口未調用成功，咱們返回callback(err);只有一個參數：err爲錯誤消息；

fetch示例

使用該方法時，不須要引入fetch，直接拿來用就能夠了。

 先來簡述一下《意見反饋》demo都有哪些服務API功能：

1. 根據app的GUID得到該app的信息（GET方法）；
2. 用戶發送所填寫的內容（POST方法）

app的界面實現過程就不呈現了，主要說明的是如何調用web API的。

首先來建一個服務：app-feedback-svc.js。代碼以下：

var baseURL = "http://192.168.89.101:8082/api/",
 
export default{
//得到某一app詳細信息(不包含評論)
    getOneAppInfoDetail(appGUID, callback){
        fetch(baseURL + 'api/app/app-info/' + appGUID, {
            method: 'GET'
        }).then((response) => response.json())
            .then((responseJson) => {
                switch (responseJson.State) {
                    case 0:
                        var listOption = responseJson.Result.ListOption;
                        var result = {
                            tags: listOption.filter((item)=>item.OptionClass === 0).map((item)=>item.OptionString),
                            expect: listOption.filter((item)=>item.OptionClass === 1).map((item)=>item.OptionString)
                        };

                        callback(null, result);
                        break;
                    case 1:
                        callback('參數無效');
                        break;
                    case 2:
                        callback('未知錯誤（異常）');
                        break;
                    default:
                        callback('其餘錯誤');
                        break;
                }
            })
            .catch((error) => {
                callback(error);
            });
    },

    //保存app評價
    saveAppComment(AppGUID, IsLike, CommentDetail, WishFeature, PhoneType, Email, callback){
        var wishItem = {};
        WishFeature.filter((item)=>item.check == true).map((item, index)=>(
            wishItem['Item' + index] = item.label
        ));
        fetch(baseURL + 'api/comment/save-comment', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                AppGUID: AppGUID,
                IsLike: IsLike,
                CommentDetail: CommentDetail,
                WishFeature: wishItem,
                PhoneType: PhoneType,
                Email: Email
            })
        }).then((response) => response.json())
            .then((responseJson) => {
                switch (responseJson.State) {
                    case 0:
                        callback(null);
                        break;
                    case 1:
                        callback('參數無效');
                        break;
                    case 2:
                        callback('未知錯誤（異常）');
                        break;
                    default:
                        callback('其餘錯誤');
                        break;
                }
            })
            .catch((error) => {
                callback(error);
            });
    }
}

服務js承擔中轉做用，所以咱們須要處理接口返回的數據的格式時，儘可能在服務js中轉換完成以後，再在頁面中使用。 

例如上述文件中， 得到app信息函數getOneAppInfoDetail()，接口返回的數據有全部的app信息，可是咱們頁面上不須要那麼多信息，所以，咱們須要在服務中，當接口調用成功並有數據返回後，咱們要從新構造咱們須要的數據格式：

 //responseJson.State==0
 var listOption = responseJson.Result.ListOption;
 var result = {
     tags: listOption.filter((item)=>item.OptionClass === 0).map((item)=>item.OptionString),
     expect: listOption.filter((item)=>item.OptionClass === 1).map((item)=>item.OptionString)
 };
 callback(null, result);
 
//這樣返回的數據result就只含有咱們所須要的數據了。

頁面調用API時，根據定義的服務函數裏的參數來進行傳參來獲得app的信息或者保存用戶的反饋。 

得到app信息：

使用的是fetch的GET方法，咱們只須要一個參數（appGUID）便可獲得app的信息。

根據服務中的返回函數callback()的數據，咱們經過判斷第一個參數是否爲空來判斷咱們的接口是否調用成功，是否得到到咱們的想要的數據。

import feedbackSvc from './services/app-feedback.js';
 
componentDidMount() {
    feedbackSvc.getOneAppInfoDetail(this.appGUID, function (info, data) {
        if (info == null) {
            var appDetailInfo = data;
            var list = appDetailInfo.expect.map((item)=>({check: false, label: item}));
            list.push({check: false, label: "其它功能"});
            this.setState({appDetailInfo, list});
        } else {
            alert(info);
        }
    }.bind(this));
}

保存反饋內容： 

使用的是fetch的POST方法，咱們須要把反饋的每個內容都做爲參數傳給接口，而且這些參數的格式要同接口須要的參數一致才能夠成功保存內容，固然像GET方法，接口返回的數據格式不必定是咱們想要的，一樣地，咱們前臺頁面得到的數據格式不必定是接口所須要的格式，咱們轉換數據格式的代碼也應該放在服務js中處理。如app-feedback-svc.js中的saveAppComment()，咱們頁面中傳過來的WishFeature是一個數組，可是接口須要的是一個對象，因此咱們須要進行格式處理：

 var wishItem = {};
 WishFeature.filter((item)=>item.check == true).map((item, index)=>(
     wishItem['Item' + index] = item.label
 ));
 
//這樣咱們獲得的wishItem對象就是接口所須要的數據

頁面中，當用戶點擊「發送」按鈕後，用戶所填寫的數據才傳到接口保存下來，因此咱們須要定義一個函數_saveComment()，當用戶點擊時調用該函數，將全部內容都做爲參數傳給接口，若是調用接口成功，用戶填寫的數據將保存在咱們的管理後臺了。 

import feedbackSvc from './services/app-feedback.js';

 
_saveComment() {
    feedbackSvc.saveAppComment(this.appGUID, this.state.isLike, this.state.appOption, this.state.list, phoneType, this.state.email, function (info, data) {
        if (info == null) {
            alert('感謝您的反饋！');
        } else {
            alert(info);
        }
    }.bind(this))
}