Получение данных из БД по нескольким API

Question

Подскажите, пожалуйста, как организовать получение данных из БД в ReactJS с нескольких API?

Бэк: Django + DRF, фронт: React, БД: PostgreSQL

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import * as ReactDOM from 'react-dom';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false,
      placeholder: "Загрузка..."
    };
  }

  /**
   * api/department
   * api/battalion
   * api/division
   * api/echelon
   * api/structure
   */

  componentDidMount() {
    fetch("api/department")
      .then(response => {
        if (response.status > 400) {
          return this.setState(() => {
            return {
              placeholder: "Что-то пошло не так!"
            };
          });
        }
        return response.json();
      })
      .then(data => {
        this.setState(() => {
          return {
            data,
            loaded: true
          };
        });
      });
  }

  render() {
    return (
        <Paper className={classes.root}>
            <TableContainer className={classes.container}>
                <Table stickyHeader aria-label="sticky table">
                    <TableHead>
                        <TableRow>
                            {columns.map((column) => (
                                <TableCell
                                    key={column.id}
                                    align={column.align}
                                    style={{minWidth: column.minWidth}}
                                >
                                    {column.label}
                                </TableCell>
                            ))}
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                                 .map((row) => {
                                     return (
                                         <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
                                             {columns.map((column) => {
                                                 const value = row[column.id];
                                                 return (
                                                     <TableCell key={column.id} align={column.align}>
                                                         {column.format && typeof value === 'number' ? column.format(value) : value}
                                                     </TableCell>
                                                 );
                                             })}
                                         </TableRow>
                                     );
                                 })}
                    </TableBody>
                </Table>
            </TableContainer>
            <TablePagination
                rowsPerPageOptions={[10, 25, 100]}
                component="div"
                count={rows.length}
                rowsPerPage={rowsPerPage}
                page={page}
                onChangePage={handleChangePage}
                onChangeRowsPerPage={handleChangeRowsPerPage}
            />
        </Paper>
    )
  }
}

export default App;

const container = document.getElementById("app");
render( < App / > , container);

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>123</title>
</head>

<body>
  <div id="header"></div>
  <div id="app"></div>
</body>


<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script type="module" src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

</html>

Answer 1

Если имеется ввиду несколько эндпоинтов и можно кидать запросы в параллель, то я бы предложил такой вариант:

componentDidMount() {
  Promise.all([
    fetch('api/department'),
    fetch('api/battalion'),
    fetch('api/division'),
    fetch('api/echelon'),
    fetch('api/structure)'),
  ]).then(
    async ([
      departmentResponse,
      battalionResponse,
      divisionResponse,
      echelonResponse,
      structureResponse,
    ]) => {
      const department = await departmentResponse.json();
      const battalion = await battalionResponse.json();
      const division = await divisionResponse.json();
      const echelon = await echelonResponse.json();
      const structure = await structureResponse.json();

      // и далее логика
    }
  );
}

БЛОГ НА HUSL

Получение данных из БД по нескольким API

Ответы (1 шт):