javascript, promises, how to access variable this inside a then scope

JavascriptPromiseAngular Promise

Javascript Problem Overview


I want to be able to call a function inside the .then scope, and for that I use the this.foo() manner. But if I do this inside the .then I get an error, since this appears to be lost. What can I do?

In this code, this would be equivalent to have the same output for the object this

console.log(this)
one().then(function() {
  console.log(this)
})

function one() {
  var deferred = $q.defer();
  deferred.resolve()
  return deferred.promise;
}

This neither seems to work

console.log(this)
var a = this;
one().then(function(a) {
  console.log(a)
})

Javascript Solutions


Solution 1 - Javascript

Your second code example is the right way to go. Because the scope changes in the new function, this changes too, so you're right to make a reference to this outside of the function.

The reason it failed is because the function is using a that you passed into the function rather than the global a you defined outside it.

In other words:

var a = this;

one().then(function () {
  console.log(a)
});

Update: use an arrow function - they borrow the context (this) from their outer scope.

function two() {
  console.log('Done');
}

one().then(() => {
  this.two();
});

function one() {
  return new Promise(res => {
    setTimeout(() => res(), 2000);
  });
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGWorkingView Question on Stackoverflow
Solution 1 - JavascriptAndyView Answer on Stackoverflow