嵌套的获取/然后方法

时间:2019-03-07 13:37:22

标签: reactjs fetch flickr

我正在使用flickr API搜索图像,我想同时获取带有其标签的照片。

要做到这一点,我首先需要使用 flickr.photos.search 方法来获取photo_id并构建照片url(第一个和第二个“ then”方法)。在第3个“ 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       
        }
      }
      )
    })
}

2 个答案:

答案 0 :(得分:1)

您是否不仅需要返回最后的获取并添加一个额外的void Destroyed() { if (!enemy.activeSelf) { Debug.Log("Enemy is not active"); } } 即可解决

.then

喜欢

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

您当前正在做的是在tagInfo获取承诺尚未解决之前返回urlPhoto / tagsInfo,因此应多加修复!

答案 1 :(得分:1)

您可以为数组中的每个元素创建一个单独的Promise,对这些Promise使用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);
    });
}