AsyncButton

结合 useLockFn + useMutation + Antd Button 封装的异步按钮组件，在异步函数执行过程中会锁定按钮，异步函数执行结束后解锁

处理异步点击事件的场景都推荐使用 AsyncButton 代替 Button

TIP

AsyncButton 参数与 Button 一致

example

export default function BannerList() {
  const {message} = App.useApp()
  const tableRef = useRef()
  const updateBanner = async record => {
    const {status, id} = record
    try {
      await io.api.updateBanner({
        id,
        status:
          status === BANNER_STATUS.PUBLISHED
            ? BANNER_STATUS.UNPUBLISHED
            : BANNER_STATUS.PUBLISHED,
      })
      message.success('操作成功')
      tableRef.current.reload()
    } catch (error) {
      message.error(error.displayMessage || '操作失败')
    }
  }

  const deleteBanner = async ({id}) => {
    try {
      await io.api.deleteBanner({id})
      message.success('删除成功')
      tableRef.current.reload()
    } catch (error) {
      message.error(error.displayMessage || '删除失败')
    }
  }

  return (
    <Table
      actionRef={tableRef}
      request={getBannerList}
      columns={[
        {
          title: '操作',
          valueType: 'option',
          key: 'option',
          fixed: 'left',
          render: (_, record) => {
            return (
              <div className="flex gap-8">
                <Link to={generatePath(ROUTE.BANNER_EDIT, {id: record.id})}>
                  <Button size="small" type="primary">
                    编辑
                  </Button>
                </Link>

                <AsyncButton size="small" onClick={() => updateBanner(record)}>
                  {record.status === BANNER_STATUS.PUBLISHED ? '下架' : '上架'}
                </AsyncButton>

                {record.status === BANNER_STATUS.UNPUBLISHED ? (
                  <AsyncPopconfirm
                    cancelText="取消"
                    description="是否确认删除，删除后不可恢复"
                    okText="确认"
                    title="确认删除"
                    onConfirm={() => deleteBanner(record)}
                  >
                    <Button danger size="small" type="default">
                      删除
                    </Button>
                  </AsyncPopconfirm>
                ) : null}
              </div>
            )
          },
        },
        {
          title: 'banner状态',
          dataIndex: 'status',
          search: true,
          formItemProps: {
            labelCol: {span: 6},
          },
          order: 3,
          valueEnum: BANNER_STATUS_TEXT_MAP,
        },
      ]}
    />
  )
}