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

一、service

amis - 低代码前端框架-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-0+1}" } }, "body": [ { "id": "service-1", "type": "service", "api": { "url": "/amis/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4", "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" } ] } } } ] } }

二、ajax

amis - 低代码前端框架-发送-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%82

amis - 低代码前端框架-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 + XMLHttpRequest

amis - 低代码前端框架-自定义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-0+1}" } }, "body": [ { "type": "service", "api": { "url": "/amis/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4", "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" } ] } }