API

进行系统开发免不了要进行 HTTP 请求调用从服务端获取数据或者进行一些异步操作，盘古提供 API 功能用于进行异步接口调用。

创建API

用户可以通过数据源面板添加 API 配置：

远程数据源包含以下配置信息：

• 名称 - 远程 API 的唯一标识，需要遵守 JS 的变量定义规则；
• 描述 - 定义远程 API 的描述信息；
• 自动加载 - 开启了“自动加载”的数据源会在页面渲染后请求远程接口；
• 请求地址 - 远程 API 的访问地址；
• 请求方式 - 异步请求方法：GET、POST、PUT、DELETE；
• 数据处理 - 盘古提供三类数据处理函数，用于在不同阶段进行切片处理；

数据处理

willFetch - 请求发送前处理函数，willFetch 允许用户在发送请求前修改请求的各种参数。示例：

function willFetch(vars, config, ctx) {
  // 通过 vars.data 可以更改查询参数
  // 通过 config.headers 可以更改 headers
  // 通过 config.url 可以更改  url
  // 通过 ctx.state 可以获取页面变量
  console.log(vars, config); // 可以查看还有哪些参数可以修改。
}

fit - 请求返回时的数据适配，fit 可以修改请求的原始 Response 以适配对应的数据请求格式。示例：

function fit(response, ctx) {
  // 需return处理后response结果
  return response;
}

didFetch - 请求完成回调函数。用于完成请求后进行下一步的处理，例如将返回结果存储到变量。示例：

function didFetch(response, ctx) {
  // 这里可将返回结果进行存储
  // 调用ctx.setState("变量名", "变量值")
}

使用场景

自动加载数据

有时候我们需要在用户进入页面时就自动加载数据，并将这些数据展示在页面中，例如详情展示页，我需要进入页面时获取到页面的展示信息进行初始化展示。

（1）我们通过配置自动加载数据源来加载用户详情信息，并在api调用结束方法中将api返回值赋值给变量，如下所示：

（2）然后我们需要通过一个描述列表组件将我们自动加载的待办数据展示出来。拖入画布一个描述列表组件，将每一个字段列绑定到用户信息变量对应的属性中，如下所示：

这样，我们在进行页面预览时，就会先调用api获取用户信息，再展示到描述列表组件上了。

手动加载数据

有时，会通过人机交互，动态的触发api的调用，可以在动作面板中通过API进行变量的使用

绑定组件属性

我们也可以将api绑定到部分组件的属性中，使组件进行自动化调用。例如我们可以将api绑定到表格组件的数据属性中，这样，表格的数据就来源于绑定的这个api了，并且在进行内置增删改查操作时，也会自动的调用该api进行数据刷新。