Синхронный вызов API -> Axios Call для завершения - PullRequest
Новая
       15

Синхронный вызов API -> Axios Call для завершения

0 голосов
/ 26 марта 2019

У меня есть код реакции, который отображает данные в формате диаграммы, извлеченные из шпионских ссылок в формате JSON.Существует средство выбора даты, которое позволяет пользователю передавать параметр в URL-адресе API.Проблема в том, что новый URL-вызов не выполняется синхронно, поэтому на диаграмме отображаются старые данные.

Использование Axios для вызова API и метод getSecure (), определенный в классе HttpClient, который использует библиотеку запроса-обещания.

Я пытался установить setTimeout (), чтобы завершить вызов API перед отображением данных в пользовательском интерфейсе, но время отклика увеличивается, и невозможно предсказать, сколько времени заставит API ждать.Нужно какое-то конкретное решение.

Так что здесь getSecure () вызывается для всех URL-адресов, и он не переходит к следующей строке управления, вместо этого он вызывает URL-адрес и не ждет. 

const RMS_ENVIRONMENTS = ['APAC', 'EMEA', 'AMER'];
    const R = {};
    RMS_ENVIRONMENTS.map(rms_env => {
        R[rms_env] = {
            PC: `someurl?date=${cob}&region=${rms_env}&output_format=json`,
            FO: `$someurl?date=${cob}&region=${rms_env}&output_format=json`,
            MLRM: `$someurl?date=${cob}&region=${rms_env}&output_format=json`,
            RDF: `someurl?date=${cob}&region=${rms_env}&output_format=json`
        };
    });
    Object.keys(R).map(key => {
        const environment = R[key];
        Object.keys(environment).map(report => {
            const url = environment[report];
            console.log('Calling spyder for:' + url, COMPONENT);
            getSecure(url).then(detail => {
                let dataLength = _.size(detail);
                console.log(`Updated Risk Feed for ${key}, report ${report} cache with ${dataLength} records`, COMPONENT);
                Cache.updateFeeds(key, report, detail);
                //console.log('complete feed update-' + key + ' ' + report);
            })
                .catch(error => { logErr(error, COMPONENT) });
        });
    });

Таким образом, вывод будет: 

Calling spyder for
Calling spyder for
Calling spyder for
Calling spyder for

, затем 

Updated Risk Feed for
Updated Risk Feed for
Updated Risk Feed for

, при этом диаграмма загружается со старыми данными / половинными данными, а затем вызывается ниже для извлечения всех данных.

Updated Risk Feed for
Updated Risk Feed for
Updated Risk Feed for

1 Ответ

0 голосов
/ 26 марта 2019 
const lastIndexR = R.length - 1;  // get last index
Object.keys(R).map((key,indexR) => { // get map index
    const environment = R[key];
let lastIndexEnv = environment.length-1  // get last index of env
    Object.keys(environment).map((report,indexEnv) => { // get index of map
        const url = environment[report];
        console.log('Calling spyder for:' + url, COMPONENT);
        getSecure(url).then(detail => {
            let dataLength = _.size(detail);
            console.log(`Updated Risk Feed for ${key}, report ${report} cache with ${dataLength} records`, COMPONENT);
            Cache.updateFeeds(key, report, detail);
// check if this is the last call then update state
if(indexR === lastIndexR && indexEnv === lastIndexEnv){  
// update state true show data (initial state should be false)
// the above state will be used in render function that if state is true then 
// show data

}
            //console.log('complete feed update-' + key + ' ' + report);
        })
            .catch(error => { logErr(error, COMPONENT) });
    });
});
...