从.then()函数

时间:2015-12-09 17:09:44

标签: javascript angularjs typescript ecmascript-6 arrow-functions

then回调中的成功工厂响应中调用成功:

这不起作用,找不到response

this.storeFactory.getSafes().then(success(response), failure());

如何正确地将响应传递给success函数?

var success = (response: any): void => {
    scope.safes = response.data.safes;
    localStorage.setItem('safeCount', scope.safes.length);
    this.$http.get('/app/dashboard/safes/safes.html', { cache: this.$templateCache }).success((tplContent): void => {
        element.replaceWith(this.$compile(tplContent)(scope));
    }); 
}

长手版工作正常,但我觉得它非常混乱。

this.storeFactory.getSafes().then((response: any): void => {
    scope.safes = response.data.safes;
    localStorage.setItem('safeCount', scope.safes.length);
    this.$http.get('/app/dashboard/safes/safes.html', { cache: this.$templateCache }).success((tplContent): void => {
        element.replaceWith(this.$compile(tplContent)(scope));
    });
}

3 个答案:

答案 0 :(得分:2)

我无法使用ES2015语法或Typescript,但是您传回success回调的方式看起来很可疑。

而不是

this.storeFactory.getSafes().then(success(response), failure());

你应该使用

this.storeFactory.getSafes().then(success, failure);

答案 1 :(得分:2)

  

如何正确地将response传递给success功能?

没有。您将success函数传递给then方法,然后承诺将结果值传递给您的success函数。这就是回调的工作方式。

您需要做的就是将response声明为您的功能的参数。 不得自行调用此函数 - 您只应将其作为回调传递:

this.storeFactory.getSafes().then(success, failure);

在将函数传递给then之前,您还需要定义函数。如果您只声明它们,并将undefined值传递给then,则会忽略它们。使用

var success = (response: any): void => {
    scope.safes = response.data.safes;
    localStorage.setItem('safeCount', scope.safes.length);
    this.$http.get('/app/dashboard/safes/safes.html', { cache: this.$templateCache }).success((tplContent): void => {
        element.replaceWith(this.$compile(tplContent)(scope));
    });
};

var failure = (): void => {
    this.$http.get('/app/shared/mocks/tableError.html', { cache: this.$templateCache }).success((tplContent): void => {
        element.replaceWith(this.$compile(tplContent)(scope));
    });
}

this.storeFactory.getSafes().then(success, failure);

但是,箭头函数实际上应该是内联定义的,而不是将它们分配给特定的变量。 (你在你的问题中称之为“长手版”,即使它实际上更短)。只要使用它,你就不会遇到这些问题。

一般来说,我建议完全避免在变量赋值中定义函数。如果你需要一个变量,只需要use a declaration instead(Typescript语法不应该变化很多)。

答案 2 :(得分:0)

您的AJAX调用的回调也需要使用箭头函数:

this.$http.get('/app/dashboard/safes/safes.html', { cache: this.$templateCache }).success((tplContent) => {
    element.replaceWith(this.$compile(tplContent)(scope));
});