自定义数据源请求头，编辑态不起作用

[wenccro]

Describe the bug (required) / 详细描述 bug（必填）

按照官网https://www.yuque.com/lce/usage/datasource方法，替换编辑端数据源自定义请求头 预览态请求没有问题，编辑态有问题

A clear and concise description of what the bug is. / 请提供清晰且精确的 bug 描述

To Reproduce (required) / 如何复现 bug？（必填，非常重要）

再demo中添加自定义请求头，再编辑端中数据源自动请求，未走自定义接口 关键requestHandlersMap 这个还爆红，提示无这个变量

Steps to reproduce the behavior: / 详细复现步骤： ` const requestConfig: any = { ...options, url: changeUrlByEnvi().baseMain + options.uri, method: options.method as RequestOptions['method'], data: options.params, headers: headers, params: options.method === 'POST' ? null : options.params, ...config, };

console.log('请求参数', requestConfig)

const response: objType = await axios(requestConfig);`

`(async function main() { await plugins.register(scenarioSwitcher); await registerPlugins(); // 建立监听 getMessageByEvent()

init(document.getElementById('lce-container')!, { enableCondition: true, enableCanvasLock: true, // 默认绑定变量 supportVariableGlobally: true, simulatorUrl: [ 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css', 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js' ], requestHandlersMap: { fetch: createAxiosFetchHandler() } }, preference);

})();`

English version example：

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

中文版示例：

1. 打开 demo；
2. 点击标题；
3. 在右侧修改标题内容为「修改后的标题」；
4. 渲染画布标题组件没有更新显示为「修改后的标题」；

Expected behavior (required) / 预期行为（必填，非常重要）

A clear and concise description of what did you expect to happen. / 请清晰和精确的描述你预期的行为

---

Screenshots (optional) / bug 截图（可选）

Sceenshots for further information. (If applicable.) / 一些有用的截图将会帮助我们更好的明确以及定位问题

---

Environments (please complete the following information) (required): / 请提供如下信息（必填）

• AliLowCodeEngine version: [e.g. 1.0.0] / 低代码引擎版本
• AliLowCodeEngineExt version: [e.g. 1.0.0] / 低代码引擎扩展包版本
• Browser [e.g. chrome, safari] / 浏览器版本
• materials / plugins / tools / 其他物料 / 插件 / 工具链版本

(this information can be collected via the manual plugin / 版本信息可通过低代码用户手册插件收集)

Additional context (optional) / 更多额外信息（可选）

Any other context of the problem here. / 可以追加更多的额外信息，帮助定位问题

[JackLian]

编辑态数据请求都是禁用掉的吧...

[github-actions[bot]]

This issue is stale because it has been open 10 days with no activity. Remove stale label or comment or this will be closed in 2 days.

[twinkle77]

描述不太清理，可以参考下面代码，自定义请求头是没问题的

@wenccro

export const createAxiosFetchHandler = () => {
  const request = axios.create({
    timeout: 10 * 1000
  })

  /*
    options 打印的值如下：
      headers: {}
      isCors: true
      method: "POST"
      params: {app_id: '6867052548608491520', is_pagination: false}
      timeout: 5000
      uri: "https://www.baidu.com"
  */
  return async function (options: RuntimeOptionsConfig) {
    const requestConfig = {
      ...options, // lowcode-engine datasource plugin 传进入来的用户配置
      url: options.uri, // 矫正字段, axios 不认识 uri
      ...config, // 默认配置
    } as AxiosRequestConfig

    // 删除无用属性
    ;['params', 'uri'].forEach((key) => {
      delete (requestConfig as any)[key]
    })

    // lowcode-engine datasource plugin 固定传入 params 字段，这里需要把 params 字段放到 axios handler 正确的位置上
    switch (requestConfig.method) {
      case 'POST':
        requestConfig.data = options.params
        break
      default:
        requestConfig.data = options?.params?.data
        requestConfig.params = options?.params?.params
    }

    const response = await request({
      withCredentials: false,
      ...requestConfig,
    })

    return response
  }
}

使用方式：

  requestHandlersMap: {
      fetch: createAxiosFetchHandler(options),
   }

[github-actions[bot]]

This issue is stale because it has been open 10 days with no activity. Remove stale label or comment or this will be closed in 2 days.

[liuwawa]

编辑态下当前设置的requestHandlersMap : {fetch:createFetchHandler({})}，通过init方法初始化，无法成功，需要手动setConfig设置一下

config.setConfig(options)

console.log("config配置参数", config)

初始化完毕后，可以通过 console.log("config配置参数", config)，确认是否正确的加载requestHandlersMap

参考代码如下:

import { init, config } from '@alilc/lowcode-engine';  

(async function main() {
  setupConfig();
  await registerPlugins();

  const options = {
    requestHandlersMap : {fetch:createFetchHandler({})},
    appHelper: { // 传给编辑态的 appHelper
      constants: {
        hh:11
      },
      utils: {
        // ...appHelper.utils,
      },
    },
    // designMode: 'live',
    // locale: 'zh-CN',
    enableCondition: true,
    enableCanvasLock: true,
    // 默认绑定变量
    supportVariableGlobally: true,
    // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！
    // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径
    simulatorUrl: [
      'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css',
      'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js'
    ],   
  }
  config.setConfig(options)
  init(document.getElementById('lce-container')!, options, preference);

 console.log("config配置参数", config)

参考了 #696 的写法