chore: Service组件提供__response字段用于区分接口失败情况 (#5792)

docs/zh-CN/components/service.md

@@ -703,11 +703,11 @@ ws.on('connection', function connection(ws) {
 
 > `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。
 
-| 事件名称          | 事件参数                                                                                 | 说明                                                |
-| ----------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------- |
-| init              | -                                                                                        | 组件实例被创建并插入 DOM 中时触发。2.4.1 及以上版本 |
-| fetchInited       | `event.data` api 远程请求返回的初始化数据<br/>`[name]: any` 当前数据域中指定字段的值     | 远程初始化接口请求成功时触发                        |
-| fetchSchemaInited | `event.data` schemaApi 远程请求返回的 UI 内容<br/>`[name]: any` 当前数据域中指定字段的值 | 远程 schemaApi UI 内容接口请求成功                  |
+| 事件名称          | 事件参数                                                                                                                                                                               | 说明                                                |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
+| init              | -                                                                                                                                                                                      | 组件实例被创建并插入 DOM 中时触发。2.4.1 及以上版本 |
+| fetchInited       | `event.data` api 远程请求返回的初始化数据<br/>`[name]: any` 当前数据域中指定字段的值</br>`__response: {msg: string; error: boolean}`接口元数据, `msg`为消息体, `error`表示接口是否成功 | 远程初始化接口请求成功时触发                        |
+| fetchSchemaInited | `event.data` schemaApi 远程请求返回的 UI 内容<br/>`[name]: any` 当前数据域中指定字段的值`__response: {msg: string; error: boolean}`接口元数据, `msg`为消息体, `error`表示接口是否成功  | 远程 schemaApi UI 内容接口请求成功                  |
 
 ## 动作表
 

examples/components/EventAction/cmpt-event-action/ServiceEvent.jsx

@@ -37,6 +37,68 @@ export default {
                 actions: [
                   {
                     actionType: 'toast',
+                    expression: '${!__response.error}',
+                    args: {
+                      msgType: 'success',
+                      msg: 'API inited: <b>${date}</b>'
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      }
+    },
+    {
+      type: 'divider'
+    },
+    {
+      type: 'tpl',
+      tpl: '对于amis的接口标准来说, status不为0, 则视为请求失败. 该事件额外提供了<code>__response</code>参数用于区分接口状态码实际是200成功, 但接口中的status字段不为0的情况(接口状态码如果为非200, 则不会触发该事件)',
+      inline: false
+    },
+    {
+      type: 'action',
+      level: 'danger',
+      label: 'fetchInited(failed)',
+      actionType: 'dialog',
+      dialog: {
+        title: 'fetchInited(failed)',
+        body: [
+          {
+            type: 'service',
+            name: 'service-api',
+            id: 'service-failed',
+            api: '/api/mock2/service/fail',
+            body: {
+              type: 'panel',
+              title: '$title',
+              body: [
+                {
+                  type: 'tpl',
+                  tpl: '<strong>toast消息提示设置了触发条件, 当接口失败时不显示toast, 所以结果只会有1个全局默认的toast, 如果不设置条件则会弹出2个toast.</strong>',
+                  inline: false
+                },
+                {
+                  type: 'tpl',
+                  tpl: '错误信息是: ${__response.msg}',
+                  inline: false
+                }
+              ]
+            },
+            onEvent: {
+              fetchInited: {
+                actions: [
+                  {
+                    actionType: 'setValue',
+                    args: {
+                      value: '${event.data}'
+                    }
+                  },
+                  {
+                    actionType: 'toast',
+                    expression: '${!__response.error}',
                     args: {
                       msgType: 'success',
                       msg: 'API inited: <b>${date}</b>'

mock/cfc/mock/service/fail.json

@@ -0,0 +1,9 @@
+{
+  "status": 500,
+  "msg": "Service fetch failed",
+  "error": {
+    "message": "Service fetch failed",
+    "code": 500
+  },
+  "data": null
+}

packages/amis/src/renderers/Service.tsx

@@ -20,7 +20,8 @@ import {
   isObjectShallowModified,
   isVisible,
   qsstringify,
-  createObject
+  createObject,
+  extendObject
 } from 'amis-core';
 import {
   BaseSchema,
@@ -502,10 +503,13 @@ export default class Service extends React.Component<ServiceProps> {
     // todo 应该统一这块
     // 初始化接口返回的是整个 response，
     // 保存 ajax 请求的时候返回时数据部分。
-    const data = result?.hasOwnProperty('ok') ? result.data : result;
-    const {onBulkChange, dispatchEvent} = this.props;
+    const data = result?.hasOwnProperty('ok') ? result.data ?? {} : result;
+    const {onBulkChange, dispatchEvent, store} = this.props;
 
-    dispatchEvent?.('fetchInited', data);
+    dispatchEvent?.('fetchInited', {
+      ...data,
+      __response: {msg: store.msg, error: store.error}
+    });
 
     if (!isEmpty(data) && onBulkChange) {
       onBulkChange(data);
@@ -515,9 +519,12 @@ export default class Service extends React.Component<ServiceProps> {
   }
 
   afterSchemaFetch(schema: any) {
-    const {onBulkChange, formStore, dispatchEvent} = this.props;
+    const {onBulkChange, formStore, dispatchEvent, store} = this.props;
 
-    dispatchEvent?.('fetchSchemaInited', schema);
+    dispatchEvent?.('fetchSchemaInited', {
+      ...schema,
+      __response: {msg: store.msg, error: store.error}
+    });
 
     if (formStore && schema?.data && onBulkChange) {
       onBulkChange && onBulkChange(schema.data);