从 .then() 函数执行命名为“胖箭头”答案

【问题标题】：Executing named `fat arrow` from .then() function从 .then() 函数执行命名为“胖箭头”
【发布时间】：2023-04-01 20:00:01
【问题描述】：

在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));
    });
}

【问题讨论】：

这并不能回答您的问题或任何问题，但我想为您澄清一下，这不是 TypeScript 语法。这是 ES2015 语法。它是纯 JavaScript，只是更新。 TypeScript 恰好实现了它。
好点，我正在将 javascript 转换为 typescript 并启动 ES6 (2015)
您的第一次尝试没问题。如果你想表明函数没有返回任何东西，你实际上可以写var success = (response: any): void => { ... }。问题一定出在其他地方
@BrunoGrieder 这一定是我要调用它的地方：this.storeFactory.getSafes().then(success, failure); 如果我添加 success() 我会收到错误
问题已编辑以更能反映障碍

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

【解决方案1】：

如何正确地将response 传递给success 函数？

你没有。你将success 函数传递给then 方法，然后promise 会将结果值传递 给你的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 语法应该不会有太大差异）。

【讨论】：

我原以为变量提升不需要您将它们放在.then() 语句上方
它只对函数声明这样做。如果您只是声明一个变量，然后为它分配一个箭头函数，那么在此之前它将是undefined。使用let 来避免此类错误（在初始化之前使用它会抛出） - 如果 Typescript 确实支持那么多 ES6。
是的，TypeScript 是 ES6 的“超集”，应该具备所有功能。现在的问题变成了如何创建 ES6 声明性函数而不是赋值。再次感谢
toddmotto.com/es6-arrow-functions-syntaxes-and-lexical-scoping 箭头函数总是匿名的...如果我想使用箭头语法，我需要在上面定义它们
@JonHarding: Some features 虽然没有实现……但基本的let 应该可以工作。另请参阅我的更新答案。

【解决方案2】：

我不会说 ES2015 语法或 Typescript，但是你传回 success 回调的方式看起来很可疑。

而不是

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

你应该使用

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

【讨论】：

我有，但是它不知道response是什么
@JonHarding：您的意思是在success(response) 调用中，还是在类型检查中？
'找不到名字response'
是的，我不知道这如何适用于 Typescipt，我只知道作为一个咖啡脚本专家对我的看法，最大的不同是您调用该函数以便它的行为像它想要将 thenable 响应传递回成功回调的返回值。
@JonHarding：是的，因为范围内没有名称response。响应值将来自 Promise，并通过 then 方法传递给回调。您只需要定义回调函数并声明您的参数。这就是这个答案所暗示的。

【解决方案3】：

你的 AJAX 调用的回调也需要使用箭头函数：

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

【讨论】：

任何例子都会有帮助
@JonHarding -- 使用上面的箭头语法是否不能解决问题（或者，您在寻找什么样的示例？）