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

    })

我认为您在第二次获取调用中再次使用相同的请求参数调用 api

Answer 2

第 3 行 return 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 方法。

React 中的多个 API 调用

Multiple API Calls in React

html

javascript

reactjs

fetch-api