Вложенные методы fetch / then

Question

Я использую API-интерфейс flickr для поиска изображений и хочу получать фотографии с их тегами одновременно.

Чтобы сделать это, мне нужно сначала использовать flickr.photos.search метод для извлечения photo_id и построения URL-адреса фотографии (1-й и 2-й методы then). В третьей части «затем» я использовал другой метод API flickr.photos.getInfo , чтобы получить теги для каждой фотографии и, наконец, вернуть urlPhoto и tagsInfo, такие как json.

Проблема в том, что переменная tagsInfo по-прежнему является обещанием, и я не могу отобразить теги (массив) фотографии. Тем не менее, urlPhoto имеет правильное значение.

export function fetchAll(...) {
    return fetch(BASE_URL + encodeGetParams(params1), options)
    .then(response => {
      return response.json();
    })
    .then((data) => {
      return data.photos.photo.map(e => 
        ({
          "photo_id": e.id,
          "urlPhoto": 'https://farm'+e.farm+'.staticflickr.com/'+e.server+'/'+e.id+'_'+e.secret+'.jpg',
        })
      )
    })
    .then((data) => {
      return data.map(e => {
        const url = BASE_URL + encodeGetParams({ ...params2, "photo_id": e.photo_id });
        const tagsInfo = fetch(url, options)
        .then(data => data.json())
        .then(data => data.photo.tags.tag.map(e => e._content));

        return {
          "urlPhoto": e.urlPhoto,
          "tagsInfo": tagsInfo       
        }
      }
      )
    })
}

Answer 1

Вы можете создать отдельное обещание для каждого элемента в массиве, использовать Promise.all для этих обещаний и вернуть его.

export function fetchAll(/* ... */) {
  return fetch(BASE_URL + encodeGetParams(params1), options)
    .then(res => res.json())
    .then(data => {
      const promises = data.photos.photo.map(e => {
        const result = {
          urlPhoto: `https://farm${e.farm}.staticflickr.com/${e.server}/${e.id}_${e.secret}.jpg`
        };
        const url = BASE_URL + encodeGetParams({ ...params2, photo_id: e.photo_id });

        return fetch(url, options)
          .then(res => res.json())
          .then(data => {
            result.tagsInfo = data.photo.tags.tag.map(e => e._content);

            return result;
          });
      });

      return Promise.all(promises);
    });
}

Answer 2

Вам не нужно просто возвращать последнюю выборку и добавить дополнительные .then, которые разрешат

{
  "urlPhoto": e.urlPhoto,
  "tagsInfo": tagsInfo       
}

, например

export function fetchAll(...) {
    return fetch(BASE_URL + encodeGetParams(params1), options)
    .then(response => {
      return response.json();
    })
    .then((data) => {
      return data.photos.photo.map(e => 
        ({
          "photo_id": e.id,
          "urlPhoto": 'https://farm'+e.farm+'.staticflickr.com/'+e.server+'/'+e.id+'_'+e.secret+'.jpg',
        })
      )
    })
    .then((data) => {
      return data.map(e => {
        const url = BASE_URL + encodeGetParams({ ...params2, "photo_id": e.photo_id });
        return fetch(url, options)
        .then(data => data.json())
        .then(data => data.photo.tags.tag.map(e => e._content))
        .then(tagInfo => {
          return {
            "urlPhoto": e.urlPhoto
            "tagsInfo": tagsInfo       
          }
        })
      }
      )
    })
}

То, что вы сейчас делаете, этовозвращая urlPhoto / tagsInfo до того, как обещание получения теговInfo будет разрешено, поэтому дополнительные должны исправить это!