如何避免该并发计时器的显式Promise构造反模式，该模式应在Promise完成时重置

Question

我写了一个非常简单的脚本：

{
waiting: false,
async handleWaiting(promise, timeout) {
return new Promise((res, rej) => {
let loadingStarted = false;
const timeoutInstance = setTimeout(() => {
loadingStarted = true;
this.waiting = true;
}, timeout);
const onFinished = () => {
if (loadingStarted) {
this.waiting = false;
}
clearTimeout(timeoutInstance);
}
promise
.then((result) => {
onFinished();
res(result);
})
.catch((ex) => {
onFinished();
rej(ex);
});
});
},
async searchForTerm(term) {
this.results = await this.handleWaiting(this.$wire.query(term), 500);
// do something with the results...
},
}

它会拨动等待搜索字段的微调器。

有人给我写信说：

您的代码具有Explicit Promise构造反模式！您应该使用链接和promise组合。。。此外，一个返回promise但不等待任何事情的函数不一定是异步

我修改了这个工作代码。但我犯了一个又一个错误！

有人能帮我吗，或者至少让我走上正轨。

我不太擅长javascript，但我有兴趣把它写得更好。

Answer 1

查看什么是显式promise构造反模式以及如何避免它？详细信息。一般来说，当你已经有了承诺时，你(大多数(不需要new Promise。您可以重用现有的一个(如果需要，可以将其链接(。

您的代码可以简化。

• 删除不必要的new Promise
• 重用并返回现有承诺
• 删除代码重复并改用Promise#finally

{
waiting: false,
handleWaiting(promise, timeout) {
let loadingStarted = false;
const timeoutInstance = setTimeout(() => {
loadingStarted = true;
this.waiting = true;
}, timeout);
return promise.finally(() => {
if (loadingStarted) {
this.waiting = false;
}
clearTimeout(timeoutInstance);
});
},
async searchForTerm(term) {
this.results = await this.handleWaiting(this.$wire.query(term), 500);
// do something with the results...
},
}

你可能也可以去掉loadingStarted。为什么有两个状态变量？无论如何，您从未重置loadingStarted。

{
waiting: false,
handleWaiting(promise, timeout) {
const timeoutInstance = setTimeout(() => {
this.waiting = true;
}, timeout);
return promise.finally(() => {
this.waiting = false;
clearTimeout(timeoutInstance);
});
},
async searchForTerm(term) {
this.results = await this.handleWaiting(this.$wire.query(term), 500);
// do something with the results...
},
}