javascript - Using arrow function in then chaining results in different output - Stack Overflow

admin管理员组

文章数量:1325229

I am working with promises and here is my code:

function call1() {
   return new Promise(function(resolve, reject) {
     resolve('resolved from call 1');
   });
}

function call2(result) {
    return new Promise(function(resolve, reject) {
    resolve(result + ' - resolved from call 2');
  });
}

function callP() {
  call1()
    .then(result => call2(result))
    .then(function(result) {
      console.log(result);
    });
}
callP();

This gives me the output:

resolved from call 1 - resolved from call 2

But when I change:

.then(result => call2(result)) 

to:

.then(function(result) {
  call2(result);
})

The result is undefined.

As per my understanding:

function(result) {
    call2(result);
} 

and:

result => call2(result)

Mean the same thing. Am I doing anything wrong here?

I am working with promises and here is my code:

function call1() {
   return new Promise(function(resolve, reject) {
     resolve('resolved from call 1');
   });
}

function call2(result) {
    return new Promise(function(resolve, reject) {
    resolve(result + ' - resolved from call 2');
  });
}

function callP() {
  call1()
    .then(result => call2(result))
    .then(function(result) {
      console.log(result);
    });
}
callP();

This gives me the output:

resolved from call 1 - resolved from call 2

But when I change:

.then(result => call2(result)) 

to:

.then(function(result) {
  call2(result);
})

The result is undefined.

As per my understanding:

function(result) {
    call2(result);
} 

and:

result => call2(result)

Mean the same thing. Am I doing anything wrong here?

• javascript
• ecmascript-6
• promise
• es6-promise
• arrow-functions

Share Improve this question Follow edited Jul 11, 2017 at 4:44 Andrew Li 58k1414 gold badges134134 silver badges148148 bronze badges asked Jul 11, 2017 at 4:24 Kanishka PanamaldeniyaKanishka Panamaldeniya 17.6k3131 gold badges127127 silver badges194194 bronze badges 3

• result => call2(result) is an implicit return whereas function syntax requires an explicit return to do the same thing – Damon Commented Jul 11, 2017 at 4:28
• @GerardoFurtado Interestingly enough, the canonical doesn't go over implicit returns. I guess it's more semantic and side-effect difference than syntactic difference. – Andrew Li Commented Jul 11, 2017 at 4:33
• @AndrewLi You are right, it doesn't mention the return. I'll reopen this question. – Gerardo Furtado Commented Jul 11, 2017 at 4:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

.then(result => call2(result)) 

Implicitly returns the result of call2 and is equivalent to this:

.then(result => { return call2(result); })

What you're looking for is this:

.then(function(result) {
    return call2(result);
})

They are not the same. This arrow function:

result => call2(result)

Implicitly returns the return value of call2(result) because arrow functions allow for the following syntax:

( … ) => expression

Where expression is the return value of the arrow function. For example:

() => 1 + 1

Is the same as:

() => { return 1 + 1 }

And:

function() {
  return 1 + 1;
}

The regular function does not return anything:

function(result) {
  call2(result);
}

That callback doesn't return anything explicitly (it defaults to undefined). Because you do not return anything, the second chained then receives undefined as the value of the result argument and thus logs undefined. To achieve the same effect, return the value explicitly:

return call2(result);

This will pass the result of the first then to the second then and log correctly. Also note, arrow functions and regular functions bind this differently. this in arrow functions is the this of the enclosing scope -- they don't bind it themselves while regular function expressions depend on how they're called -- usually being window or undefined in strict mode. Besides the syntactical differences, I remend reading Felix Kling's phenomenal answer on the topic.

The main issue here is that you forgot to return a value in your first function. So if return call2(result) in the first function, like what i've done below:

function(result) {
    return call2(result);
} 

You will get the same result as using the arrow function you mentioned in your second code:

result => call2(result)

With regards to if the first function is the same as the second one ( assuming you've added the return in the first function), while they may achieve the same thing, they are not quite the same. The main difference is with the context of this. I quite like the explanation of arrow function and how it affects the value of this by MDN which you can view here.

本文标签： javascriptUsing arrow function in then chaining results in different outputStack Overflow