真切的感受到了async 和await在实际开发的作用有多大，举个代码片段例子，一个简单的表单校验加按钮触发控制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| const validateFields = async () => {
try {
// 触发表单验证
await form.validateFields();
return true;
} catch (error) {
if (form.getFieldsError()) {
message.error(t('normal.searchLimit'));
}
return false;
}
};
const { run: getList } = useRequest(
async (options?: any) => {
const { pageNum = defaultPageNum, pageSize = curPageSize } = options || {};
const requestConfig = {
pageNum,
serviceType: 1,
pageSize,
...getFormParams(),
};
exportParams.current = requestConfig;
if (options) {
setCurPageNum(options.pageNum);
setCurPageSize(options.pageSize);
}
const isValid = await validateFields();
if (isValid) {
return getRecordList(requestConfig);
}
return null;
},
|
validateFields的函数返回值是一个异步函数来的，所以返回的是一个promise对象，而不是一个普通的函数，所以不能够直接调用validateFields（）来获取返回的值，而是要加await修饰符等待它执行完毕。但是同步的await去修饰的函数要运行的时候，外部必须加上async去搭配使用的，因为它只允许在异步函数里面使用，不然会出现问题。
另外表单验证可以使用自带的rule，而不需要使用到自定义的validateStatus的写法。比如：
1
| <Form.Item name={['selectSearch', 'fieldValue']} className={styles.input} validateStatus={formErrors.fieldValue ? 'error' : ''} help={formErrors.fieldValue}>
|
而是这样的方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| return (
<div className="container">
<PageContainer title={t('subscribe.record')}>
<Form layout="inline" form={form} initialValues={{ status: ['active'] }} validateTrigger={[]}>
<Form.Item name="sellerId" rules={formErrorRule}>
<SellerPicker style={{ width: '150px' }} />
</Form.Item>
<Form.Item name="subType" rules={formErrorRule}>
<Select style={{ width: '150px' }} placeholder={t('seller.subscribeType')}>
<Select.Option value="trial">{t('seller.tryOut')}</Select.Option>
<Select.Option value="paid">{t('seller.pay')}</Select.Option>
<Select.Option value="free">{t('subscribe.free')}</Select.Option>
</Select>
</Form.Item>
// 省略
<div style={{ display: 'flex', gap: '5px', flexWrap: 'wrap' }}>
<AuthButton type="primary" authCode="12:07:01" onClick={search}>
{t('normal.search')}
</AuthButton>
<AuthButton authCode="12:07:02" onClick={onReset}>
{t('normal.reset')}
</AuthButton>
<AuthButton authCode="12:07:03" onClick={toggle} loading={exporting}>
{t('normal.export')}
</AuthButton>
{renderElement()}
</div>
</Form>
<br />
<Table rowKey="id" scroll={{ x: 2000 }} columns={columns} dataSource={list} pagination={pageConfig} />
</PageContainer>
</div>
);
};
|
1
2
3
4
5
6
7
8
9
10
11
| const formErrorRule: Rule[] = [
({ getFieldsValue }) => ({
validator() {
const { sellerId, subType, subBizType, status } = getFieldsValue();
if (!sellerId && !subType && !subBizType && status.length === 0) {
return Promise.reject();
}
return Promise.resolve();
},
}),
];
|
以满足某种业务场景，在需要用的校验的时候，就去使用那个方法。
