如何从前端react.js中的node.js从多个数据库中获取数据

Question

I have the below code, where I have to get data from all the files in the same DB. Node.js is running at the backend. When I try the below code, I always get the last fetch, can anyone please help me how to fix this. The below is from the react JS frontend.

    componentDidMount() {
        console.log("This Worked Sucessfully")
        this.getDataFromDb();
        if (!this.state.intervalIsSet) {
          let interval = setInterval(this.getDataFromDb, 1000);
          this.setState({ intervalIsSet: interval });
        }
      }

      getDataFromDb = () => {fetch('http://172.24.78.202:3001/api/passed')
          .then(data => data.json())
          .then(res => this.setState({ passed: res.data }));
      };

      getDataFromDb = () => {fetch('http://172.24.78.202:3001/api/failed')
          .then(data => data.json())
          .then(res => this.setState({ failed: res.data }));
      };

      getDataFromDb = () => {fetch('http://172.24.78.202:3001/api/all')
          .then(data => data.json())
          .then(res => this.setState({ data2: res.data }));
      };
      render() {
        const primaryColor = getColor('primary');
        const secondaryColor = getColor('secondary');
        const { passed, failed, data2 } = this.state

Answer 1

From what I see by your code, you seem to be re-writing your goGetDataFromDB two times. Try changing the names of each function or, the way you call them. You can also take advantage of Promise.all to group the results of each call into a single return handle.

Check this link for the documentation of Promise.all

You could refactor your current code to something like this:

class MyComponent extends React.Component {
  componentDidMount() {
    this.getDataFromDb();
    if (!this.state.intervalIsSet) {
      let interval = setInterval(this.getDataFromDb, 1000)
      this.setState({intervalIsSet: true })
    }
  }

  getDataFromDb = () => {
    Promise.all([
      'http://172.24.78.202:3001/api/passed',
      'http://172.24.78.202:3001/api/failed',
      'http://172.24.78.202:3001/api/all'
    ].map(url => (
      fetch(url)
        .then(data => data.json())
        .then(res => res.data)
      )
    )).then(([passed, failed, data2]) => 
      this.setState({ passed, failed, data2 })
    );
  }

  render() {
    //...
  }
}

I tried to keep as much as your code as possible so you could notice the differences.

I hope this helps.