Как вернуть результат fetch после запроса к API?

Question

[someserj]

Задача - создать асинхронный запрос к API, который возвращает картинки (pixabay). Я создаю его через фетч, но когда дело доходит до return - возвращается пустота, ведь запрос-то асинхронный и к этому моменту картинки еще не пришли. Как быть?

function myfunc(){
  fetch(URL).then(function(response) {
      return response.json();
  }).then(function(hitsJSON) {
      hitsJSON.hits.forEach(item => {
          let resultItem = {
              id: item.id,
              url: item.previewURL,
              tags: item.tags
          }
          results.push(resultItem);
      });
  });
  return {
      query: query,
      images: results
  };
 }

Answer 1

[Евгений Куманин]

`fetch(URL)` возвращает обещание(Promise), а вы сразу возвращаете результат. Колбэк функция передаваемая в метод then будет вызвана позже, когда закончится процесс `fetch`.
Функция `myfunc` должна тоже возвращать Promise вот так:

function myfunc() {
  results = [];
  return fetch(URL)
    .then((response) => response.json())
    .then((hitsJSON) => {
      return hitsJSON.hits.map(item => {
        return {
              id: item.id,
              url: item.previewURL,
              tags: item.tags
          };
      }));
  });
 }

// и использование 
myfunc()
  .then((results) => {
    // do something
  })

Answer 2

[l1l1l1]

Используйте Promise