Ember控制器中RSVP.allSettled执行后如何保存错误状态并更新控制器

问题根源 #

你碰到的this未定义问题，是因为then回调用了传统function，它的this指向回调自身的执行上下文，而非控制器实例。另外直接用push修改@tracked数组，Ember可能无法触发响应式更新，导致DOM不刷新。

修复方案 #

1. 修正this指向 #

把then里的传统函数换成箭头函数，箭头函数会继承外层作用域的this（也就是当前控制器实例）。

2. 正确更新响应式数组 #

@tracked对数组的原地修改（比如push）不会自动触发重渲染，需要通过替换整个数组的方式触发响应式更新。

修正后的完整代码 #

export default class SomeController extends Controller {
  @tracked errorlist = [];

  @action
  someAction() { // 补全原代码缺失的括号
    RSVP.allSettled(promises).then((retarray) => { // 替换为箭头函数
      // 批量筛选并收集错误
      const newErrors = retarray
        .filter(retstate => retstate.state === 'rejected')
        .map(retstate => retstate.reason);

      // 替换数组触发响应式更新
      this.errorlist = [...this.errorlist, ...newErrors];
    });
  }
}

额外可选写法 #

如果习惯用传统函数，也可以提前在action里保存控制器的引用：

@action
someAction() {
  const controller = this; // 保存控制器实例
  RSVP.allSettled(promises).then(function(retarray) {
    retarray.forEach(retstate => {
      if (retstate.state === 'rejected') {
        controller.errorlist = [...controller.errorlist, retstate.reason];
      }
    });
  });
}

注意：原代码里prommises是拼写错误，要改成promises；用filter+map批量收集错误比forEach更简洁易维护。

内容的提问来源于stack exchange，提问作者s.w