Как можно запретить этой поисковой панели API загрузки загружать старые запросы до того, как новые будут сохранены через localStorage? - PullRequest
Новая
       12

Как можно запретить этой поисковой панели API загрузки загружать старые запросы до того, как новые будут сохранены через localStorage?

0 голосов
/ 11 июня 2019

Я создал панель поиска для API NASA, используя fetch ().

Изображения для первого поискового запроса загружаются и отображаются, но для отображения нового запроса требуется несколько триггеров прослушивателя событий кнопки поиска. Кажется, что к старому ответу получают доступ до его обновления в localStorage или что-то подобное?

Вот кодекс: https://codepen.io/ana-ana/pen/orgbjB

Я пытался использовать setTimeout на searches.push(JSON.parse(localStorage.getItem('response')));, чтобы предотвратить проблему. Я также попытался вызвать функцию исполнения несколько раз. Я также пытался сохранить ответ json с другим именем в localStorage при каждом запуске функции. 

function clear(){
    document.getElementById('images').innerHTML='';
}
var searches = [];
function search(inquiry){
console.log(fetch(inquiry));
        fetch(inquiry)
                  .then(function(response) {
                    var status = response.status;
                    return response.json();
                  })
                  .then(function(jsonResponse) {
                    localStorage.setItem('response', JSON.stringify(jsonResponse));
                  });
searches.push(JSON.parse(localStorage.getItem('response')));
}
function display(){
    for(i = 0; i<searches[searches.length - 1].collection.items.length; i++){
        var img = document.createElement('img');
        img.src = searches[searches.length - 1].collection.items[i].links[0].href;
        document.getElementById('images').appendChild(img);
    }   
}


document.getElementById('btn').addEventListener('click', execute);

function execute(){
    clear();
    search(`https://images-api.nasa.gov/search?q=${document.getElementById('searchbar').value}`);
    console.log(searches[searches.length - 1]);
    display();
}

1 Ответ

0 голосов
/ 11 июня 2019

В вашей функции поиска вы отправляете свой массив searches за пределы обещания, что означает, что это, вероятно, происходит до того, как обещание сможет разрешить

...