阿里低程式碼引擎 | LowCodeEngine – 如何配置並調用請求

• 2022 年 3 月 30 日
• 筆記

首發於 語雀文檔@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
    })
  })
}

如下圖，我們如期望的手動調用了請求，並成功地返回了響應結果。