阿里低代码引擎 | LowCodeEngine - 如何配置并调用请求

首发于 语雀文档@blueju

前言

发送请求是前端中很重要也很常见的一部分，阿里低代码引擎自然也不会缺少这一块。在阿里低代码引擎中，请求是在数据源中配置，数据源位置如下图：

配置

配置界面如下图：其中数据源 ID 推荐小驼峰命名法，因为请求最终返回的结果会存入this.state.数据源ID，如上图我们表格期望展示请求结果时，就可以将this.state.数据源ID绑定到表格数据配置那里。

剩余的配置项要么配置很简单（如请求地址、请求参数、是否自动请求、请求方法），要么用得较少并不必需（如添加数据处理函数、请求头信息、超时时长），本文也不是阿里低代码引擎使用指南，故不详细阐述了。

调用

虽然请求配置项中有一项叫是否自动请求，但我们真实场景一般是要自行调用请求方法，比如点击查询时发送请求、点击重置时清空查询表单并发送查询请求

如何调用这一块从使用界面很难了解到，文档中也鲜有描述，不过如果有经验的话，稍微剥茧抽丝就能找到解决方。现在需求是点击查询时需要发送查询请求，那我们在点击查询按钮后的查询中先打印一下 this 看看，如图：我们已经知道是在数据源中配置请求，那我们可以从打印出的 this 中查找一下关于数据源的一些关键词，如上图我们发现属性 dataSourceMap 中有一个子属性 tableDataSource，这与我们在配置中的数据源 id 一致，并且它下面还有一个 load 方法，猜测它是调用方法，那我们在查询按钮所触发的查询方法中写上调用代码。

search() {
  console.log(this)
  const response = this.dataSourceMap.tableDataSource.load()
  response.then(res => {
    console.log(res)
    this.setState({
      tableDataSource: res
    })
  })
}

如下图，我们如期望的手动调用了请求，并成功地返回了响应结果。