批请求

在页面上发送多个请求，这些请求那么都成功，要么都不成功，类似数据库事务。系统提供“批请求”实现这样的需求。

• 使用批请求，在请求开始时启动事务，请求结束时提交事务，请求出错则回滚
• 前端提供三种方式实现批请求
• 批请求实现原理同分布式事务的实现原理，参考《启用事务》中的说明

使用"批请求"组件

从市场组件中引入“批请求”组件。"批请求"组件提供两个操作：开始批请求和结束批请求，来实现批请求。两个操作之间，调用需要在一个批中执行的组件的操作，例如：数据组件的保存操作和服务组件的请求操作

例如：实现两个数据组件的保存在同一个批请求中执行，设计界面如下图所示

使用 BatchRequest 类

系统提供 BatchRequest 类，位于 UI2/wxsys/lib/base/batchRequest 目录，用于创建批请求，提交批请求

• 创建批请求，返回批请求实例
• 调用其它请求时，携带批请求实例，表示为批请求中的请求
• 调用批请求实例的执行方法 exec 提交批请求

批请求构造方法提供三个参数，说明如下

• transaction: 是否启动事务，默认 true
• concurrent：是否并发执行，默认 false
• page: 页面对象

BatchRequest 类用法的示例代码如下

        //创建批请求
        let batchReq = new BatchRequest({ page: this, transaction: true, concurrent: false });
        //批请求中的请求
        数据组件.saveData({ batch: batchReq });
        服务组件.send({ batch: batchReq });
        this.request({batch: batchReq }); 
        //提交批请求
        await batchReq.exec();

请求中增加 batch 参数，传入批请求实例，相同 batch 为同一个批请求，没有 batch 参数为立即执行的请求

使用前添加引用，代码如下：

import BatchRequest from "$UI/wxsys/lib/base/batchRequest";

例如：同一批执行三个请求，分别是数据组件的保存、服务请求的发送和普通请求的发送

• React 示例代码如下

    onJsBatchBtn2Click = async (event) => {
        let batchReq = new BatchRequest({ page: this, transaction: true, concurrent: false });
        this.comp('ordermData').saveData({ batch: batchReq });
        this.comp('serviceRequest').send({ batch: batchReq }); 
        this.request({ url: "$serviceName/oa/person/savePerson", method: "post", batch: batchReq }); 
        await batchReq.exec();
        message.info("保存成功");
    }

• Vue 示例代码如下

    let onJsBatchBtn2Click = async (event) => {
        let batchReq = new BatchRequest({ page: $page, transaction: true, concurrent: false });
        $page.comp('ordermData').saveData({ batch: batchReq });
        $page.comp('serviceRequest').send({ batch: batchReq }); 
        $page.request({ url: "$serviceName/oa/person/savePerson", method: "post", batch: batchReq }); 
        await batchReq.exec();
        message.info("保存成功");
    }

使用 wx.request.batch 方法

wx.request.batch 方法自动创建 BatchRequest 并执行传入函数，根据函数返回（为 promise 时等待 promise）执行 BatchRequest.exec() 提交批操作

wx.request.batch 方法的参数同 BatchRequest 类构造方法的参数

wx.request.batch 方法的示例代码如下

        await wx.request.batch((batchReq) => {
            //批请求中的请求
            数据组件.saveData({ batch: batchReq });
            服务组件.send({ batch: batchReq });
            this.request({ batch: batchReq }); 
        }, { transaction: true, page: this, concurrent: false });

请求中增加 batch 参数，传入批请求实例，相同 batch 为同一个批请求，没有 batch 参数为立即执行的请求

例如：同一批执行三个请求，分别是数据组件的保存、服务请求的发送和普通请求的发送

• React 示例代码如下

    onJsBatchBtnClick = async (event) => {
        await wx.request.batch((batchReq) => {
            this.comp('ordermData').saveData({ batch: batchReq });
            this.comp('serviceRequest').send({ batch: batchReq });
            this.request({ url: "$serviceName/oa/person/savePerson", method: "post", batch: batchReq }); 
        }, { transaction: true, page: this, concurrent: false });
        message.info("保存成功")
    }

• Vue 示例代码如下

    let ordermData = useData("ordermData");
    let onJsBatchBtnClick = async (event) => {
        await wx.request.batch((batchReq) => {
            ordermData.saveData({ batch: batchReq });
            $page.comp('serviceRequest').send({ batch: batchReq });
            $page.request({ url: "$serviceName/oa/person/savePerson", method: "post", batch: batchReq }); 
        }, { transaction: true, page: $page, concurrent: false });
        message.info("保存成功")
    }

案例位置

桌面-页面-数据集-前后端实现事务.w