Why does Promise.then() only work with arrow functions?

Question

I am trying to handle a Promise in Javascript, and as a beginner I find the shorthand arrow functions a bit hard to read. So for now I like to expand it to be function(){ } rather than ()=>.

When handling a Promise, the following does not work:

defineAsyncComponent(()=>{
      return import('@ckeditor/ckeditor5-vue/dist/ckeditor.js').then( function(module) {
        module.component
      }).catch(function(error) {
        console.log(error)
      })
    })

However if I change it to use arror functions then it does work:

defineAsyncComponent(()=>{
      return import('@ckeditor/ckeditor5-vue/dist/ckeditor.js').then((module) => module.component).catch((error) => console.log(error))
    })

What on earth is the difference between to the two to cause the first one not to work entirely?

Then works with both "normal" and arrow functions? I'm assuming you might be forgetting to return in the normal function as arrow functions (without the curly braces) return implicitly? Try `return module.component`? — evolutionxbox, Mar 12 '21 at 15:02
@evolutionxbox _"I'm assuming you might be forgetting to return..."_ - There's no `return` in the `function() { ... }` so that assumption should be a statement ;) — Andreas, Mar 12 '21 at 15:06
@Andreas I've been humbled many times by making statements. So I now make clear their my assumptions — evolutionxbox, Mar 12 '21 at 15:08
How people can work in environments, where things like the `module.component` expression-statement won't immediately cause alarm sirens to go off, is beyond me. — ASDFGerte, Mar 12 '21 at 15:10
@ASDFGerte what do you mean? CKEditor component requires it. You can't just use the module. — volume one, Mar 12 '21 at 15:19
It's a useless statement, in 99.99% of all cases a mistake, and trivially automatically detectable. This mistake should be marked accordingly, so you as a developer immediately notice you made a small mistake, and correct it. — ASDFGerte, Mar 12 '21 at 15:21
@ASDFGerte but `(module) => module.component` isn't equivalent to a no-op? I am confused — evolutionxbox, Mar 12 '21 at 15:26
`function (module) { module.component /* this is a completely useless expression-statement and almost surely a mistake of some sort. It should be marked accordingly */ }` - in this case, he simply forgot `return`. — ASDFGerte, Mar 12 '21 at 15:27
@ASDFGerte ok cool. We're both talking about the same thing. The missing return. — evolutionxbox, Mar 12 '21 at 15:31
All i am saying above is, that e.g. [no-unused-expressions](https://eslint.org/docs/rules/no-unused-expressions), or similar safety-nets from other tooling, would immediately bring this to attention. Nothing more. — ASDFGerte, Mar 12 '21 at 15:36
@ASDFGerte I agree, a linting rule like that is very useful in these situations — evolutionxbox, Mar 12 '21 at 15:39
@evolutionxbox thanks for the reply. I only managed to get it to work by returning twice like this `return import('@ckeditor/ckeditor5-vue/dist/ckeditor.js').then(function(module) { return module.component})`. I don't understand *why* though. — volume one, Mar 12 '21 at 16:47
Which return are you confused by? Do you know what happens if you do not return in a "normal" function? — evolutionxbox, Mar 12 '21 at 16:50
[Does every Javascript function have to return a value?](https://stackoverflow.com/q/17337064) | [Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?](https://stackoverflow.com/q/34361379) | [When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/q/28889450) — VLAZ, Mar 12 '21 at 17:25
@evolutionxbox I am confused by having two returns, one for `return import()` and then another within the `then()` method. What is `then(function(module) { return module.component }` sending its return to? — volume one, Mar 12 '21 at 18:49
@volumeone to the rest of the promise chain, which is then returned using `return import /* ... */` — VLAZ, Mar 12 '21 at 18:49

score 3 · Accepted Answer · answered Mar 12 '21 at 15:07

3

I believe the reason it does not work is because you do not return anything from that promise.

Try the following:

defineAsyncComponent(() => {
      import('@ckeditor/ckeditor5-vue/dist/ckeditor.js').then(function(module) {
        return module.component;
      }).catch(function(error) {
        console.log(error);
      })
    });

Arrow functions without {} implicitly return.

answered Mar 12 '21 at 15:07

Nicholas

2,800
1
14
21

hi thank you for the answer. I had to return twice for it to work which I don't understand, like this `return import('@ckeditor/ckeditor5-vue/dist/ckeditor.js').then(function(module) { return module.component})` – volume one Mar 12 '21 at 16:45
This is not returning twice. It’s returning once in two different functions. – evolutionxbox Mar 12 '21 at 16:59

score 1 · Answer 2 · answered Mar 12 '21 at 15:26

I think in that case it's related to "this" context (which both regular functions and arrow functions have, but using differently).

When using the "then" method of the promise, you want to pass the response of the promise (whatever if it's resolved or rejected) into it. Now when "then" is been called it's asking "Who's calling me?", and that's where your answer is:

When calling an anonymous function (function with no name), "this" will refer to the object window (where there is no props to pass to the "then" method).
When calling an arrow function, "this" will refer to it's lexical scope (The object that "then" method is belong to) and their the props you want to pass exist because promises returns an object with the value of resolved, rejected ot pending.

I don't think arrow functions have a `this`. That's kinda their purpose — evolutionxbox, Mar 12 '21 at 15:26
@evolutionxbox They have, but they don't have their own binding to it. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions — Alon Joshua, Mar 12 '21 at 16:45

Why does Promise.then() only work with arrow functions?

2 Answers2