Приветствую! Сегодня расскажем вам про то, как реализовать Mock-серверы в Postman.

Mock-серверы позволяют имитировать поведение реального API. Т.е можно продолжать разработку своего приложения, даже если реальный сервер еще не готов или недоступен.

Если вы еще не установили Postman, самое время это сделать. Переходим на официальный сайт и скачиваем версию для вашей ОС. Установка проста, так что задерживаться на этом не будем.

Создание коллекции и запросов

Итак, приступим к делу.

Создаем новую коллекцию

• Открываем Postman.

• Нажимаем на кнопку «New» и выбираем «Collection».

• Даем коллекции название, например, «Мой API».

• Сохраняем.

Добавляем запросы

Теперь добавим несколько запросов, которые будем мокать.

• GET /users — получить список пользователей.

• GET /users/:id — получить информацию о конкретном пользователе.

• POST /users — создать нового пользователя.

Создание запроса:

1. Нажимаем «New» и выбираем «Request».

2. Даем запросу название и добавляем его в нашу коллекцию.

3. Вводим метод и URL запроса.

Пример запроса на создание пользователя:

POST /users
Content-Type: application/json

{
  "name": "Сергей Сергеев",
  "email": "sergey@example.com"
}

Определение примеров ответов

Это важный момент в создании Mock-сервера.

Добавляем пример ответа

1. Выбираем запрос в коллекции.

2. Переходим на вкладку «Examples».

3. Нажимаем «Add Example».

Заполняем пример ответа

Выбираем соответствующий статус код (например, 200 OK для успешного запроса). После чего добавляем необходимые заголовки (например, Content-Type: application/json). После этого вводим пример JSON-ответа.

Пример ответа для GET /users:

[
  {
    "id": 1,
    "name": "Иван Иванов",
    "email": "ivan@example.com"
  },
  {
    "id": 2,
    "name": "Петр Петров",
    "email": "petr@example.com"
  }
]

После заполнения нажимаем «Save Example».

Создание Mock-сервера

Теперь можно создать Mock-сервер.

1. Переходим в коллекцию.

2. Нажимаем на три точки рядом с названием коллекции и выбираем «Mock Collection».

3. В появившемся окне даем имя Mock‑серверу.

4. Выбираем среду, если используем переменные окружения.

5. Нажимаем «Create Mock Server».

После создания вы получите URL вашего Mock-сервера. Он выглядит примерно так: https://.mock.pstmn.io.

Настройка переменных и динамических данных

Переменные окружения позволяют делать запросы и ответы более гибкими.

• Создаем новую среду в Postman.

• Добавляем переменные, например, {{baseUrl}}, {{userId}}.

• Используем эти переменные в запросах и ответах.

Пример:

GET {{baseUrl}}/users/{{userId}}

Postman поддерживает функции динамического генератора данных.

{
  "id": {{$randomInt}},
  "name": "{{$randomFullName}}",
  "email": "{{$randomEmail}}"
}

Прочее

Иногда нужно возвращать разные ответы в зависимости от запроса.

• Используем заголовки или параметры запроса для управления ответами.

• Добавляем несколько примеров ответов к одному запросу.

• Используем «Matching Algorithm» в настройках Mock-сервера.

Как это работает:

• Postman сравнивает входящий запрос с примерами по методу, URL, заголовкам и параметрам.

• Если находит совпадение, возвращает соответствующий пример ответа.

А чтобы имитировать задержку сети или медленный сервер в примере ответа добавляем заголовок x-mock-response-delay со значением в миллисекундах.

Пример:

x-mock-response-delay: 2000

Это добавит задержку в 2 секунды перед отправкой ответа.

Интеграция с фронтендом

Теперь Mock-сервер готов, интегрируем Mock-сервер в приложение.

JavaScript

Пример с fetch API:

fetch('https://.mock.pstmn.io/users')
  .then(response => response.json())
  .then(data => {
    console.log('Полученные данные:', data);
    // Обновляем состояние приложения
  })
  .catch(error => {
    console.error('Ошибка:', error);
  });

React

Пример использования в компоненте:

import React, { useEffect, useState } from 'react';

function UsersList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://.mock.pstmn.io/users')
      .then(response => response.json())
      .then(data => setUsers(data))
      .catch(error => console.error('Ошибка:', error));
  }, []);

  return (
    <ul>
      {users.map(user =&gt; (
        <li>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

export default UsersList;

Тестирование

Mock-серверы отлично подходят для написания и отладки тестов. Для этого переходим на вкладку «Tests» в запросе.

Пример теста:

pm.test("Статус код 200", function () {
  pm.response.to.have.status(200);
});

pm.test("Ответ содержит массив пользователей", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData).to.be.an('array');
});

Если вы еще не пробовали использовать Mock-серверы, самое время начать. А если у вас есть свои истории, советы или вопросы, пишите в комментариях.

Всех, кто активно работает с данными, приглашаем на открытый урок, посвященный инструментам для выгрузки данных. Урок пройдет 21 ноября. Записаться можно на странице курса «Data Engineer».