javascript - multiple, sequential fetch() Promise - Stack Overflow

admin管理员组

文章数量:1278825

I have to make a sequence of fetch() Promise: I have only 1 url at a time, this means only 1 fetch() promise. Every time I receive a json,this one contains an url for another json, so I have to make another fetch() promise.

I'm able to work with multiple promise, but in this case I can't do Promise.all(), because I don't have all the url, but only one.

This example doesn't work, it all freezes.

function fetchNextJson(json_url) 
{
    return fetch(json_url, {
            method: 'get'
        })
        .then(function(response) {
            return response.json();
        })
        .then(function(json) {
            console.log(json);
            return json;
        })
        .catch(function(err) {
            console.log('error: ' + error);
        });
}


function getItems(next_json_url) 
{
    if (!(next_json_url)) return;

    get_items = fetchNextJson(next_json_url);

    interval = $q.when(get_items).then(function(response) {
        console.log(response);
        next_json_url = response.Pagination.NextPage.Href;
    });

    getItems(next_json_url);
}


var next_json_url = 'http://localhost:3000/one';

getItems(next_json_url);

I have to make a sequence of fetch() Promise: I have only 1 url at a time, this means only 1 fetch() promise. Every time I receive a json,this one contains an url for another json, so I have to make another fetch() promise.

I'm able to work with multiple promise, but in this case I can't do Promise.all(), because I don't have all the url, but only one.

This example doesn't work, it all freezes.

function fetchNextJson(json_url) 
{
    return fetch(json_url, {
            method: 'get'
        })
        .then(function(response) {
            return response.json();
        })
        .then(function(json) {
            console.log(json);
            return json;
        })
        .catch(function(err) {
            console.log('error: ' + error);
        });
}


function getItems(next_json_url) 
{
    if (!(next_json_url)) return;

    get_items = fetchNextJson(next_json_url);

    interval = $q.when(get_items).then(function(response) {
        console.log(response);
        next_json_url = response.Pagination.NextPage.Href;
    });

    getItems(next_json_url);
}


var next_json_url = 'http://localhost:3000/one';

getItems(next_json_url);

• javascript
• angularjs
• json
• promise
• es6-promise

Share Improve this question Follow asked Jun 26, 2016 at 1:56 FrancescoNFrancescoN 2,1861212 gold badges3636 silver badges4848 bronze badges 13

• What is expected behavior and overall goal? – charlietfl Commented Jun 26, 2016 at 2:12
• How many total requests are expected to be processed? $q.when() does not appear to be necessary. Why do you call getItems(next_json_url) outside of .then() within getItems() call? – guest271314 Commented Jun 26, 2016 at 2:12
• what is the base case? when will you stop fetching data? – Zohaib Ijaz Commented Jun 26, 2016 at 2:12
• i have to download 1 json at a time: the first has a reference for the next one, and so on @guest27131 as many as I want.. 1-40. I'll stop when there is no more reference, in current json, for the next json – FrancescoN Commented Jun 26, 2016 at 2:21
• 1 Might consider making sure you have a master nav map and work from that instead. Would make it easier to handle errors since one error will break your chain and map would give you a place to track updates from – charlietfl Commented Jun 26, 2016 at 3:44

 |  Show 8 more ments

1 Answer 1

Sorted by: Reset to default 10

You can use recursion

function fetchNextJson(json_url) {
    return fetch(json_url, {
            method: 'get'
        })
        .then(function(response) {
            return response.json();
        })
        .then(function(json) {
            results.push(json);
            return json.Pagination.NextPage.Href 
                   ? fetchNextJson(json.Pagination.NextPage.Href)
                   : results
        })
        .catch(function(err) {
            console.log('error: ' + error);
        });
}


var next_json_url = 'http://localhost:3000/one';
var results = [];

fetchNextJson(json_url).then(function(res) {
  console.log(res)
})

本文标签： javascriptmultiplesequential fetch() PromiseStack Overflow