antd中的message.loading

antd中的message.loading

今儿遇到一个需求问题，在table中的操作栏点击删除，由于是向后端发起请求，所以需要一个loading效果，loading又是使用的antd中的message.loading（）。

如下是antd中提供的写法

import { message, Button } from 'antd';

const success = () => {
  message
    .loading('Action in progress..', 2.5)
    .then(() => message.success('Loading finished', 2.5))
    .then(() => message.info('Loading finished is finished', 2.5));
};

ReactDOM.render(<Button onClick={success}>Display sequential messages</Button>, mountNode);

我自己在业务中的写与其大同小异

const loading = message.loading('删除中...');
action
  .del(id)
  .then(()=>{
  	loading;
  })
  .then(() => {
    message.success('删除成功');
  })
  .catch(() => {
    message.error('删除失败');
  });

但是这样写语法会报错，如下
React | Expected an assignment or function call and instead saw.....

然后只能又改写法

message.loading('删除中...');
action
  .del(id)
  .then(() => {
    message.success('删除成功');
  })
  .catch(() => {
    message.error('删除失败');
  });

DONE！虽然不是很完美，但还是解决了问题。