Javascript: how to wait for result of one fetch then start another

Question

This code is definitely wrong, but I'm not sure how to fix it.

E.g.

fetch('api/foo?get_max=True')
    .then( function(response) {
        return response.json();
    }
    .then( function(response) {
        var max = response["max"];
    }

fetch('api2/bar?max=' + max)
    .then( function(response) {
        return response.json();
    }
    .then( function(mydata) {
        processdata(mydata);
    }

This obviously doesn't work, because the max var that will eventually be defined in the first fetch does not yet exist when the second fetch runs. How can I "chain" or force the second fetch to "wait" for the first fetch?

I have tried putting the second fetch within a third then block of the first fetch without success. I haven't tried putting it directly in the second then block. — senorsmile, Jan 06 '18 at 01:35
as your second block doesn't return anything, it's no surprise a third block fails — Jaromanda X, Jan 06 '18 at 01:36

score 4 · Accepted Answer · answered Jan 06 '18 at 01:33

4

Since fetch() returns a promise you can return it from a then() and it will behave as expected:

fetch('api/foo?get_max=True')
.then( response => response.json())
.then( response => {
    var max = response["max"];
    return fetch('api2/bar?max=' + max)
})
.then( response => response.json())
.then( mydata => processdata(mydata))

answered Jan 06 '18 at 01:33

Mark

90,562
7
108
148

second `.then` is simply `.then(response => fetch('api2/bar?max=' + response.max))` – Jaromanda X Jan 06 '18 at 01:37
1

I had tried this before and didn't have success, but it's very probable I simply fat fingered something. Will try again shortly. – senorsmile Jan 06 '18 at 01:38
@JaromandaX agreed that's nicer. – Mark Jan 06 '18 at 01:38
1

@senorsmile one mistake that's easy to make is forgetting the `return` – Mark Jan 06 '18 at 01:38
I just tested and confirmed that I wasn't returning anything. That was preventing the chain from working. Thanks! – senorsmile Jan 06 '18 at 05:46

Javascript: how to wait for result of one fetch then start another

1 Answers1