React中的多个API调用

Question

我正在制作一个从API接收数据的应用程序。 一旦获得了这些数据，我想使用从第一次调用中获得的端点再次调用相同的API。

fetch(req)
    .then((response)=>(
        response.json()
    )).then((json)=>{
        console.log(json)
        json.meals.map((obj)=>{
            let url = `https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${obj.id}/information`
            let req = new Request(url,{
            method: 'GET',
            headers: header
        })
        fetch(req)
        .then((response)=>(
        response.json()
        )).then((json)=>{
            console.log(json);
        this.setState((prevState)=>{
                recipe: prevState.recipe.push(json)
        })
        })
        })
        this.setState(()=>{
            return{
                data: json
            }
        })
    })

我在这里提出了两个提取请求，但问题是在第二个提取请求之后输出了来自第一个响应的数据。 同样， state: data在state: recipe之前设置，组件使用state: data的数据进行渲染。

render(){
      return(
        <div className="my-container">
        <EnterCalorie getData={this.getData}/>
        <MealData data={this.state.data} recipe={this.state.recipe}/>
        </div>
      )
    }

我如何确保两者同时传下来？

Answer 1

fetch(req) // req no1
    .then((response)=>(
        response.json()
    )).then((json)=>{
        console.log(json)
        json.meals.map((obj)=>{
            let url = `https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${obj.id}/information`
            let req = new Request(url,{
            method: 'GET',
            headers: header
        })
        fetch(req) // req no 1 called again
        .then((response)=>(
        response.json()
        )).then((json1)=>{
            console.log(json1);
            this.setState((prevState)=>{
                recipe: prevState.recipe.push(json1)
            })
            this.setState(()=>{
                return{
                    data: json
            })
        })
        })
        })

    })

我认为您在第二个访存调用中再次使用相同的req参数调用api

Answer 2

在第3行中，返回return response.json()而不是什么（ undefined ）。

更新：

const toJson = response => response.json()

fetch(req)
    .then(toJson)
    .then(json => {
        this.setState(() => {
            return {
                data: json
            }
        })

        return json
    })
    .then((json) => {
        console.log(json)
        const promises = json.meals.map((obj) => {
            let url = `https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${obj.id}/information`
            let req = new Request(url, {
                method: 'GET',
                headers: header
            })
            return fetch(req)
                .then(toJson)
                .then((json) => {
                    console.log(json);
                    this.setState((prevState) => ({
                        recipe: prevState.recipe.push(json)
                    }))
                })
        })

        return Promise.all(promises)
    })
    .then(() => {
        console.log('job done')
    })

您需要将数组映射为Promise。 然后使用Promise.all等待他们解决。

缺少括号：

this.setState((prevState)=>{
    recipe: prevState.recipe.push(json)
})

旁注，这整个东西应该重构。 您不会对这种代码样式/代码复杂性感到厌烦。

Answer 3

这是一个回调地狱，请查找Promise races并检查all（） promise方法。