如何让ember并发ajax-throttling示例在我的开发环境中工作?

eqqqjvef  于 2022-12-26  发布在  其他
关注(0)|答案(1)|浏览(113)

我的问题是,要使ember并发 AJAX Throttling example的实现按预期工作,我需要做些什么修正呢?(如示例页面所示),我在loopingAjaxTask内部函数中添加的console.log语句没有执行,任务中的console.log语句也没有执行。我几乎逐字复制了这个示例,唯一的更改是在console.log语句中添加的。
行“循环 AJAX 任务外部函数”按预期写入控制台8次,但“循环Ajax任务内部函数”从未写入控制台日志。组件中的“Hello World”文本写入页面。
我使用的是ember 4.8和ember并发2.3.7。
下面是我包含AjaxThrottling组件的模板。

  • 应用程序/模板/示例.hbs*
{{page-title "Example"}}
<p>Here's where the log entries should appear</p>
<AjaxThrottling />
{{outlet}}
  • 应用程序/组件/ajax节流.hbs*
<div>
    hello world
  <ul>
    {{#each this.logs as |log|}}
      <li style={{color log.color}} {{! template-lint-disable no-inline-styles }}>{{log.message}}</li>
    {{/each}}
  </ul>
</div>
  • 这里是组件的js页面 *
import Component from '@glimmer/component';
import { enqueueTask, task, timeout } from 'ember-concurrency';

function loopingAjaxTask(id, color) {
    console.log('looping Ajax task outer function');
    return function* () {
        console.log('looping Ajax task inner function');
        while (true) {
        this.log(color, `Task ${id}: making AJAX request`);
        yield this.ajaxTask.perform();
        this.log(color, `Task ${id}: Done, sleeping.`);
        yield timeout(2000);
      }
    };
  }

export default class AjaxThrottlingComponent extends Component {

    tagName = '';
    logs = [];
  
    ajaxTask = enqueueTask({ maxConcurrency: 3 }, async () => {
      // simulate slow AJAX
      console.log('inside the task')
      await timeout(2000 + 2000 * Math.random());
      return {};
    });
  
    @task({ on: 'init' }) task0 = loopingAjaxTask(0, '#0000FF');
    @task({ on: 'init' }) task1 = loopingAjaxTask(1, '#8A2BE2');
    @task({ on: 'init' }) task2 = loopingAjaxTask(2, '#A52A2A');
    @task({ on: 'init' }) task3 = loopingAjaxTask(3, '#DC143C');
    @task({ on: 'init' }) task4 = loopingAjaxTask(4, '#20B2AA');
    @task({ on: 'init' }) task5 = loopingAjaxTask(5, '#FF1493');
    @task({ on: 'init' }) task6 = loopingAjaxTask(6, '#228B22');
    @task({ on: 'init' }) task7 = loopingAjaxTask(7, '#DAA520');
  
    log(color, message) {
      let logs = this.logs;
      logs.push({ color, message });
      this.set('logs', logs.slice(-7));
    }
}
yx2lnoni

yx2lnoni1#

我也在Ember论坛上提出了同样的问题,得到了一个answer的答案,答案的要点是ember并发的文档还没有完全更新到新版本的Ember,在做了一些修改以适应现代版本的Ember之后,代码按预期运行。

相关问题