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返回函数参数定义

fetch返回函数callback()的参数定义：

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))
}