Блог

Я делаю Rest API на javascript, чтобы улучшить себя и немного повеселиться… И API работает хорошо!

 const getMethod = function(reqType){
    let req;
    if(!reqType){
        req=server ":" port;
    }
    else{
        req=`${server}:${port}/${reqType}`;
    }
    fetch(req,{mode:'cors'})
    .then(response=>{
        if(response.ok===true){
            response.json().then(res=>{
                console.log(res);
                return res;
            }).catch(err=>console.error(err));
        } else{
            console.error('Error. Status code: '  response.status   ' '  response.statusText);
            return {message: 'Failed'};
        }
    })
    .catch(err=>{console.error(err);
        return {message: 'Failed'}
    });
}
 

Я знаю, что это можно улучшить, но пока это работает. console.log(res) фактически показывает массив фиктивных данных с экспресс-сервера.

Дело в том, что, чтобы избежать создания другого сервера, я вложил в HTML следующий код:

 <script type="text/javascript">
        window.onload = function(){
            console.log(getMethod());
            const res = getMethod();
            console.log(res);
            classifyInfo(res);
            console.log("Get Information");
        }

        const classifyInfo = function(data){
            const ul=document.getElementsByTagName('section')[1].getElementsByTagName('ul');
            let content='';
            if(data['peliculas']amp;amp;data['clasificaciones']){
                const movies=data['peliculas'];
                const classes=data['clasificaciones'];
                for(let i=0;i<classes.length;i  ){
                    const clasMovies = searchInfo(movies, classes[i].nombre);
                    content =`<li>${classes[i].nombre} <ul>`;
                    for(let j=0;j<clasMovies;j  ){
                        content =`<li>${clasMovies[j].nombre}</li>`;
                    }
                    content ='</ul></li>';
                }
            }
        }

        const searchInfo = function(data, term){
            const returnElement = data.filter(el=>el['clasificacion']==term);
            return returnElement;
        }
    </script>
 

При функции onload значение res становится неопределенным, даже если впоследствии консоль отобразит массив. Однако я не знаю, почему он это делает.

Я пытался использовать await для ожидания ответа, но это тоже не работает.

Любые идеи будут оценены по достоинству 😉

Хорошо… Это было проще, чем я думал…

Я полагаю, что я должен просто окружить асинхронный порядок ожидания некоторой попыткой / уловом на всякий случай…

Я изменил свой API следующим образом:

 const getMethod = async function(reqType){
    let req;
    if(!reqType){
        req=server ":" port;
    }
    else{
        req=`${server}:${port}/${reqType}`;
    }
    const response = await fetch(req,{mode:'cors'})

    return response.json();
}
 

Который возвращает обещание, а затем я изменил скрипт в моем html следующим образом:

         window.onload = async function(){
            const res = await getMethod();
            console.log(res);
            classifyInfo(res);
            console.log("Get Information");
        }
 

выполнение обещания и получение моих хороших данных, поступающих с сервера узла.

Мне нравится использовать resolve , reject , но я полагаю, что try / catch сделает то же самое.