支持自定义 fetch

[maoxiaoke]

Do you want to request a feature or report a bug?

What is the current behavior?
使用 window.fetch 获取资源

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

What is the expected behavior?
支持自定义 fetch

[maoxiaoke]

应用场景

1. 支持业务方自行实现 fetch 能力

技术方案

API 变更

StartConfiguration 新增 fetch 字段

export interface StartConfiguration {
  ...
  fetch?: (input: string) => Promise<Response>;
}

createMicroApp 新增参数 configuration

export declare function createMicroApp(app: string | AppConfig, appLifecyle?: AppLifecylceOptions, configuration: StartConfiguration): Promise<MicroApp>;

设置仅支持改微子应用。

使用示例

基于路由控制模式

import { registerMicroApps, start } from '@ice/stark';
import customFetcher from './customFetcher';
registerMicroApps([
  {
    path: '/waiter',
    title: '小二平台',
    sandbox: true,
    url: [
      '//ice.alicdn.com/icestark/child-waiter-vue/app.js',
      '//ice.alicdn.com/icestark/child-waiter-vue/app.css',
    ],
  }
], {
    afterMount: () => { console.log('mounted') },
});
start({
    fetch: customFetcher,
})

手动加载模式

import { createMicroApp, unloadMicroApp } from '@ice/stark';
import customFetcher from './customFetcher';
const App = () => {
  const appContainer = useRef(null);
  useEffect(() => {
    createMicroApp(
      {
        name: 'microapp',
        url: [
          '//ice.alicdn.com/icestark/child-waiter-vue/app.js',
          '//ice.alicdn.com/icestark/child-waiter-vue/app.css',
        ],
        container: appContainer.current
      },
     {
        afterMount: () => { console.log('mounted!') }
      },
      {
        fetch: customFetcher
      }
    );
    return () => {
      unloadMicroApp('microapp');
    }
  }, []);
  return <div ref={appContainer}></div>
};
export default App;