Question

我有这个ES6类，当this.categories = data.data执行错误TypeError: Cannot set property 'categories' of undefined时失败。

我认为这是由于this引用了承诺中的上下文。

如何在承诺内设置this.categories？

感谢。

class NavbarController {
    constructor(bnCategoryService) {
        this.categories = [];    // This is what should be set with data.data.
        this.bnCategoryService = bnCategoryService;
        this.getCategories();
    }

    getCategories() {
        this.bnCategoryService.getCategories()  // Returns a promise
            .success(function(data, status, headers, config) {
                console.log(data.data);
                this.categories = data.data;    // This fails!
            })
            .error(function(data, status, headers, config) {
                console.log('Category service: An error occured getting tags from the server.');
            });
    }
}

Answer 1

只需在成功处理程序中使用箭头函数即可获得词法this绑定：

.success((data, status, headers, config) => {
  console.log(data.data);
  this.categories = data.data;    // This won't fail!
})

Answer 2

即使您的代码实现了ECMA-Script 6 类，也并不意味着this关键字仍具有不同的含义，具体取决于范围。

在success处理程序中，this将不是您当前的类实例。

重构整个代码以在调用保存this值的异步操作之前声明变量，然后在success处理程序中使用整个变量：

// This variable holds the "this" value from the class function scope.
var that = this;
this.bnCategoryService.getCategories()  // Returns a promise
            .success(function(data, status, headers, config) {
                console.log(data.data);
                that.categories = data.data;    // This fails!
            })
            .error(function(data, status, headers, config) {
                console.log('Category service: An error occured getting tags from the server.');
            });

在ES6类中设置promise中的属性

2 个答案: