Fiori学习笔记 - $batch 批处理的使用

前端开发一定会有请求服务的情况,很多人也都遇到过一个页面需要调用多个服务的需求。在Angular框架中,批处理可以通过JS等其他框架的处理方式,而在SAP Fiori对batch做了深度的封装。batch批处理是将多个单一服务请求整合收集到一起,然后通过这一个$batch请求去发送到服务端,并且响应回响应的信息。可以想见的好处是减少了调用服务的次数、网络的请求,势必会提高一些运行的效率。

单一请求

Fiori学习笔记 - $batch 批处理的使用_第1张图片

批处理

Fiori学习笔记 - $batch 批处理的使用_第2张图片

2.0 版本的OData默认是支持batch请求的,1.0版本的OData则需要手动配置一下,下面是batch常用的一些配置代码:

  1. odataModel.setUseBatch(false); 禁止$batch请求

  2. setDeferredGroups 默认单向数据绑定,当更新model时,会自动触发batch请求,通过setDeferredGroups可以延迟请求,手动处理,比如在用户点击按钮时再触发batch请求,避免batch的随时触发。

  3. odataModel.setDefaultBindingMode("TwoWay"); OData默认单向数据绑定,通过这句代码可以将其设置成双向数据绑定,默认所有请求都会被收集到changes的group,并设置成deferred

OData 1.0版本批处理是相对麻烦的,需要手动添加,下面是代码:

var oModel = new sap.ui.model.odata.ODataModel(sURL, {json: true});
var batchChanges = [];
for (var i = 0; i < arrTimesheets.length; i++) {
    batchChanges.push(oModel.createBatchOperation("url", "POST", {
        "TIMESHEETID": arrTimesheets[i].TIMESHEETID
        }));
}

oModel.addBatchChangeOperations(batchChanges);
oModel.submitBatch(function(oData) {
    if (oData.__batchResponses[0].__changeResponses) {
        promise.resolve(oData);
    } else {
        promise.reject(oData);
    }
}, function(oData) {
    promise.reject(oData);
});

而OData 2.0批处理是自动化的,相较于1.0,来说,不需要我们写那么多代码。

常用控件比如 list、table、smart form 和 smart field都支持batch的元数据绑定,直接配置 entity set即可,比如:

,在没有延迟设置的情况下,组件数据被修改时就会立刻调用一次batch,拿到当前 entity set 里最新的数据,通过batch传到服务端。

下面就贴出Demo里的部分代码。

View里,用了一个table 控件,table数据来源直接通过entity set来配置了元数据。还加了”Send Batches”按钮,配置该按钮点击时触发batch。

<Button text="Send Batches" press="onPress"/>

<Table inset="false" items="{path: '/Categories'}">
    <columns>
        <Column>
            <Text text="Category"/>
        Column>
    columns>
    <items>
        <ColumnListItem>
            <cells>
                <Input value="{ path: 'Name'}" change="onChange"/>
            cells>
        ColumnListItem>
    items>
Table>

在controller的onInit方法当中可以看到,添加了一个延迟的group –“MyGroup”,在点击”Send Batches” 按钮的时候调用batch。

onInit: function() {
    var odataModel = new sap.ui.model.odata.v2.ODataModel('/DemoService/V2/(S(vwvvf40szqul4pkwqq50peal))/OData/OData.svc/', false);
    //odataModel.setUseBatch(false);
    //odataModel.setDefaultBindingMode("TwoWay");
    odataModel.setDeferredGroups(["MyGroup"]);
    this.getView().setModel(odataModel);

    odataModel.read("/Suppliers", {
        urlParameters: '&$format=json',
        success: function(oData) {
            console.log(oData);
        },
        error: function(oData) {

        }
    });
},
onChange: function(evt) {
    var oModel = this.getView().getModel();
    console.log(oModel.getProperty('/Products(0)'));
    var sPath = evt.getSource().getParent().getBindingContextPath();
    var sValue = evt.getParameter('value');
    oModel.update(sPath, {
        Name: sValue
    }, {
        groupId: 'MyGroup'
    });
},
onPress: function(evt) {
    var oModel = this.getView().getModel();
    oModel.submitChanges({
        groupId: "MyGroup",
        success: this.mySuccessHandler,
        error: this.myErrorHandler
    });
}

以上代码不难发现,demo里有两个单一服务,分别是/Categories和/Suppliers,在 Chrome Network里我们可以看到batch的请求情况。

第一次加载页面的时候,执行了一次batch:

Fiori学习笔记 - $batch 批处理的使用_第3张图片

之后再修改table里的字段值,由于我们设置了deferred, 此时batch并没有执行。

点击”Send Batches” 按钮,可以看到batch执行了一次,并且可以看到页面上被修改的字段值(“Food1232”)已经通过batch传到了服务端。

Fiori学习笔记 - $batch 批处理的使用_第4张图片

到这里,一个OData 2.0版本单向数据绑定的batch就配置成功了!

当然,有时还会需要重置数据,或者在调用服务失败的时候还原数据。OData内部会有一个数据缓存的处理机制,下面代码就可以将组件里的数据恢复到修改之前的状态。

var oModel = this.getView().getModel();
oModel.resetChanges();

以上是单向数据绑定的情况,需要双向数据绑定的话,值需要在onInit方法里加上:

odataModel.setDefaultBindingMode("TwoWay");

并且在修改字段值触发onChange方法时不再需要oModel.update更新数据。

$batch 批处理的使用情况到这里就已经都完成了!

你可能感兴趣的:(Fiori,前端)