Variable in routine is private - cannot call it outside of routine - Javascript

Question

If I alert title like this, title is alerted correctly and has a value.

var myRequest = new Request('URL');
var title;
   fetch(myRequest).then(function(text) {
        return response.text().then(function(text) {
             title= text; 
             alert (title);

        });
   });

If I alert title like this - outside of the routine, the variable title is empty/undefined.

var myRequest = new Request('URL');
var title;
   fetch(myRequest).then(function(text) {
        return response.text().then(function(text) {
             title= text; 

        });
   });

 alert (title);

I need to alert title outside of the fetch routine.

I tried declaring the variable inside the routine and giving the variable the fetch routine title = fetch(myRequest)... Nothing worked.

What am I doing wrong? Where is the error?

Note: I've hidden the URL that is being fetched in this post. The fetching works fine.

Umm, isn't the `fetch` and `then` executed asynchronously? I'd expect the `alert` showed long before the request actually finished fetching. Try keeping the `alert` in both places, I'm pretty sure the undefined one executes first (that is, before you even assign `title`). — Luaan, May 06 '15 at 15:08
possible duplicate of [What is the scope of variables in JavaScript?](http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript), [How to return response from an asynchronous call?](http://stackoverflow.com/questions/14220321), etc — Evan Davis, May 06 '15 at 16:56

score 0 · Answer 1 · answered May 06 '15 at 15:06

0

Your alert(title) is invoked immediately after your fetch call starts off the Promise chain. Your promises haven't been fulfilled.

answered May 06 '15 at 15:06

krillgar

12,596
6
50
86

how do i get around this? a timer? – Cody Raspien May 06 '15 at 15:07
You don't want to use a timer for that, as it negates the entire Promise system. Either chain another promise onto the end, or just keep your `alert` inside as you have up top. Though, that can depend on what you're actually trying to accomplish. – krillgar May 06 '15 at 15:08
@CodyRaspien: A timer would involve a callback. You already *have* a callback that you know has the `title` (the one you're passing into `then`). So just use that callback. – T.J. Crowder May 06 '15 at 15:08
What if I do the fetch in a separate script and then importscripts (that js) into the above script? Would that solve the issue? The fetch would run before in its own script prior to calling title in the main script? Thoughts? – Cody Raspien May 06 '15 at 16:06
The problem is that the Promise is asynchronous, so it can return whenever. I would invoke whatever function you have within that last Promise with the data that gets returned (such as your `title` variable). – krillgar May 06 '15 at 17:04

score 0 · Accepted Answer · answered May 06 '15 at 15:07

0

It's not about scope, it's about timing. The code after your fetch call runs before the operation the fetch call started finishes, and so runs before your callback is called.

If you want to use title elsewhere, you need to call the code doing it from within your callback, e.g.:

var myRequest = new Request('URL');
var title;
fetch(myRequest).then(function(text) {
    return response.text().then(function(text) {
        title= text; 
        doSomethingWithTitle();
    });
});

function doSomethingWithTitle() {
    alert(title);
}

I'm a bit confused by the return response.text().then(... part of your code, but I've left it above on the assumption that it's correct. But it's really suspicious. :-)

answered May 06 '15 at 15:07

T.J. Crowder

1,031,962
187
1,923
1,875

I tried that - http://jsfiddle.net/vkweuqo4/ - so, I've the fetch + title is feeding into the listener (function (event)). The code is part of a service worker for push. I still get title as undefined even though i've defined event(); – Cody Raspien May 06 '15 at 15:29
I also tried putting the entire listener into the fetch function - didn't work. – Cody Raspien May 06 '15 at 15:34
@CodyRaspien: That fiddle doesn't remotely do what the answer suggests. If you actually do what the answer suggests, it works: http://jsfiddle.net/ytpphpt3/ – T.J. Crowder May 06 '15 at 16:51

Variable in routine is private - cannot call it outside of routine - Javascript

2 Answers2