共享数据源

黄健大约 4 分钟进阶使用

共享数据源旨在解决多组件共同使用同一数据源的场景中避免重复请求浪费网络资源的问题！

假设有这么一个场景：页面中存在多个数字滚动器组件，这数个组件中，均使用的是同一个API接口地址去请求数据，接口返回一系列值，这数个数字滚动器组件只是绑定这一个接口返回数据中的不同属性值。

在不使用共享数据源的情况下，我们需要为每一个数字滚动器都绑定API数据源，并各自结合结果集过滤器来读取API请求结果中的属性值，这种实现方式存在以下问题：

多余的HTTP请求造成网络资源浪费
当API接口地址出现变动，我们需要逐个去修改数字滚动器组件中绑定的API接口地址

使用共享数据源后，我们就可以将API的请求放在共享数据源中，多个数字滚动器组件均绑定此共享数据源，由共享数据源来请求数据统一分发。

下面我们通过一个示例来讲解如何使用共享数据源：

首先使用NodeJS开发一个测试接口，接口地址为：http://localhost:8800/getNumbers，接口代码如下：

// 引入express
let express = require('express')
let app = express()

// 开启跨域
app.all('*', (req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", '3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

// 定义接口，接口返回一个JSON对象，其中包含三个属性值num1,num2,num3
app.get('/getNumbers', function(req, res) {
  res.send({
    num1: 1000,
    num2: 2000,
    num3: 3000
  })
})

// 启动应用
app.listen(8800, function () {
  console.log("已启动，根路径：http://localhost:8800");
})

在画布中拖入三个数字滚动器组件，并各自为其设置标题num1,num2,num3，效果如下图所示：
画布中拖入共享数据源组件
然后我们在共享数据源组件的【数据源配置】中配置API接口请求数据，配置结果如下图所示
为了方便其他组件绑定此共享数据源，我们可以为其配置一个备注名称
相关信息
一般页面发布后都不需要显示这个共享数据源组件，我们可以在发布前将其隐藏
为每一个数字滚动器组件配置数据源，使用共享数据源类型，然后选择名称为【统一获取数字信息】的共享数据源，配置结果如下图所示，其中还配置了结果集过滤器来构建数字滚动器所需的结果集格式，如果不了解结果集过滤器的使用，可以前往配置结果集过滤器章节进行查看。
上图中仅配置了标题为num1的数字滚动器组件，后面两个也同理进行配置即可，最后呈现出来的效果为
最后我们对页面进行预览，然后打开浏览器控制台，查看【network】栏看看网络请求如下图所示，可以看到，仅进行了一次接口getNumbers的请求

共享数据源如何使用定时轮询

当我们的功能组件绑定了共享数据源之后，组件自身即无法配置定时轮询，因为数据的请求已经转移至共享数据源由共享数据源进行请求并分发数据，因此我们应该在共享数据源中来配置定时轮询：

共享数据源采用静态数据类型

当共享数据源使用的是静态数据类型时，我们必须为其配置一个【静态数据延迟加载】的配置属性，默认这个配置属性使用的值为200毫秒，一般情况下我们不需要修改。

为什么要配置【静态数据延迟加载】？

在PageNow中，共享数据源与其他功能组件一样，作为一个普通功能组件，在页面加载的时候，共享数据源组件和页面内的其他组件的加载顺序是不分先后顺序的，静态数据作为同步数据，如果不配置延迟属性，则会出现某些特殊情况下，绑定了共享数据源的功能组件先于共享数据源组件加载了，但由于共享数据源组件并没有加载，所以就会造成功能组件找不到对应的共享数据源的静态数据。