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
            })
        })
        })
        })

    })

我认为您在第二次 fetch 调用中再次调用具有相同 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 方法。