远程 API

​

创建远程数据源

• 名称- 远程 API 的唯一标识，需要遵守 JS 的变量定义规则；
• 描述- 定义远程 API 的描述信息，在变量绑定时会透出该描述信息；
• 自动加载- 开启了“自动加载”的数据源会在页面渲染之前请求远程接口，并将返回数据直接赋值到以远程 API 命名的全局变量上，所有自动加载的数据源加载完成之后才开始渲染页面；
• 加载方式- 宜搭提供以下两种不同的加载方式（默认并行加载）：
  • 串行 - 所有串行数据源会从上到下执行，如果有相互依赖的，被依赖的数据源需要在前面；
  • 并行 - 所有并行数据源同时执行；
• 请求地址- 远程 API 的访问地址，如果是宜搭提供的 openAPI 可以使用相对路径，如果是第三方服务提供的接口需要支持跨域访问；
• 请求方式- 宜搭提供通用的异步请求方法：JSONP、GET、POST、PUT、DELETE；
• 请求参数- 用于设置异步请求的请求参数，支持静态配置或绑定变量；
• 是否发送请求- 支持传入一个布尔值，通过这个变量去判断这个请求是否应该发出。这个输入域也可以输入变量表达式以决定是否需要发送请求；
• 数据处理- 宜搭提供四类数据处理函数，用于在不同阶段进行切片处理：
  • willFetch- 请求发送前处理函数，willFetch 允许用户在发送请求前修改请求的各种参数。示例：
  function willFetch(vars, config) {
    // 通过 vars.data 可以更改查询参数
    // 通过 config.header 可以更改 header
    // 通过 config.url 可以更改  url
    vars.data.a = 1; // 修改发送请求参数中的 a 为 1
    config.url = 'https://www.taobao.com'; // 修改请求的 url 为淘宝
    config.header['Content-Type'] = 'application/json'; // 修改 Content-Type
    console.log(vars, config); // 可以查看还有哪些参数可以修改。
  }
  
  • fit- 请求返回时的数据适配，fit 可以修改请求的原始 Response 以适配对应的数据请求格式。示例：
  // 宜搭默认只处理以下格式的数据返回，如果异步接口返回结构不满足要求需要通过 fit 来进行转换
  //{
  //    content: [], // content 字段用于承载数据，content 对应的数据结构不做限制。
  //    success: true, // success 用于标明这次请求是否成功
  //}
  function fit(response) {
    const content = (response.content !== undefined) ? response.content : response;
    const error = {
      message: response.errorMsg ||
        (response.errors && response.errors[0] && response.errors[0].msg) ||
        response.content || '远程数据源请求出错，success is false', 
    };
    let success = true;
    if (response.success !== undefined) {
      success = response.success;
    } else if (response.hasError !== undefined) {
      success = !response.hasError;
    }
    return {
      content, 
      success, 
      error, 
    };
  }
  
  • didFetch- 请求完成回调函数，didFetch 允许用户对接收到的数据进行修改, 和 fit 不同的是, 接口返回的 success 为 true 才会执行。示例：
  function didFetch(content) {
      content.b = 1; // 修改返回数据结构中的 b 字段为 1
      return content; // 重要，需返回 content
  }
  
  • onError- 请求错误处理函数，onError 用于捕获远程数据源的接口异常，接口返回的 success 为 false 时会执行, 示例：
  function onError(error) {
    console.log(error);
  }
  
• 默认数据- 指定接口的默认数据，若接口未返回或者请求失败将返回默认数据；

​

API

​

this.dataSourceMap.xxx.load()

export function fetchData() { 
  // 请求数据源中配置的 getDataList 远程 API，并传入 pageSize 和 page 参数，若请求成功在 console 中打印结果，若请求失败，弹框提醒
  this.dataSourceMap.getDataList.load({
    pageSize: 10, 
    page: this.state.currentPage
  }).then((res) => {
    if (res) {
      console.log('fetchData', res);
    }
  }).catch((err) => {
    this.utils.toast({
      type: 'error', 
      title: '请求失败！'
    })；
  });
}

​

this.reloadDataSource()

export function reload() {
  // 重新请求所有初始的数据源请求
  this.reloadDataSource();
}

​

使用场景

​

自动加载数据源

• 我们通过配置自动加载数据源来加载待办任务 (自动加载数据源会在请求完成后自动将然后结果挂载到全局变量上，对应的变量名称为数据源的名称)，如下所示：

function didFetch(content) {
  return (content.data || []).map(item => {
    return {
      id: item.formInstId, 
      content: item.formData.textField_kymq5pdi, 
      done: item.formData.radioField_kymq5pdj
    }
  });
}

• 然后我们需要通过一个表格组件将我们自动加载的待办数据展示出来，如下所示：
  • 设置表格的数据源变量绑定 state.todoList；

• 设置表格的字段映射字段及对应的类型；

• 最后我们点击设计器的预览按钮便可以看到待办任务数据展示在了表格中了；

​

手动加载数据源

• 我们先配置一个删除任务的远程 API，如下所示：

function didFetch(content) {
  // 通过消息提醒用户删除成功
  this.utils.toast({
    title: 'delete Success!', 
  });
  // 重新加载自动请求刷新任务列表
  this.reloadDataSource();
  return content; // 重要，需返回 content
}

• 接下来我们需要给表格增加一个删除操作项，并且当用户点击删除项时通过手动调用远程 API 完成删除操作，如下所示：
  • 设置表格的操作列属性：

• 增加一个操作项：

• 设置操作项标题，在回调函数中为该操作项绑定一个动作：

• 实现 onDelete 函数，手动加载数据源，实现删除操作：

export function onDelete(rowData) {
  this.dataSourceMap.del.load({
    formInstId: rowData.id
  });
}

• 最后我们点击设计器的预览按钮便可以看到表格的操作列出现了一个删除操作项，点击对应的删除按钮便会执行删除操作并刷新列表；