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

Question

我的问题是，我需要修复什么，以便我的ember-concurrency Ajax Throttling示例的实现按预期工作。具体来说，在我的实现中没有显示任何日志条目(就像在示例页面上一样)，并且没有执行我在loopingAjaxTask内部函数中添加的console.log语句，也没有执行任务中的console.log语句。我几乎一字不差地复制了这个例子，唯一的变化是我添加了那些console.log语句。

"循环Ajax任务外部函数"一行按预期写入控制台8次，但"循环Ajax任务内部函数"从未写入控制台日志。组件中的"Hello World"文本被写入页面。

我使用ember 4.8和ember-concurrency 2.3.7.

这是我包含AjaxThrottling组件的模板。

应用程序/模板/example.hbs

{{page-title "Example"}}
<p>Here's where the log entries should appear</p>
<AjaxThrottling />
{{outlet}} 

软件/组件/ajax-throttling.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));
}
}

Answer 1

我也在Ember讨论板上发布了同样的问题，并得到了答案。答案的要点是Ember -并发的文档还没有针对新版本的Ember进行完全更新。在为Ember的现代版本做了一些修改后，代码按预期工作。

Answer 2

我看到构造函数丢失了。在你的glimmer组件中应该有一个构造函数来启动。之后，您可以调用ajax任务。

编辑:哦，不好意思，我看你已经找到答案了。