Как реализовать взаимодействие frontend и API

«Как реализовать взаимодействие frontend и API» — вопрос из категории Сети, который задают на 26% собеседований Node.js Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

В контексте Node.js, взаимодействие frontend и API обычно означает создание backend API, с которым будет общаться фронтенд. Я реализую это с помощью фреймворка Express.js.

1. Создание REST API Endpoint:

const express = require('express');
const app = express();
app.use(express.json()); // Middleware для парсинга JSON

// Пример GET endpoint для получения данных
app.get('/api/users', async (req, res) => {
  try {
    // Логика получения данных из БД (например, с помощью Mongoose для MongoDB)
    const users = await UserModel.find({});
    res.status(200).json({
      success: true,
      data: users
    });
  } catch (error) {
    res.status(500).json({
      success: false,
      message: 'Ошибка при получении пользователей'
    });
  }
});

// Пример POST endpoint для создания данных
app.post('/api/users', async (req, res) => {
  try {
    const newUser = new UserModel(req.body);
    const savedUser = await newUser.save();
    res.status(201).json({
      success: true,
      data: savedUser
    });
  } catch (error) {
    res.status(400).json({
      success: false,
      message: error.message
    });
  }
});

app.listen(3000, () => console.log('API сервер запущен на порту 3000'));

2. Настройка CORS для доступа с фронтенда:

npm install cors
const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:8080', // URL вашего фронтенд-приложения
  credentials: true // Если используются куки/сессии
}));

3. Реализация аутентификации (например, с JWT):

const jwt = require('jsonwebtoken');
const SECRET_KEY = process.env.JWT_SECRET;

// Middleware для проверки токена
const authenticateToken = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1]; // Bearer TOKEN
  if (!token) return res.sendStatus(401);

  jwt.verify(token, SECRET_KEY, (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
};

// Защищённый маршрут
app.get('/api/profile', authenticateToken, (req, res) => {
  res.json({ user: req.user });
});

4. Документирование API (например, с Swagger/OpenAPI): Использую swagger-jsdoc и swagger-ui-express для автоматической генерации документации из комментариев в коде.

5. Тестирование Endpoints: Пишу интеграционные тесты с использованием Jest и Supertest.

const request = require('supertest');
describe('GET /api/users', () => {
  it('should return all users', async () => {
    const res = await request(app).get('/api/users');
    expect(res.statusCode).toBe(200);
    expect(res.body).toHaveProperty('data');
  });
});

Такой подход обеспечивает надёжное, безопасное и хорошо структурированное взаимодействие между фронтендом и бэкендом на Node.js.