JS Fetch API странный

Я пытаюсь использовать Flickr API для отображения некоторых моих общедоступных фотографий на веб-сайте. Однако я получаю некоторые ошибки, которые я абсолютно не могу понять. Самое странное, что код пару дней назад работал нормально, а отладка показывает, что запрос выполняется, как задумано. Проблема, похоже, заключается в выполнении обещания, которое возвращает fetch ().

function getPhotos(){
  const url = `${URL}${queryString('getPhotos')}`;
  fetch(url)
    .then((resp) => {
      const w = resp.json();
      return w;
      // get different results if with
      // return resp.json();
    });
}

Здесь, при отладке с использованием метода без комментариев, статус обещания считается выполненным. Глядя на объект json, я вижу все фотографии внизу. Если я верну напрямую resp.json (), он вернет undefined

async function generatePhotos(list) {
  const list = await getPhotos();
  list.then((resp) => {
    // always get 'list is undefined' error
    // JSON.parse(list);
    const photos = resp.photo;
    for (let i = 0; i < 3; i++) {
      generateImgElem(photos[i].id);
    }
  });
}

Эта функция не будет работать, независимо от того, что возвращается из getPhotos (), обещание всегда остается ожидающим.

Что я здесь делаю не так? Я обыскал кучу и, насколько я могу судить, правильно использую fetch api.

Редактировать: Я получаю сообщение об ошибке, что список переменных не определен.

function getPhotos(){
  const url = `${URL}${queryString('getPhotos')}`;
  fetch(url)
    .then((resp) => {
      return resp.json();
    });
    // passes in undefined whether I stringify or not
    // .then((json) => {
    //   return JSON.stringify(json);
    // });
}

Вы пробовали регистрировать данные своего ответа json? Кроме того, функция async всегда возвращает Promise, поэтому вам может понадобиться await generatePhotos() или generatePhotos().then(photos => {/*...*/}).

ionizer 01.12.2018 19:49

Вам нужно вернуть что-то изнутри getPhotos, а не только из обратного вызова then. Вы, вероятно, захотите return fetch.

Alexander O'Mara 01.12.2018 19:53

И да, await также ожидает Promise, поэтому вам нужно return fetch(...), чтобы generatePhotos() не возвращал Promise, содержащий значение null.

ionizer 01.12.2018 19:56

Да, когда я пытаюсь вернуть его в журнал, я просто получаю записанное обещание, а не фактические данные. Не следует ждать, чтобы остальная часть кода в generatePhotos () не запускалась до тех пор, пока обещание не будет выполнено? Кроме того, наличие оператора return было для меня глупо, фактическая функция просто генерирует элементы HTML, которые, как мне казалось, не важны, поэтому я просто вставил какой-то фиктивный код. Он не должен ничего возвращать. Я обновил вопрос, извините за это!

gunnnnii 01.12.2018 20:15
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
314
1

Ответы 1

попробуй это

async function getPhotos(url) {
  const response = await fetch(url);
  const json = await response.json();
  return json;
}

когда вы выполняете запрос на выборку, потребуется некоторое время, чтобы что-то вернуть. Поэтому вы, скорее всего, вернете невыполненное обещание. Использование async гарантирует, что запрос на выборку будет завершен.

Превратить его в объект.

@gunnnnii And what stops you from doing let myObject = JSON.parse(stringifiedThing);? – Adi 1 min ago

Но я не ищу строковый json, мне нужен объект.

gunnnnii 01.12.2018 19:52

@gunnnnii А что вам мешает делать let myObject = JSON.parse(stringifiedThing);?

Adrian Pop 01.12.2018 19:55

Другие вопросы по теме