1

Здравствуйте, подскажите пожалуйста, что должны возращать функции, внутри которых вызываются фетчи, чтобы Promise.all по этим функциям дождался выполнения всех функций с выборками данных для страницы.

Поясняю. Существует страница, которая при открывании должна вначале загрузить списки городов, другие списки, например букв каких то в <select>

let promiseLoadPage = Promise.all([
    loadCitiesToElement(3, cityIdElem), //загружаем список населённых пунктов
    loadLetters() //загружаем буквы для дома, квартиры, корпуса, участка
]);

promiseLoadPage
.then(result => {
    console.log(result);
    //и вот тут мы загружаем данные о некотором заявлении, также фетчем внутри функции
    return loadStatement();
})
.then(
    result => {
        console.log('success');    
    },
    error => {
        console.log(error);
    }
)
.catch(err => {
    console.error(err);
});

Дело в том, что, рассматривая функцию loadCitiesToElement, если я установлю в самом низу return fetchCities, оно вернёт мне ответ, но он вернёт его сразу же, не дождавшись выполнения самой загрузки городов. Если я внутри fetch.then() напишу return this, или return fetchCities то мне ничего не вернётся. в переменной result будет два значения undefined, если так сделаю в обоих функциях.

Пытался возвращать Promise.resolve() из разных мест, всеравно ноль толку. Может кто сталкивался с подобным и подскажет что должны возвращать такие функции с фетчами, для того чтобы Promise.all() дождался выполнения всех функций

Мои функции, немного сокращённо, но суть думаю понятна

function loadCitiesToElement(area = 3, targetElement, defValue) {
let fetchCities = fetch(HTTP_SERVER + '/areas/' + area + '/cities', {
    method: 'GET'
});

fetchCities
    .then(response => response.json())
    .then(cities => {
        if (cities) {
            //некоторая работа с cities и получаем options, которые суём в select
            targetElement.html(options);
        }
        return Promise.resolve();
    })
    .catch(err => {
        console.error(err);
        return Promise.reject();
    });
}


function loadLetters() {
let fetchLetters = fetch(MICRON_ADDR + '/helpers/adresses/letters');

fetchLetters
    .then(response => response.json())
    .then(letters => {
        if (letters) {
            //аналогично что-то делаю с letters и сую их по Options
            houseLetterElem.html(options);
            housingLetterElem.html(options);
            flatLetterElem.html(options);
            plotLetterElem.html(options);
        }
        return Promise.resolve();
    })
    .catch(err => {
        console.error(err);
        return Promise.reject();
    });
}

функция loadStatement() просто должна загрузить аналогичным fetch данные, и распихать значения по select-ам, но если к примеру список городов загрузится позже, чем загрузится заявление, то есстественно оно не сможет задать значение для этого списка городом, полученным через loadStatement т.к. в нём на момент присвоения значения ничего не будет.

В случае, если в каждой функции, в самом конце, за пределами fetch-ей, написать return fetchCities или return fetchLetters соответственно по функциям, то в promiseLoadPage.then(result => {}) мне будет в result приходить такие данные:

console.log

И дело в том, что эти функции fetchCitiesToElement и fetchLetters используются по всей программе и в Promise.all() вызывать непосредственно fetch, оборачивая как показано ниже - мне не представляется возможным.

Promise.all(urls.map(url =>
      fetch(url).then(resp => resp.text())
 )).then(texts => {
          …
   })

.................... через пару часов

получилось сделать нечто такое:

function promiseLoadLetters() {
return new Promise(function(resolve, reject) {
    loadLetters(resolve, reject);
});
}

function promiseLoadCities() {
return new Promise(function(resolve, reject) {
    loadCitiesToElement(3, cityIdElem, 0, resolve, reject);
});
}

//прогрузка списков 
let promiseLoadPage = Promise.all([
promiseLoadCities(), //загружаем города
promiseLoadLetters() //загружаем буквы для дома, квартиры, корпуса, участка
]);

console.log(promiseLoadPage);

promiseLoadPage
.then(result => {
    //мы дождались выполнения всех асинхронных загрузок данных и можем загружать данные о заявлении
    console.log(promiseLoadPage);
    console.log(result);

    if ($_GET['action'] === 'create') {
        return test();
    } else if ($_GET['action'] === 'update') {
        return loadStatement();
    }
})
.then(
    result => {
        console.log('success');
    },
    error => {
        console.log(error);
    }
)
.catch(err => {
    console.error(err);
});

и внутри каждой из функций теперь появились строчки resolve() в .then() и reject() в catch().... Оно работает, но мне кажется что это какой-то быдлокод, обарачивать fetch, который возвращает сам по сути Promise, в ещё один Promise. Может всё таки найдётся у кого-нибудь более изящный вариант решения подобного рода проблемы. Спасибо.

1 ответ 1

1

На самом деле вы правы, fetch уже возращает promise.

Вот так должно работать:

function loadCitiesToElement(area = 3, targetElement, defValue) {
let fetchCities = fetch(HTTP_SERVER + '/areas/' + area + '/cities', {
    method: 'GET'
});

return fetchCities
    .then(response => response.json())
    .then(cities => {
        if (cities) {
            //некоторая работа с cities и получаем options, которые суём в select
            targetElement.html(options);
        }
        return cities; // возращаем данные выше
    })
    .catch(err => {
        console.error(err);
    });
}


function loadLetters() {
let fetchLetters = fetch(MICRON_ADDR + '/helpers/adresses/letters');

return fetchLetters
    .then(response => response.json())
    .then(letters => {
        if (letters) {
            //аналогично что-то делаю с letters и сую их по Options
            houseLetterElem.html(options);
            housingLetterElem.html(options);
            flatLetterElem.html(options);
            plotLetterElem.html(options);
        }
        return letters; // здесь аналогично
    })
    .catch(err => {
        console.error(err);
    });
}

Вызов функций:

let promiseLoadPage = Promise.all([
    loadCitiesToElement(3, cityIdElem), //загружаем список населённых пунктов
    loadLetters() //загружаем буквы для дома, квартиры, корпуса, участка
]);

promiseLoadPage
.then(result => {
    console.log(result);
    //и вот тут мы загружаем данные о некотором заявлении, также фетчем внутри функции
    return loadStatement();
})
.then(
    result => {
        console.log('success');    
    }
)
.catch(err => {
    console.error(err);
});
3
  • Спасибо большое за ответ, проверить смогу завтра решение, с самого утра, отпишусь. 18 янв 2018 в 17:21
  • Спасибо ещё раз! Так действительно работает! Может вы сможете ещё пояснить один момент, почему тогда когда я писал код, немного аналогичный вашему, только return fetchLetters стоял в самом конце функции loadLetters(), оно не работало, а сработало только когда я сделал как вы сказали написав return fetchLetters.then(...).then(...)? 19 янв 2018 в 5:04
  • 1
    @VladimirMedinsky на самом деле есть еще отличие, не только в расположении return fetchLetters. Обратите внимание на return cities и return letters. 19 янв 2018 в 6:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.