阿里低代码引擎 | LowCodeEngine - 定制数据源请求并出码

前言

其实本篇内容官方在 www.yuque.com/lce/usage/d… 此处已经说明过了，但是还是采坑了，也不是文中有什么错误，而是实操时翻了一个很容易忽略的或者自以为的一点。

强烈建议先认真阅读完 www.yuque.com/lce/usage/d… 之后再看本篇文章。

阿里低代码引擎的 demo 中我们可以看出自带了两种请求方式，分别是 fetch 和 jsonp，而我们公司内部的研发是基于 React 的 umijs 框架，因此在请求库也没有采用最广泛使用的 axios，而是 umi-request（当然我们内部又封装了一层，叫 ngfe-request）。

目标

理由我不详细说明了，现在基本哪家公司多多少少都会基于开源二次封装自己的请求库，真实使用情况下，我们必然不可能使用阿里低代码引擎中的 fetch，一步一步一点一点地设置参数。

反正目标有了，就是使用 umi-request 替换掉阿里低代码中自带的 fetch（umi-request 也是基于 fetch）。

流程

一般情况下，我们在编辑器（即：设计态）写页面写请求，写完之后保存预览，在预览界面（即：运行态）预览页面效果、查看请求是否发送成功、是否能获得响应结果。

尽管看官方文档说是在设计态其实也可以启用定制的数据源请求，但预览态启用定制的数据源请求对我们来说，足够了。

因此我们分别两步：

1. 在预览态启用定制的数据源请求
2. 写定制数据源请求的 hanlder 处理方法

直接上代码讲

1

第一步很简单，就是个配置问题，不讲了，参考此处代码：www.yuque.com/lce/usage/d…

2.1 基于 axios 的数据源请求

import axios from 'axios';

export function createAxiosFetchHandler(config?: Record<string, unknown>) {
  return async function(options: RuntimeOptionsConfig) {
    const requestConfig: RequestOptions = {
      ...options,
      url: options.uri,
      method: options.method as RequestOptions['method'],
      data: options.params,
      headers: options.headers,
      ...config,
    };
    const response = await axios(requestConfig);
    return response;
  };
}

其中看下来没什么，总体就是很简单的包装一层，把请求结果返回出去。如果你们请求库使用的是 axios，那这个复制粘贴过去基本没有问题。

2.2 基于 umi-request 的数据源请求【也正是工作中我需要的】

import { RuntimeOptionsConfig } from '@alilc/lowcode-datasource-types';

import request from 'umi-request';
import { RequestOptionsInit } from 'umi-request/types';

// config 留着扩展
export function createUmiRequestHandler(config?: Record<string, unknown>) {
  // eslint-disable-next-line space-before-function-paren
  return async function (options: RuntimeOptionsConfig) {
    const requestConfig: RequestOptionsInit = {
      ...options,
      data: options.params,
      // @ts-ignore
      headers: options.headers,
      parseResponse: false,
      ...config,
    };
    const response: Response = await request(options.uri, requestConfig);
    const data = await response.clone().json();
    const headers: any = {};
    response.headers.forEach((value, key) => {
      headers[key] = value;
    });
    const rebuildResponse = {
      data,
      headers,
      config: requestConfig,
      status: response.status,
      statusText: response.statusText,
    };
    return rebuildResponse;
  };
}

乍看如出一辙，但是要注意：其实 datasource-xxx-handler 对返回的数据是有要求的，得是一个包含了 data 属性的对象，其中 data 的值是响应结果，也恰好 axios 在 resolved 状态下返回的 value 值就是这种结构。 。而又恰好，umi-request 的 response 的结构与 axios 的 response 完全不同，这也导致了我在低代码源码面板中调用 this.datasourceMap.xxx.load 却一直获取不到响应结果的原因。

如何出码

山重水复疑无路

尽管官方文档此处 www.yuque.com/lce/usage/d… 已说明，但不清楚，反正我第一次是咩明白，再配合在下图：结论就是：要想把我们日常开发中封装的请求库接入使用，运行态可以做到，但出码做不到。

柳暗花明又一村

正常途径做不到，但我们可以曲线救国做到，那就是修改 node_modules 中的源码。简单的来说，低代码引擎中如果你使用了 fetch 作为请求库，那么 fetch 对应的 handler 就是固定的，尽管在预览时可调整，但出码时还是按照未调整前固定的方式映射fetch → fetch-handler。因此，我们可以在 node_modules/@alilc/lowcode-datasource-fetch-handler 包中的 fetch-handler 代码替换成前文中我们的 axios-handler 或者 umi-request-hander，但是要注意暴露的方法名不能变，得还是 createFetchHandler。

【2023年6月8日更新】可直接使用 umi-request-handler 了

之前有向阿里低代码引擎的 github 提交 pr，最近发现通过了，还一起跟随着发了 npm 包，包名是：@alilc/lowcode-datasource-umi-request-handler，如此就不用修改源码也能使用到 umi-request 请求库了。npm 仓库地址：www.npmjs.com/package/@al…

参考

1. 定制数据源请求实现（运行态）