amis调用接口的几种常见方式

一、serviceamis - 低代码前端框架-servicehttps://aisuda.bce.baidu.com/amis/zh-CN/components/service使用场景:1.需要在form组件中单独处理保存接口2.需要存储变量给页面使用{ type: button, label: 新增, actionType: dialog, dialog: { body: { type: form, debug: true, api: { url: /amis/api/mock2/form/saveForm, method: POST, data: { query_no: ${query_no-01} } }, body: [ { id: service-1, type: service, api: { url: /amis/api/mock2/options/chainedOptions?waitSeconds1parentId$parentIdlevel$levelmaxLevel4, method: GET, responseData: { options: ${items|pick:index,value,label} } }, initFetch: false, body: { name: query_no, type: hidden, label: 前一个编号, required: true, value: ${options[options.length-1].index} } } ] }, actions: [ { type: button, label: 保存, onEvent: { click: { actions: [ { actionType: reload, componentId: service-1 } ] } } } ] } }二、ajaxamis - 低代码前端框架-发送-http-请求https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/event-action#%E5%8F%91%E9%80%81-http-%E8%AF%B7%E6%B1%82amis - 低代码前端框架-Action行为按钮https://aisuda.bce.baidu.com/amis/zh-CN/components/action#ajax-%E8%AF%B7%E6%B1%82使用场景不需要校验输入框错误信息就直接调用接口的场景比如期望保存接口和提交接口分开处理代码示例{ type: page, data: { name: lll, id: 222 }, body: [ { type: button, id: b_001, label: 发送 Ajax 请求, level: primary, confirmText: 确认要发出这个请求, onEvent: { click: { actions: [ { actionType: ajax, args: { api: { url: /amis/api/mock2/form/saveForm?name${name}, method: post, data: { resId: ${id} }, messages: { success: 成功了欧耶, failed: 失败了呢。。 } } } } ] } } } ] }简化1{ type: page, data: { name: lll, id: 222 }, body: [ { type: button, id: b_001, label: 发送 Ajax 请求, level: primary, confirmText: 确认要发出这个请求, onEvent: { click: { actions: [ { actionType: ajax, api: { url: /amis/api/mock2/form/saveForm?name${name}, method: post, data: { resId: ${id} }, messages: { success: 成功了欧耶, failed: 失败了呢。。 } } } ] } } } ] }简写2{ type: page, data: { name: lll, id: 222 }, body: [ { type: button, id: b_001, label: 发送 Ajax 请求, level: primary, confirmText: 确认要发出这个请求, actionType: ajax, api: { url: /amis/api/mock2/form/saveForm?name${name}, method: post, data: { resId: ${id} }, messages: { success: 成功了欧耶, failed: 失败了呢。。 } } } } ] }三、custom XMLHttpRequestamis - 低代码前端框架-自定义jshttps://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/event-action#%E8%87%AA%E5%AE%9A%E4%B9%89-jsXML HttpRequesthttps://www.w3school.com.cn/xml/xml_http.asp原生JavaScript的xhr代码示例get请求示例var xhr new XMLHttpRequest(); var params new URLSearchParams(); params.append(a, 1); params.append(b, 1); xhr.open(GET, /xxx? params.toString(), true); xhr.onreadystatechange function() { if (xhr.readyState 4) { if (xhr.status 200) { console.log(xhr.responseText); } else { console.error(请求失败:, xhr.status); } } }; xhr.send();post请求示例var xhr new XMLHttpRequest(); xhr.open(POST, /xxx, true); xhr.setRequestHeader(Content-Type, application/json); xhr.onreadystatechange function() { if (xhr.readyState 4) { if (xhr.status 200) { console.log(xhr.responseText); } else { console.error(请求失败:, xhr.status); } } }; xhr.send(JSON.stringify({ a: 1, b: 1 }));amis框架代码示例{ type: page, data: { name: lll, id: 222 }, body: [ { type: button, id: b_001, label: 发送 Ajax 请求, level: primary, confirmText: 确认要发出这个请求, onEvent: { click: { actions: [ { actionType: custom, script: const {name, id} event.data;\n\nvar xhr new XMLHttpRequest();\nxhr.open(POST, /amis/api/mock2/form/saveForm?name encodeURIComponent(name), true);\nxhr.setRequestHeader(Content-Type, application/json);\n\nxhr.onload function() {\n if (xhr.status 200 xhr.status 300) {\n var result JSON.parse(xhr.responseText);\n event.setData({ resId: result.id || id });\n\n doAction({\n actionType: toast,\n args: {\n msgType: info,\n msg: 成功了欧耶\n }\n });\n } else {\n doAction({\n actionType: toast,\n args: {\n msgType: error,\n msg: 失败了呢。。\n }\n });\n }\n};\n\nxhr.onerror function() {\n doAction({\n actionType: toast,\n args: {\n msgType: error,\n msg: 失败了呢。。\n }\n });\n};\n\nxhr.send(JSON.stringify({ resId: id })); } ] } } } ] }四、form组件使用api属性{ type: button, label: 新增, actionType: dialog, dialog: { body: { type: form, debug: true, api: { url: /amis/api/mock2/form/saveForm, method: POST, data: { query_no: ${query_no-01} } }, body: [ { type: service, api: { url: /amis/api/mock2/options/chainedOptions?waitSeconds1parentId$parentIdlevel$levelmaxLevel4, method: GET, responseData: { options: ${items|pick:index,value,label} } }, body: { name: query_no, type: hidden, label: 前一个编号, required: true, value: ${options[options.length-1].index} } } ] }, actions: [ { type: button, label: 保存, actionType: submit } ] } }