【问题标题】:TypeError: response2.json is not a functionTypeError:response2.json 不是函数
【发布时间】:2020-05-18 09:57:09
【问题描述】:

我正在尝试使用匿名函数来获取两个数据集。使用两个 fetch 调用第二个调用取决于第一个调用,第二个调用是一个循环我保持在第二个调用时出错 response2.json 不是函数

    async function example() {
    let response1 = await fetch(
        `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=9c348b767f7a0403e907b0788188afba&text=observatory&accuracy=+11&media=photos+&geo_context=1&lat=41.8989&lon=-87.6123&radius=25&radius_units=km&extras=&format=json&nojsoncallback=1`
    );
    let json = await response1.json();
    console.log(json.photos.photo);

    const response2 = await json.photos.photo.map((i) =>
        fetch(
            `https://www.flickr.com/services/rest/?method=flickr.photos.geo.getLocation&api_key=9c348b767f7a0403e907b0788188afba&photo_id=${i.id}&format=json&nojsoncallback=1`
        )
    );


    const json2 = await response2.json();
    console.log(json2);
    return {
        dataset1: json,
        dataset2: json2
    };
}

【问题讨论】:

  • response2 将是获取响应的数组 - 数组不是获取响应

标签: javascript reactjs promise fetch anonymous


【解决方案1】:

问题

response2 是一系列承诺,

await json.photos.photo.map不会使内部请求同步,

const response2 = await json.photos.photo.map((i) =>
        fetch(
            `https://www.flickr.com/services/rest/?method=flickr.photos.geo.getLocation&api_key=9c348b767f7a0403e907b0788188afba&photo_id=${i.id}&format=json&nojsoncallback=1`
        )
    );

解决方案:

const promises = json.photos.photo.map((i) =>
    fetch(
        `https://www.flickr.com/services/rest/?method=flickr.photos.geo.getLocation&api_key=9c348b767f7a0403e907b0788188afba&photo_id=${i.id}&format=json&nojsoncallback=1`
    )
));

// get all response from promises
const response2 = await Promise.all(promises)

// response2 is array of responses , so we need to loop through it
const json2 = await Promise.all(response2.map(res => res.json()));

【讨论】:

    【解决方案2】:
    const response2 = await json.photos.photo.map(fetch('yourUrl'))
    

    接下来await 是一个数组,而不是一个承诺 所以也许你可以使用 Promise.all 来包装这个数组。 但是fetch 比普通的承诺有点特别。

    const response2 = await Promise.all(json.photos.photo.map(fetch('yourUrl')));
    const responseVirtual = response2.map(res => res.json());
    

    希望对你有帮助,兄弟

    【讨论】:

    • Promise.call改成Promise.all:D
    • @VivekDoshi 抱歉,打错了
    • 你还需要在地图中调用 fetch,因为两个 URL 是不同的
    猜你喜欢
    • 2019-12-28
    • 2021-03-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-09-30
    • 2013-06-14
    • 1970-01-01
    相关资源
    最近更新 更多