diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
index 3c993a2cb..1ca20b1b5 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectContext.ts
@@ -59,11 +59,16 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
         _createContext() {
           const self = this;
 
+          // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+          self._latestState = self.state;
+
           const context = {
             get state() {
-              return self.state;
+              // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+              return self._latestState;
             },
             setState(newState) {
+              self._latestState = { ...self._latestState, ...newState };
               self.setState(newState);
             },
             get dataSourceMap() {
@@ -87,12 +92,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
             get constants() {
               return __$$constants;
             },
-            get i18n() {
-              return self._i18n;
-            },
-            getLocale() {
-              return __$$i18n.getLocale();
-            },
+            i18n: __$$i18n.i18n,
+            i18nFormat: __$$i18n.i18nFormat,
+            getLocale: __$$i18n.getLocale,
             setLocale(locale) {
               __$$i18n.setLocale(locale);
               self.forceUpdate();
@@ -106,34 +108,6 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
     });
 
-    next.chunks.push({
-      type: ChunkType.STRING,
-      fileType: cfg.fileType,
-      name: CLASS_DEFINE_CHUNK_NAME.InsVar,
-      content: `
-        _i18n = this._createI18nDelegate();
-      `,
-      linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
-    });
-
-    next.chunks.push({
-      type: ChunkType.STRING,
-      fileType: cfg.fileType,
-      name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
-      content: `
-        _createI18nDelegate() {
-          return new Proxy(
-            {},
-            {
-              get(target, prop) {
-                return __$$i18n.i18n(prop);
-              },
-            },
-          );
-        }
-      `,
-      linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
-    });
     return next;
   };
   return plugin;
diff --git a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 3dea73068..dd811d52a 100644
--- a/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/packages/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/indent */
+
 import { CompositeValue, JSExpression, DataSourceConfig, isJSExpression, isJSFunction } from '@ali/lowcode-types';
 import changeCase from 'change-case';
 
@@ -41,20 +43,24 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       const requestHandlersMap = {} as Record<string, JSExpression>;
 
       dataSourceItems.forEach((ds) => {
-        if (!(ds.type in requestHandlersMap) && ds.type !== 'custom') {
-          const handlerName = '__$$' + changeCase.camelCase(ds.type) + 'RequestHandler';
+        const dsType = ds.type || 'fetch';
+        if (!(dsType in requestHandlersMap) && dsType !== 'custom') {
+          const handlerFactoryName = '__$$create' + changeCase.pascal(dsType) + 'RequestHandler';
 
-          requestHandlersMap[ds.type] = {
+          requestHandlersMap[dsType] = {
             type: 'JSExpression',
-            value: handlerName + (ds.type === 'urlParams' ? '({ search: this.props.location.search })' : ''),
+            value: handlerFactoryName + (dsType === 'urlParams' ? '(this.props.location.search)' : '()'),
           };
 
+          const handlerFactoryExportName = `create${changeCase.pascal(dsType)}Handler`;
+          const handlerPkgName = `@ali/lowcode-datasource-${changeCase.kebab(dsType)}-handler`;
+
           next.chunks.push({
             type: ChunkType.STRING,
             fileType: FileType.JSX,
             name: COMMON_CHUNK_NAME.ExternalDepsImport,
             content: `
-              import ${handlerName} from '@ali/lowcode-datasource-engine/handlers/${changeCase.kebabCase(ds.type)}';
+              import { ${handlerFactoryExportName} as ${handlerFactoryName} } from '${handlerPkgName}';
             `,
             linkAfter: [],
           });
@@ -69,7 +75,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       fileType: FileType.JSX,
       name: COMMON_CHUNK_NAME.ExternalDepsImport,
       content: `
-        import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+        import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
       `,
       linkAfter: [],
     });
diff --git a/packages/code-generator/src/plugins/component/rax/jsx.ts b/packages/code-generator/src/plugins/component/rax/jsx.ts
index 33420aaae..fc0cb838c 100644
--- a/packages/code-generator/src/plugins/component/rax/jsx.ts
+++ b/packages/code-generator/src/plugins/component/rax/jsx.ts
@@ -105,7 +105,11 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
       type: ChunkType.STRING,
       fileType: cfg.fileType,
       name: RAX_CHUNK_NAME.ClassRenderPre,
-      content: `const __$$context = this._context;`,
+      // TODO: setState, dataSourceMap, reloadDataSource, utils, i18n, i18nFormat, getLocale, setLocale 这些在 Rax 的编译模式下不能在视图中直接访问，需要转化成 this.xxx
+      content: `
+        const __$$context = this._context;
+        const { state, setState, dataSourceMap, reloadDataSource, utils, constants, i18n, i18nFormat, getLocale, setLocale } = __$$context;
+      `,
       linkAfter: [RAX_CHUNK_NAME.ClassRenderBegin],
     });
 
diff --git a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
index 07e50848e..b834a2855 100644
--- a/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
+++ b/packages/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
@@ -32,8 +32,14 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         lint: 'eslint --ext .js --ext .jsx ./',
       },
       dependencies: {
-        '@ali/lowcode-datasource-engine': '^0.1.0',
+        '@ali/lowcode-datasource-engine': '*',
+        // TODO: 如何动态获取下面这些依赖？
+        '@ali/lowcode-datasource-url-params-handler': '*',
+        '@ali/lowcode-datasource-fetch-handler': '*',
+        '@ali/lowcode-datasource-mtop-handler': '*',
+        '@ali/lowcode-datasource-mopen-handler': '*',
         'universal-env': '^3.2.0',
+        'intl-messageformat': '^9.3.6',
         rax: '^1.1.0',
         'rax-app': '^2.0.0',
         'rax-document': '^0.1.0',
diff --git a/packages/code-generator/src/plugins/project/i18n.ts b/packages/code-generator/src/plugins/project/i18n.ts
index a595c8afa..eaac073c8 100644
--- a/packages/code-generator/src/plugins/project/i18n.ts
+++ b/packages/code-generator/src/plugins/project/i18n.ts
@@ -23,6 +23,8 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
       fileType: FileType.JS,
       name: COMMON_CHUNK_NAME.FileMainContent,
       content: `
+        import IntlMessageFormat from 'intl-messageformat';
+
         const i18nConfig = ${i18nStr};
 
         let locale = 'en-US';
@@ -33,7 +35,23 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
           locale = target;
         };
 
-        const i18n = key => i18nConfig && i18nConfig[locale] && i18nConfig[locale][key] || '';
+        const i18nFormat = ({ id, defaultMessage }, variables) => {
+          const msg = i18nConfig && i18nConfig[locale] && i18nConfig[locale][id] || defaultMessage;
+          if (msg == null) {
+            console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+            return \`\${id}\`;
+          }
+
+          if (!variables || !variables.length) {
+            return msg;
+          }
+
+          return new IntlMessageFormat(msg, locale).format(variables);
+        }
+
+        const i18n = id => {
+          return i18nFormat({ id });
+        };
       `,
       linkAfter: [
         COMMON_CHUNK_NAME.ExternalDepsImport,
@@ -53,6 +71,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
           getLocale,
           setLocale,
           i18n,
+          i18nFormat,
         };
       `,
       linkAfter: [
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
index a42398577..33a086c66 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/package.json
@@ -8,8 +8,13 @@
     "lint": "eslint --ext .js --ext .jsx ./"
   },
   "dependencies": {
-    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "@ali/lowcode-datasource-engine": "*",
+    "@ali/lowcode-datasource-url-params-handler": "*",
+    "@ali/lowcode-datasource-fetch-handler": "*",
+    "@ali/lowcode-datasource-mtop-handler": "*",
+    "@ali/lowcode-datasource-mopen-handler": "*",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js
index 705ba5495..8f0de31e0 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {};
 
 let locale = 'en-US';
@@ -8,6 +10,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
index e3e89c9b0..cb5a4ddbe 100644
--- a/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo1/expected/demo-project/src/pages/Home/index.jsx
@@ -7,7 +7,7 @@ import Page from 'rax-view';
 
 import Text from 'rax-text';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
@@ -24,8 +24,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -39,6 +37,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <Page>
@@ -50,11 +60,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -78,12 +93,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -94,17 +106,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
index 70f2530d9..aa61cda9c 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/package.json
@@ -8,8 +8,13 @@
     "lint": "eslint --ext .js --ext .jsx ./"
   },
   "dependencies": {
-    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "@ali/lowcode-datasource-engine": "*",
+    "@ali/lowcode-datasource-url-params-handler": "*",
+    "@ali/lowcode-datasource-fetch-handler": "*",
+    "@ali/lowcode-datasource-mtop-handler": "*",
+    "@ali/lowcode-datasource-mopen-handler": "*",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js
index 705ba5495..8f0de31e0 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {};
 
 let locale = 'en-US';
@@ -8,6 +10,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
index f1dcacb95..5b78b28a0 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo2/expected/demo-project/src/pages/Home/index.jsx
@@ -9,11 +9,11 @@ import Text from 'rax-text';
 
 import Image from 'rax-image';
 
-import __$$urlParamsRequestHandler from '@ali/lowcode-datasource-engine/handlers/url-params';
+import { createUrlParamsHandler as __$$createUrlParamsRequestHandler } from '@ali/lowcode-datasource-url-params-handler';
 
-import __$$fetchRequestHandler from '@ali/lowcode-datasource-engine/handlers/fetch';
+import { createFetchHandler as __$$createFetchRequestHandler } from '@ali/lowcode-datasource-fetch-handler';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
@@ -47,14 +47,12 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, {
     runtimeConfig: true,
     requestHandlersMap: {
-      urlParams: __$$urlParamsRequestHandler({ search: this.props.location.search }),
-      fetch: __$$fetchRequestHandler,
+      urlParams: __$$createUrlParamsRequestHandler(this.props.location.search),
+      fetch: __$$createFetchRequestHandler(),
     },
   });
 
@@ -74,6 +72,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -147,11 +157,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -175,12 +190,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -191,17 +203,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return {
diff --git a/packages/code-generator/test-cases/rax-app/demo2/schema.json5 b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
index 9f7778e7f..a9f5813cd 100644
--- a/packages/code-generator/test-cases/rax-app/demo2/schema.json5
+++ b/packages/code-generator/test-cases/rax-app/demo2/schema.json5
@@ -348,10 +348,9 @@
         main: '/clone',
       },
     },
-    // 支持 TNPM
     {
       name: 'Toast',
-      type: 'tnpm',
+      type: 'npm',
       content: {
         package: 'universal-toast',
         version: '^1.2.0',
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
index ab52a96fc..f9451df10 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/package.json
@@ -8,8 +8,13 @@
     "lint": "eslint --ext .js --ext .jsx ./"
   },
   "dependencies": {
-    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "@ali/lowcode-datasource-engine": "*",
+    "@ali/lowcode-datasource-url-params-handler": "*",
+    "@ali/lowcode-datasource-fetch-handler": "*",
+    "@ali/lowcode-datasource-mtop-handler": "*",
+    "@ali/lowcode-datasource-mopen-handler": "*",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js
index 705ba5495..8f0de31e0 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {};
 
 let locale = 'en-US';
@@ -8,6 +10,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
index c3f22edd7..91dbd2d75 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Detail/index.jsx
@@ -11,7 +11,7 @@ import Link from 'rax-link';
 
 import Image from 'rax-image';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
@@ -30,8 +30,6 @@ class Detail$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -45,6 +43,18 @@ class Detail$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -61,11 +71,16 @@ class Detail$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -89,12 +104,9 @@ class Detail$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -105,17 +117,6 @@ class Detail$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
index dbd0e81ad..d1d93e306 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/Home/index.jsx
@@ -11,7 +11,7 @@ import Link from 'rax-link';
 
 import Image from 'rax-image';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
@@ -30,8 +30,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -45,6 +43,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -61,11 +71,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -89,12 +104,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -105,17 +117,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
index c4e62dd2d..9c14cc6e5 100644
--- a/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo3/expected/demo-project/src/pages/List/index.jsx
@@ -11,7 +11,7 @@ import Link from 'rax-link';
 
 import Image from 'rax-image';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
@@ -30,8 +30,6 @@ class List$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -45,6 +43,18 @@ class List$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -64,11 +74,16 @@ class List$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -92,12 +107,9 @@ class List$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -108,17 +120,6 @@ class List$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
index c8b7cf47b..c7a658230 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/package.json
@@ -8,8 +8,13 @@
     "lint": "eslint --ext .js --ext .jsx ./"
   },
   "dependencies": {
-    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "@ali/lowcode-datasource-engine": "*",
+    "@ali/lowcode-datasource-url-params-handler": "*",
+    "@ali/lowcode-datasource-fetch-handler": "*",
+    "@ali/lowcode-datasource-mtop-handler": "*",
+    "@ali/lowcode-datasource-mopen-handler": "*",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js
index 705ba5495..8f0de31e0 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {};
 
 let locale = 'en-US';
@@ -8,6 +10,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
index 0a93e8574..6b550a1e3 100644
--- a/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo4/expected/demo-project/src/pages/Home/index.jsx
@@ -11,7 +11,7 @@ import Text from 'rax-text';
 
 import Image from 'rax-image';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
@@ -30,8 +30,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -45,6 +43,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <View>
@@ -58,11 +68,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -86,12 +101,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -102,17 +114,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
index a42398577..33a086c66 100644
--- a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/package.json
@@ -8,8 +8,13 @@
     "lint": "eslint --ext .js --ext .jsx ./"
   },
   "dependencies": {
-    "@ali/lowcode-datasource-engine": "^0.1.0",
+    "@ali/lowcode-datasource-engine": "*",
+    "@ali/lowcode-datasource-url-params-handler": "*",
+    "@ali/lowcode-datasource-fetch-handler": "*",
+    "@ali/lowcode-datasource-mtop-handler": "*",
+    "@ali/lowcode-datasource-mopen-handler": "*",
     "universal-env": "^3.2.0",
+    "intl-messageformat": "^9.3.6",
     "rax": "^1.1.0",
     "rax-app": "^2.0.0",
     "rax-document": "^0.1.0",
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js
index 33f66ab5a..c3e7c955d 100644
--- a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/i18n.js
@@ -1,3 +1,5 @@
+import IntlMessageFormat from 'intl-messageformat';
+
 const i18nConfig = {
   'zh-CN': {
     'hello-world': '你好，世界！',
@@ -15,6 +17,22 @@ const setLocale = (target) => {
   locale = target;
 };
 
-const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
+const i18nFormat = ({ id, defaultMessage }, variables) => {
+  const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
+  if (msg == null) {
+    console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
+    return `${id}`;
+  }
 
-export { getLocale, setLocale, i18n };
+  if (!variables || !variables.length) {
+    return msg;
+  }
+
+  return new IntlMessageFormat(msg, locale).format(variables);
+};
+
+const i18n = (id) => {
+  return i18nFormat({ id });
+};
+
+export { getLocale, setLocale, i18n, i18nFormat };
diff --git a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
index 40444b2f2..d7885feb3 100644
--- a/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
+++ b/packages/code-generator/test-cases/rax-app/demo5/expected/demo-project/src/pages/Home/index.jsx
@@ -7,7 +7,7 @@ import Page from 'rax-view';
 
 import Text from 'rax-text';
 
-import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine';
+import { create as __$$createDataSourceEngine } from '@ali/lowcode-datasource-engine/runtime';
 
 import { isMiniApp as __$$isMiniApp } from 'universal-env';
 
@@ -24,8 +24,6 @@ class Home$$Page extends Component {
 
   _context = this._createContext();
 
-  _i18n = this._createI18nDelegate();
-
   _dataSourceConfig = this._defineDataSourceConfig();
   _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
 
@@ -39,6 +37,18 @@ class Home$$Page extends Component {
 
   render() {
     const __$$context = this._context;
+    const {
+      state,
+      setState,
+      dataSourceMap,
+      reloadDataSource,
+      utils,
+      constants,
+      i18n,
+      i18nFormat,
+      getLocale,
+      setLocale,
+    } = __$$context;
 
     return (
       <Page>
@@ -56,11 +66,16 @@ class Home$$Page extends Component {
   _createContext() {
     const self = this;
 
+    // 保存下最新的状态，这样 setState 可以搞成同步一样的了
+    self._latestState = self.state;
+
     const context = {
       get state() {
-        return self.state;
+        // 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
+        return self._latestState;
       },
       setState(newState) {
+        self._latestState = { ...self._latestState, ...newState };
         self.setState(newState);
       },
       get dataSourceMap() {
@@ -84,12 +99,9 @@ class Home$$Page extends Component {
       get constants() {
         return __$$constants;
       },
-      get i18n() {
-        return self._i18n;
-      },
-      getLocale() {
-        return __$$i18n.getLocale();
-      },
+      i18n: __$$i18n.i18n,
+      i18nFormat: __$$i18n.i18nFormat,
+      getLocale: __$$i18n.getLocale,
       setLocale(locale) {
         __$$i18n.setLocale(locale);
         self.forceUpdate();
@@ -100,17 +112,6 @@ class Home$$Page extends Component {
     return context;
   }
 
-  _createI18nDelegate() {
-    return new Proxy(
-      {},
-      {
-        get(target, prop) {
-          return __$$i18n.i18n(prop);
-        },
-      },
-    );
-  }
-
   _defineDataSourceConfig() {
     const __$$context = this._context;
     return { list: [] };
diff --git a/packages/datasource-engine/src/core/DataSourceEngine.ts b/packages/datasource-engine/src/core/DataSourceEngine.ts
index 30052ee6c..1d15aeee1 100644
--- a/packages/datasource-engine/src/core/DataSourceEngine.ts
+++ b/packages/datasource-engine/src/core/DataSourceEngine.ts
@@ -17,8 +17,7 @@ export class DataSourceEngine implements IDataSourceEngine {
   ) {
     _dataSourceConfig.list?.forEach((ds) => {
       // 确保数据源都有处理器
-      const requestHandler =
-        ds.requestHandler || _options?.requestHandlersMap?.[ds.type];
+      const requestHandler = ds.requestHandler || _options?.requestHandlersMap?.[ds.type];
       if (!requestHandler) {
         throw new Error(`No request handler for "${ds.type}" data source`);
       }
@@ -51,12 +50,8 @@ export class DataSourceEngine implements IDataSourceEngine {
         }
       }
 
-      await sleep(0); // TODO: 如何优雅地解决 setState 的异步问题？
-
       // 然后是所有其他的
-      const remainDataSourceConfigList = allDataSourceConfigList.filter(
-        (x) => x.type !== 'urlParams',
-      );
+      const remainDataSourceConfigList = allDataSourceConfigList.filter((x) => x.type !== 'urlParams');
 
       // 先发起异步的
       const asyncLoadings: Array<Promise<unknown>> = [];
@@ -65,9 +60,7 @@ export class DataSourceEngine implements IDataSourceEngine {
           const options = getValue(ds.options);
           if (options && !options.isSync) {
             this._dataSourceMap[ds.id].setOptions(options);
-            asyncLoadings.push(
-              this._dataSourceMap[ds.id].load(options?.params).catch(() => {}),
-            );
+            asyncLoadings.push(this._dataSourceMap[ds.id].load(options?.params).catch(() => {}));
           }
         }
       }
@@ -106,18 +99,12 @@ export class DataSourceEngine implements IDataSourceEngine {
   }
 }
 
-export const create: IDataSourceEngineFactory['create'] = (
-  dataSourceConfig,
-  runtimeContext,
-  options,
-) => {
+export const create: IDataSourceEngineFactory['create'] = (dataSourceConfig, runtimeContext, options) => {
   return new DataSourceEngine(dataSourceConfig, runtimeContext, options);
 };
 
 function getValue<T>(valueOrValueGetter: T | (() => T)): T;
-function getValue<T extends boolean>(
-  valueOrValueGetter: T | (() => T),
-): T | undefined {
+function getValue<T extends boolean>(valueOrValueGetter: T | (() => T)): T | undefined {
   if (typeof valueOrValueGetter === 'function') {
     try {
       return valueOrValueGetter();
diff --git a/packages/datasource-engine/src/core/RuntimeDataSource.ts b/packages/datasource-engine/src/core/RuntimeDataSource.ts
index e9ea43e87..8f53b45f7 100644
--- a/packages/datasource-engine/src/core/RuntimeDataSource.ts
+++ b/packages/datasource-engine/src/core/RuntimeDataSource.ts
@@ -1,9 +1,5 @@
-import {
-  DataSourceOptions,
-  IRuntimeDataSource,
-  RequestHandler,
-  RuntimeDataSourceStatus,
-} from '../types';
+import { DataSourceOptions, IRuntimeDataSource, RequestHandler, RuntimeDataSourceStatus } from '../types';
+import { DataSourceResponse } from '../types/DataSourceResponse';
 
 export class RuntimeDataSource<
   TParams extends Record<string, unknown> = Record<string, unknown>,
@@ -19,13 +15,10 @@ export class RuntimeDataSource<
     private _id: string,
     private _type: string,
     private _initialOptions: DataSourceOptions<TParams>,
-    private _requestHandler: RequestHandler<
-      DataSourceOptions<TParams>,
-      TRequestResult
-    >,
+    private _requestHandler: RequestHandler<DataSourceOptions<TParams>, DataSourceResponse<TRequestResult>>,
     private _dataHandler:
       | ((
-          data: TRequestResult | undefined,
+          data: DataSourceResponse<TRequestResult> | undefined,
           error: unknown | undefined,
         ) => TResultData | Promise<TResultData>)
       | undefined,
@@ -79,11 +72,11 @@ export class RuntimeDataSource<
 
   private async _request(options: DataSourceOptions<TParams>) {
     try {
-      const reqResult = await this._requestHandler(options);
+      const response = await this._requestHandler(options);
 
       const data = this._dataHandler
-        ? await this._dataHandler(reqResult, undefined)
-        : ((reqResult as unknown) as TResultData);
+        ? await this._dataHandler(response, undefined)
+        : ((response.data as unknown) as TResultData);
 
       return data;
     } catch (err) {
diff --git a/packages/datasource-engine/src/handlers/fetch.ts b/packages/datasource-engine/src/handlers/fetch.ts
index 3db926c9f..d0f6d344b 100644
--- a/packages/datasource-engine/src/handlers/fetch.ts
+++ b/packages/datasource-engine/src/handlers/fetch.ts
@@ -18,7 +18,7 @@ const fetchHandler: RequestHandler = async ({
 
   const res = await request(reqOptions as RequestOptions);
 
-  return res.data;
+  return res;
 };
 
 export default fetchHandler;
diff --git a/packages/datasource-engine/src/handlers/mtop.ts b/packages/datasource-engine/src/handlers/mtop.ts
index 88ab8e01b..4894b9ad9 100644
--- a/packages/datasource-engine/src/handlers/mtop.ts
+++ b/packages/datasource-engine/src/handlers/mtop.ts
@@ -1,15 +1,18 @@
 import mtop from '@ali/universal-mtop';
 import { RequestHandler } from '../types';
 
-const mtopHandler: RequestHandler = async ({ data, params, ...options }) => {
+const mtopHandler: RequestHandler = async (options) => {
+  const { api, uri, data, params, type, method, ...otherOptions } = options;
   const reqOptions = {
-    ...options,
+    ...otherOptions,
+    api: api || uri,
     data: data || params,
+    type: type || method,
   };
 
   const res = await mtop(reqOptions);
 
-  return res.data;
+  return res;
 };
 
 export default mtopHandler;
diff --git a/packages/datasource-engine/src/handlers/url-params.ts b/packages/datasource-engine/src/handlers/url-params.ts
index d7fbfba3d..67540c9f2 100644
--- a/packages/datasource-engine/src/handlers/url-params.ts
+++ b/packages/datasource-engine/src/handlers/url-params.ts
@@ -1,14 +1,12 @@
 import qs from 'query-string';
 import { RequestHandler } from '../types';
 
-export default function urlParamsHandler({
-  search,
-}: {
-  search: string | Record<string, unknown>;
-}): RequestHandler {
+export default function urlParamsHandler(search: string | Record<string, unknown>): RequestHandler {
   const urlParams = typeof search === 'string' ? qs.parse(search) : search;
 
   return async () => {
-    return urlParams;
+    return {
+      data: urlParams,
+    };
   };
 }
diff --git a/packages/datasource-engine/src/types/DataSourceResponse.ts b/packages/datasource-engine/src/types/DataSourceResponse.ts
new file mode 100644
index 000000000..36bd45fff
--- /dev/null
+++ b/packages/datasource-engine/src/types/DataSourceResponse.ts
@@ -0,0 +1,3 @@
+export type DataSourceResponse<TData = unknown> = {
+  data: TData;
+};
diff --git a/packages/datasource-engine/src/types/RequestHandler.ts b/packages/datasource-engine/src/types/RequestHandler.ts
index aa9708585..c8a96f099 100644
--- a/packages/datasource-engine/src/types/RequestHandler.ts
+++ b/packages/datasource-engine/src/types/RequestHandler.ts
@@ -1,6 +1,7 @@
 import { DataSourceOptions } from './DataSourceOptions';
+import { DataSourceResponse } from './DataSourceResponse';
 
 export type RequestHandler<
   TOptions extends DataSourceOptions = DataSourceOptions,
-  TResult = unknown
+  TResult extends DataSourceResponse = DataSourceResponse
 > = (options: TOptions) => Promise<TResult>;
diff --git a/packages/types/src/data-source.ts b/packages/types/src/data-source.ts
index e33912fd8..157e65648 100644
--- a/packages/types/src/data-source.ts
+++ b/packages/types/src/data-source.ts
@@ -6,8 +6,8 @@ import { CompositeValue, JSExpression, JSFunction, JSONObject } from './value-ty
  */
 export interface DataSourceConfig {
   id: string;
-  isInit: boolean | JSExpression;
-  type: string;
+  isInit?: boolean | JSExpression;
+  type?: string;
   requestHandler?: JSFunction;
   dataHandler?: JSFunction;
   options?: {