javascript - Problem with nested fetch request in React - Stack Overflow

admin管理员组

文章数量:1302275

New to React, I'm currently trying to create a data table with data from an API. I want to have a first fetch, and then run another with response from the first (id) in order to plete my table.

Here is my code:

class HomePage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: {},
            data: []
        };
    }

    ponentDidMount() {
        this.setState({
            user: JSON.parse(localStorage.getItem('user'))
        }, function () {
            this.loadAllObjectsInfo()
        });
    }

    // Fetch all object info in order to fill the table
    loadAllObjectsInfo() {
        const requestOptions = {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'bbuser': this.state.user.userId,
                'bbtoken': this.state.user.secret
            },
        };

        fetch('https://xxxxx/api/objects', requestOptions)
            .then(response => response.json())
            .then((data) => {
                this.setState({ data: data })
            })

    }

With this code, I have the data I want to render my table but I need to run another fetch to get other info with the id ing from the first request.

How can I do that nested fetch request?

New to React, I'm currently trying to create a data table with data from an API. I want to have a first fetch, and then run another with response from the first (id) in order to plete my table.

Here is my code:

class HomePage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: {},
            data: []
        };
    }

    ponentDidMount() {
        this.setState({
            user: JSON.parse(localStorage.getItem('user'))
        }, function () {
            this.loadAllObjectsInfo()
        });
    }

    // Fetch all object info in order to fill the table
    loadAllObjectsInfo() {
        const requestOptions = {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'bbuser': this.state.user.userId,
                'bbtoken': this.state.user.secret
            },
        };

        fetch('https://xxxxx/api/objects', requestOptions)
            .then(response => response.json())
            .then((data) => {
                this.setState({ data: data })
            })

    }

With this code, I have the data I want to render my table but I need to run another fetch to get other info with the id ing from the first request.

How can I do that nested fetch request?

• javascript
• reactjs
• fetch-api

Share Improve this question Follow edited Nov 5, 2023 at 20:35 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 16, 2019 at 8:03 JourdanMJourdanM 8711 silver badge55 bronze badges 1

• async/await is the good option rather than writing promises. Promises will take you to callback hell. – Guruprasad Commented Sep 16, 2019 at 9:09

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You can easily manage this with async/await:

async loadAllObjectsInfo() {
    const requestOptions = {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'bbuser': this.state.user.user
            'bbtoken': this.state.user.secret
        },
    };

    let response = await fetch('https://xxxxx/api/objects', requestOptions);
    let data = await response.json();

    // here is another fetch - change to fit your request parameters (this is just example)
    let info = await fetch('https://xxxxx/api/objects/' + data.id);

    this.setState({ data });
}

You can read more about async function.

@JourdanM, you should return a new fetch request from one of the then handlers. I've made a simple snippet for you. There are no data validators and spinners. This is a simple showcase. =)

A fetch request returns a promise, and you can chain promises by simply returning them from the then handlers. Here is a good article about it, it has great examples: https://javascript.info/promise-chaining

function fetchUser (user) {
  return fetch(`https://api.github./users/${user.login}`)
}

class User extends React.Component {
  state = {
    user: null
  }

  ponentDidMount () {
    fetch("https://api.github./users")
      .then(response => response.json())
      .then(users => fetchUser(users[0]))
      .then(response => response.json())
      .then(user => {
        this.setState({user})
      })
  }
  
  render () {
    return (
      <div>
        <pre>{JSON.stringify(this.state.user, null, 2)}</pre>
      </div>
    )
  }
}

ReactDOM.render(<User />, document.querySelector("#root"));

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

You can write the code as below.

fetch('https://xxxxx/api/objects', requestOptions)
.then(response => response.json())
.then((res1) => {

    fetch('https://xxxxx/api/objects', requestOptions)
    .then(response => response.json())
    .then((res2) => {
        this.setState({ data: res2 });
    });

});

Hope this will work for you!

You can also use axios like below

axios.post(url, data, header).then(res => {
        if(res.status === 200){
             console.log('1st data')
            axios.post(url, data, header)
                .then(response => {
                    if (response.status === 200) {
                        console.log('2nd data')
                    } else {
                        console.log('2nd error')
                    }
                });

        }else{
            console.log('1st error')
        }
    });

本文标签： javascriptProblem with nested fetch request in ReactStack Overflow