如何避免此并发计时器的显式 Promise 构造反模式，它应在 Promise 完成时重置? [英] How to avoid the explicit Promise construction antipattern for this concurrent timer that should reset when the promise completes?

问题描述

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

I have written a pretty simply script:

{
   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...
    },
 }

它会触发等待搜索字段的微调器.

It tiggers the waiting spinner for a search field.

有人写信给我说:

您的代码具有显式 Promise 构造反模式！您应该改用链接和承诺组合......此外，一个返回承诺但不等待任何东西的函数不必是异步的

Your code has the Explicit Promise construction antipattern! You should use chaining and promise composition instead... Also, a function that returns a promise, but doesn't await anything don't have to be async

我修改了这个工作代码.但我得到的只是一个错误的错误！

I tinkered around with this working code. But I got just error over error!

有人可以帮我解决这个问题，或者至少让我走上正轨.

Can someone help me with this, or at least put me on the right track.

我不太擅长 javascript，但我有兴趣写得更好.

I am not that good with javascript but I am interested in writing it better.

推荐答案

参见 什么是显式承诺构造反模式以及如何避免它? 了解详情.一般来说，当你已经有一个承诺时，你(大部分)不需要 new Promise.您可以重用现有的(如有必要，将其链接起来).

See What is the explicit promise construction antipattern and how do I avoid it? for details. Generally speaking, you (mostly) do not need new Promise when you already have a promise. You can just reuse the existing one (and chain it if necessary).

您的代码可以简化.

• 删除不必要的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.

And you can probably get rid of loadingStarted as well. Is there a reason why you have two state variables for that? You never reset loadingStarted anyway.

{
  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...
  },
}

这篇关于如何避免此并发计时器的显式 Promise 构造反模式，它应在 Promise 完成时重置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！