Ant Design Confirms 请求失败后关闭 Loading：最佳实践指南

\u60a8\u5728\u8bf7\u6c42\u5931\u8d25\u540e\u53ef\u4ee5\u5173\u95ed\u0022loading\u0022\uff0c\u5177\u4f53\u65b9\u6cd5\u5982\u4e0b\uff1a\n\n1\uff0e\u5728\u53d1\u9001\u8bf7\u6c42\u524d\u663e\u793a\u0022loading\u0022\uff0c\u53ef\u4ee5\u4f7f\u7528\u0022antd\u0022\u7684\u0022Modal\u0022\u7ec4\u4ef6\u6216\u0022Spin\u0022\u7ec4\u4ef6\u6765\u5b9e\u73b0\u0022loading\u0022\u6548\u679c\u3002\n2\uff0e\u5728\u8bf7\u6c42\u5931\u8d25\u7684\u56de\u8c03\u51fd\u6570\u4e2d\uff0c\u5173\u95ed\u0022loading\u0022\u3002\u5982\u679c\u4f7f\u7528\u0022Modal\u0022\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u901a\u8fc7\u0022visible\u0022\u5c5e\u6027\u6765\u63a7\u5236\u662f\u5426\u663e\u793a\u0022loading\u0022\uff0c\u5c06\u5176\u8bbe\u7f6e\u4e3a\u0022false\u0022\u5c31\u53ef\u4ee5\u5173\u95ed\u0022loading\u0022\uff1b\u5982\u679c\u4f7f\u7528\u0022Spin\u0022\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u901a\u8fc7\u8bbe\u7f6e\u0022loading\u0022\u5c5e\u6027\u4e3a\u0022false\u0022\u6765\u5173\u95ed\u0022loading\u0022\u3002\n\n\u4e0b\u9762\u662f\u4e00\u4e2a\u793a\u4f8b\u4ee3\u7801\uff1a\n\njsx\nimport { useState } from 'react';\nimport { Button, Modal } from 'antd';\n\nconst Example = () => {\n const [loading, setLoading] = useState(false);\n const [visible, setVisible] = useState(false);\n\n const handleRequest = () => {\n setLoading(true);\n\n // \u53d1\u9001\u8bf7\u6c42\n yourRequestFunction()\n .then(response => {\n // \u8bf7\u6c42\u6210\u529f\u5904\u7406\u903c\u8f91\n setLoading(false);\n })\n .catch(error => {\n // \u8bf7\u6c42\u5931\u8d25\u5904\u7406\u903c\u8f91\n setLoading(false);\n setVisible(false); // \u5173\u95ed\u0022loading\u0022\n });\n };\n\n return (\n <div>\n <Button onClick={handleRequest}>\u53d1\u9001\u8bf7\u6c42</Button>\n <Modal visible={visible}>Loading...</Modal>\n </div>\n );\n};\n\n\n\u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u0022handleRequest\u0022\u51fd\u6570\u4f7f\u7528\u4e8e\u53d1\u9001\u8bf7\u6c42\uff0c\u70b9\u51fb\u6309\u94ae\u540e\u4f1a\u89e6\u52a8\u8be5\u51fd\u6570\u3002\u5728\u8be5\u51fd\u6570\u4e2d\uff0c\u9996\u5148\u5c06\u0022loading\u0022\u8bbe\u7f6e\u4e3a\u0022true\u0022\uff0c\u5c31\u662f\u663e\u793a\u0022loading\u0022\u3002\u7136\u540e\u53d1\u9001\u8bf7\u6c42\uff0c\u5e76\u6839\u636e\u8bf7\u6c42\u7ed3\u679c\u5904\u7406\u903c\u8f91\uff0c\u65e0\u8bba\u8bf7\u6c42\u6210\u529f\u8fd8\u662f\u5931\u8d25\uff0c\u6700\u540e\u90fd\u5c06\u0022loading\u0022\u8bbe\u7f6e\u4e3a\u0022false\u0022\uff0c\u5c31\u662f\u5173\u95ed\u0022loading\u0022\u3002\u5982\u679c\u8bf7\u6c42\u5931\u8d25\uff0c\u8fd8\u53ef\u4ee5\u901a\u8fc7\u8bbe\u7f6e\u0022visible\u0022\u4e3a\u0022false\u0022\u6765\u5173\u95ed\u0022Modal\u0022\u7ec4\u4ef6\u3002