Executing named `fat arrow` from .then() function

Question

Success gets called in a successful factory response in the then callback:

This doesn't work, it cannot find response:

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

How to I pass the response to the success function correctly?

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

The long hand version works fine, but I feel like it is very messy.

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

This doesn't answer your question or anything, but I wanted to clarify for you that this isn't a TypeScript syntax. It's ES2015 syntax. It's pure JavaScript, just newer. TypeScript happens to implement it. — Antiga, Dec 09 '15 at 17:14
good point, I'm in the middle of javascript conversion to typescript and starting ES6 (2015) — Jon Harding, Dec 09 '15 at 17:15
Your first attempt is fine. You could actually write `var success = (response: any): void => { ... }` if you want to indicate that the function is not returning anything. The problem must be somewhere else — Bruno Grieder, Dec 09 '15 at 17:18
@BrunoGrieder It must be where I'm calling it: `this.storeFactory.getSafes().then(success, failure);` If I add `success()` I get an error — Jon Harding, Dec 09 '15 at 17:23
Is it because you are actually calling `success` during the `then`'s execution rather than passing it back? So `.then( success )` vs `.then( success())? — jusopi, Dec 09 '15 at 22:19
@jusopi. I have the `reponse` in the success call inside the `.then()`. It doesn't know what `response` is — Jon Harding, Dec 09 '15 at 22:21
at least in the case of angular's `$q` implementation, callbacks get passed back the `.then`'s response as parameters during the callback's execution — jusopi, Dec 09 '15 at 22:22

score 2 · Answer 1 · edited Dec 09 '15 at 22:25

2

I can't speak to the ES2015 syntax or Typescript, however the way you're passing back your success callback looks suspect.

instead of

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

you should use

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

edited Dec 09 '15 at 22:25

Bergi

513,640
108
821
1,164

answered Dec 09 '15 at 22:21

jusopi

6,433
2
32
42

I have that, however, it doesn't know what `response` is – Jon Harding Dec 09 '15 at 22:22
@JonHarding: You mean in the `success(response)` call, or in the typecheck? – Bergi Dec 09 '15 at 22:24
'cannot find name `response`' – Jon Harding Dec 09 '15 at 22:25
Yeah I don't know how this applies to Typescipt, I just know how it looks to me as a coffeescript guy and the biggest difference is that you're calling the function so that it's acting like it wants to pass the *thenable* response back to the return value of your success callback. – jusopi Dec 09 '15 at 22:26
@JonHarding: Well yes, because there is no name `response` in scope. The response value will come from the promise, and be passed to the callback by the `then` method. You only need to define the callback function and declare your parameters. This is what this answer suggests. – Bergi Dec 09 '15 at 22:26
I completely agree, however when I use suggested syntax success and failure seem to get defined but not executed – Jon Harding Dec 09 '15 at 22:28
@JonHarding: You did define them before you called `then`, right? – Bergi Dec 09 '15 at 22:30
`.then( function(rsp){ success(rsp), failure(rsp) });` how about this then? – jusopi Dec 09 '15 at 22:31
@jusopi: You mean `.then(function(rsp){ success(rsp); }, function(err) { failure(err); })` – Bergi Dec 09 '15 at 22:32
Yes. Thanks for the correction. I'm so accustomed to using `.then` only for *successful* callbacks and `.catch` only for *error* callbacks. – jusopi Dec 09 '15 at 22:34

score 2 · Accepted Answer · edited May 23 '17 at 12:04

2

How to I pass the response to the success function correctly?

You don't. You pass the success function to the then method, then the promise will pass the result value to your success function. That's how callbacks work.

All you need to do is declare response as a paramter of your function. You must not call the function yourself - you only should pass it as a callback:

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

Also you will need to define the functions before you pass them to then. If you only declare them, and pass undefined values to then, they will be ignored. Use

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

However, arrow functions are actually supposed to be defined inline, without assigning them to a specific variable. (You called this the "long hand version" in your question, even if it's actually shorter). Just use that and you won't face these problems.

In general, I would recommend to avoid defining functions in variable assignments completely. If you need a variable, just use a declaration instead (Typescript syntax should not vary much).

edited May 23 '17 at 12:04

Community

1
1

answered Dec 09 '15 at 22:29

Bergi

513,640
108
821
1,164

I would've thought variable hoisting would have not required you to place them above the `.then()` statement – Jon Harding Dec 09 '15 at 22:35
1

It does that only for function declarations. If you just declare a variable and later assigna an arrow function to it, it will be `undefined` until that. Use `let` to avoid such bugs (it'll throw when used before initialised) - if Typescript does support that much of ES6. – Bergi Dec 09 '15 at 22:52
Yes TypeScript is a 'superset` of ES6 should have all features. Question now becomes how to create ES6 declarative functions instead of assignments. Thanks again – Jon Harding Dec 09 '15 at 23:01
http://toddmotto.com/es6-arrow-functions-syntaxes-and-lexical-scoping/ Arrow functions are always anonymous... I'd need to define them above if I want to use arrow syntax – Jon Harding Dec 09 '15 at 23:05
1

@JonHarding: [Some features](https://basarat.gitbooks.io/typescript/content/docs/let.html#let-in-closures) are not implemented though… but basic `let` should work. Also see my updated answer. – Bergi Dec 09 '15 at 23:38
That makes sense I guess I was trying too hard to keep this `this.storeFactory.getSafes().then(success, failure);` clean. Thank you for all the resources I learned a ton through this. – Jon Harding Dec 10 '15 at 14:03

score 0 · Answer 3 · answered Dec 09 '15 at 17:17

0

The callback of your AJAX call also needs to use arrow functions:

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

answered Dec 09 '15 at 17:17

tymeJV

99,730
13
150
152

any examples would be helpful – Jon Harding Dec 09 '15 at 17:24
1

@JonHarding -- Does using the arrow syntax above not fix the issue (or, what kind of example are you looking for?) – tymeJV Dec 09 '15 at 19:00

Executing named `fat arrow` from .then() function

3 Answers3