为什么我的 fetch post 请求在断点处被击中，但不是没有？

Question

我在 React .Net 应用程序中有以下代码：

handleAdd(userId, name) {

   name = encodeURIComponent(name);

   fetch('api/deck/create/' + userId + '/' + name, {

     method: 'POST'

   }).then();

}

代码在这里被调用：

<Form onSubmit={(id, name) => this.handleAdd(1, this.state.newDeckName)}> //1 is just a debug id

<Modal.Body>

<FormGroup controlId="formNewDeck">

<FormControl placeholder="Deck Name" value={this.state.newDeckName} onChange={this.handleDeckNameChange} name="name"/>

</FormGroup>

</Modal.Body>

<Modal.Footer>

<Button variant="secondary" onClick={this.handleCloseModal}>Close</Button>

<Button variant="primary" type="submit">Add Deck</Button>

</Modal.Footer>

</Form>

如果我在调试工具中断点并跳过它，它会命中我的控制器并正确插入到我的数据库中，但是，如果我没有在代码上断点并让它运行，那么控制器永远不会被命中，因此什么都不是插入到数据库中，有人对此有解释吗？

Answer 1

有一种竞争条件，即在帖子完成之前页面正在刷新，我的断点让页面有时间发布请求。使用async并await修复了这个async handleAdd(userId, name) {&nbsp; &nbsp;name = encodeURIComponent(name);&nbsp; &nbsp;await fetch('api/deck/create/' + userId + '/' + name, {&nbsp; &nbsp; &nbsp;method: 'POST'&nbsp; &nbsp;}).then();}