You can't do it this way. The issue is that a .then() handler is called at some indeterminate time in the future. It's always called at least on the next tick of the event loop (per the promise specification) and if there's a real asynchronous operation behind the promise, then who knows when it will be called (it could be ms to hours to never).
The ONLY way you can possibly know when it gets called and thus when a value provided in the .then() handler is available is by using the data it provides inside the .then() handler itself or by calling some function from within the .then() handler and passing the data to it.
Your console.log(data) statement always runs BEFORE the .then() handler is called. That's why you can't use the variable there. And, the only place you actually know when the data is available is inside the .then() handler so that's where you need to consume the data.
This is a different way of thinking about coding. It's the asynchronous model that Javascript uses for lots of things and you do need to learn it in order to be successful with Javascript.
So, the proper way to do things is this:
Service.getContent().then((content = {}) => {
// use content here
console.log(content);
}).catch(err => {
// handle error here
console.log('errror', err)
});
FYI, ES7 allows you to use await to make your code "look" a little more synchronous. It's important to understand how the actual asynchronous model works, even when using await. But, in your example, you could do this:
async function someFunction() {
try {
let content = await Service.getContent();
// use content here
console.log(content);
return someValue;
} catch(e) {
// handle error here
console.log('errror', err)
return someOtherValue;
}
}
someFunction().then(val => {
// do something with val here
});
An important thing to understand is that while await appears to "block" the function execution until the promise resolves and makes it look like you can program synchronously again even with async operations, this is only partially true. The function execution itself is still asynchronous. In fact, as soon as you call await Service.getContent(), your function someFunction() returns a promise and any code after that function is called keeps on executing. So, the whole program flow is not blocked, only the internals of someFunction() are blocked waiting on that promise. await is really just syntactical sugar for .then(). The underlying concepts are still the same. And, functions still return immediately as soon as you await an asynchronous operation.
You can only use await inside an async function and all function declared async return a promise. So, the promise is still being used, await just gives you a bit more way to write code inside a function.
