正文

JSONPlaceholder: 15 тестовых постов с id, title, body — бесплатный API для фронтенд-разработки и прототипирования без регистрации и лимитов

/0 浏览量
0912

Представь, что ты только что начал изучать JavaScript или React. Ты пишешь свой первый “Hello World”, он работает, но ты чувствуешь пустоту. Данные? Их нет. Ты пытаешься сделать список задач, но откуда брать эти задачи? Создавать свою базу данных, настраивать сервер, писать бэкенд? На это уйдут дни, а ты хочешь просто понять, как работает fetch или как отрисовать список в компоненте.

И тут на сцену выходит герой по имени JSONPlaceholder. Это тот самый инструмент, который превращает твою пустую страницу в живое приложение за пять минут. Не нужно регистрироваться, не нужно платить, не нужно ничего устанавливать. Просто открываешь браузер, копируешь ссылку — и у тебя есть целая фейковая база данных.

Давай разберем это все по полочкам, как если бы мы сидели за чашкой кофе и я показывал тебе свои старые рабочие заметки.

Что это такое и почему оно стало настолько популярным?

JSONPlaceholder — это бесплатный онлайн REST API. Если говорить простым языком, это сайт, который отвечает на твои запросы как настоящий сервер, но данные там выдуманные (в основном). Он был создан专门 для того, чтобы разработчики могли тренироваться делать HTTP-запросы, не заморачиваясь с настройкой бэкенда.

Самый известный его ресурс — это, конечно же, посты. Их там ровно 100 штук, но ты можешь брать их по одному, по несколько или все сразу. Каждый пост выглядит как настоящая запись в блоге или новости. У него есть уникальный номер (id), заголовок (title) и сам текст (body).

Почему это так важно для новичка? Потому что в реальной работе 80% времени фронтендер тратит не на верстку кнопок, а на то, чтобы вытащить данные откуда-то и красиво их показать. JSONPlaceholder позволяет отточить этот навык до автоматизма. Ты можешь ошибаться, ломать код, удалять данные — и тебе ничего за это не будет. Сервер не обидится, база данных не упадет, твой аккаунт не заблокируют.

Как получить эти самые 15 постов?

Давай сразу к практике. Я знаю, что лучше один раз увидеть код, чем сто раз прочитать теорию. Представь, что ты сидишь в своей IDE, у тебя открыт терминал, и ты хочешь просто проверить, получается ли у тебя связаться с внешним миром.

Самый простой запрос — это получить список постов. API JSONPlaceholder поддерживает стандартные ограничения. Если ты хочешь именно 15 постов, ты можешь сделать так:

fetch('https://jsonplaceholder.typicode.com/posts?_limit=15')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', error));

Если ты запустишь этот код в консоли браузера или в Node.js окружении, то получишь массив из 15 объектов. Каждый из них будет иметь такую структуру:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

Обрати внимание на поле userId. Это интересно, потому что JSONPlaceholder не случайным образом генерирует данные. Есть логика: посты с userId: 1 принадлежат выдуманному пользователю с ID 1. Это позволяет тебе не просто брать текст, но и строить сложные связи. Например, “покажи мне все посты первого пользователя”.

А если тебе нужно всего одно конкретное сообщение, допустим, под номером 5, запрос будет еще проще:

fetch('https://jsonplaceholder.typicode.com/posts/5')
  .then(response => response.json())
  .then(data => console.log(data.title));

В консоль выведется заголовок пятого поста. Всё, ты уже умеешь работать с API. Это базовый уровень, но на нем строятся гиганты индустрии.

Что еще есть кроме постов? Не только текст

Хотя в твоем запросе упоминались именно посты, JSONPlaceholder — это не только текст. Это полноценный симулятор социальной сети или блога. Там есть таблицы пользователей, комментариев, альбомов, фото, задач и токенов.

Давай рассмотрим пользователя. В базе их 10. Если ты хочешь узнать, кто стоит за постами, которые ты только что вывел, ты можешь сделать такой запрос:

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(users => {
    const firstUser = users[0];
    console.log(`Пользователь: ${firstUser.name}, Email: ${firstUser.email}`);
  });

Теперь у тебя есть имя, email, телефон и даже адрес (с улицей, городом, географическими координатами) выдуманного человека. Это выглядит пугающе реалистично, но, поверь, это все фейк.

А еще там есть комментарии. Их сотни. У каждого комментария есть postId, связывающий его с конкретной записью. Это идеальная возможность потренироваться делать вложенные запросы: сначала получи посты, потом для каждого поста получи комментарии. Или, что еще круче, используй возможности самого API для фильтрации:

// Получить комментарии только к посту с id = 1
fetch('https://jsonplaceholder.typicode.com/comments?postId=1')
  .then(response => response.json())
  .then(comments => console.log(comments.length)); // Выведет 50

Заметил? API сам понимает логику. postId=1 — и он возвращает только те комментарии, которые относятся к первой записи. Тебе не нужно скачивать всё и фильтровать на фронтенде. Это экономит трафик и нервы.

Как это выглядит в реальном проекте на React?

Теория — это хорошо, но давайте перенесемся в 2024 год. Скорее всего, ты работаешь с React, Vue или Angular. Как интегрировать этот API в современный компонент?

Вот пример простого, но понятного компонента на React, который показывает, как это делается в жизни. Мы будем использовать хук useState для хранения данных и useEffect для выполнения запроса при загрузке страницы.

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

function PostList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Запрашиваем первые 15 постов
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=15')
      .then(response => {
        if (!response.ok) {
          throw new Error('Ошибка сети');
        }
        return response.json();
      })
      .then(data => {
        setPosts(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []); // Пустой массив зависимостей означает, что эффект сработает один раз при монтировании

  if (loading) return <div>Загружаем посты...</div>;
  if (error) return <div>Произошла ошибка: {error}</div>;

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>Список постов (первые 15)</h1>
      <ul style={{ listStyleType: 'none', padding: 0 }}>
        {posts.map(post => (
          <li 
            key={post.id} 
            style={{ 
              border: '1px solid #ddd', 
              borderRadius: '8px', 
              padding: '15px', 
              marginBottom: '10px',
              backgroundColor: '#f9f9f9'
            }}
          >
            <h3 style={{ margin: '0 0 10px 0' }}>{post.title}</h3>
            <p style={{ margin: 0, color: '#555' }}>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PostList;

Посмотри, как это просто. Ты не создал ни одного файла на сервере. Ты не настраивал базу данных. Ты просто попросил данные у внешнего ресурса и вывел их на экран. Если ты хочешь, чтобы приложение выглядело более профессионально, можешь добавить пагинацию, используя параметры _page и _limit. Например, ?_page=2&_limit=15 покажет вторую страницу по 15 записей.

Почему это лучше, чем делать всё самому?

Некоторые могут спросить: “Зачем мне этот JSONPlaceholder, если я могу создать массив данных прямо в коде?”

На первый взгляд, кажется, что это лишнее. Но на самом деле это критически важно для обучения. Работа с массивом в коде (const posts = [...]) не дает тебе понимания того, как работает асинхронность. Нет статуса loading. Нет шанса получить ошибку сети. Нет различия между успешным ответом и ошибкой 404.

Используя API, ты учишься:

  1. Обрабатывать асинхронность: Понимать, что данные придут не сразу.
  2. Работать с состоянием: Отлично видеть, как меняется UI от “загрузки” до “данные получены” или “ошибка”.
  3. Деплой прототипов: Ты можешь скинуть ссылку на свой半成品 (полуфабрикат) приложения другу или заказчику, и оно будет работать. Если бы данные были захардкожены, тебе пришлось бы показывать код, а не живое приложение.
  4. Тестировать разные HTTP-методы: JSONPlaceholder поддерживает не только GET. Ты можешь попробовать POST, PUT, PATCH и DELETE. Разумеется, данные не сохранятся по-настоящему после перезагрузки страницы, но API вернет тебе успешный ответ, как если бы ты работал с настоящим сервером. Это отличная возможность научиться формить формы для создания и редактирования записей.

Секретные возможности, о которых мало кто знает

Многие пользуются только базовым /posts, но внутри JSONPlaceholder есть скрытые возможности, которые делают его мощнее, чем кажется.

Например, ты можешь сортировать данные. Хочешь увидеть посты в обратном порядке или отфильтровать их по пользователю?

// Получить посты 3-го пользователя
fetch('https://jsonplaceholder.typicode.com/posts?userId=3')

// Отсортировать комментарии по ID (если бы такие параметры поддерживались для сортировки в этом конкретном эндпоинте, но для постов есть(userId) и limit)

Также值得注意的是, что у каждого ресурса есть своя специфичная логика. У albums есть поле title и userId. У todos есть поле completed (true/false). Это позволяет тебе создавать очень разные интерфейсы: списки дел с чекбоксами, галерею фотографий, профиль пользователя с контактами.

Есть еще одна крутая фишка. Ты можешь получить “пустой” объект при создании нового ресурса методом POST. В реальности многие API возвращают созданный объект с присвоенным ему ID. JSONPlaceholder тоже так делает. Ты отправляешь данные, а в ответ получаешь тот же объект, но уже с id: 101.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then(response => response.json())
  .then(json => console.log(json)); // Увидишь, что у ответа появился id: 101

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

Заключение без банальностей

JSONPlaceholder — это не просто “сайт с данными”. Это мостик между написанием кода и созданием настоящих приложений. Это инструмент, который снимает с тебя страх перед бэкендом. Когда ты видишь, что можешь загрузить данные, отобразить их, добавить новые и удалить старые, не поднимая при этом свой сервер, ты получаешь огромную уверенность в своих силах.

Я помню свои первые шаги. Сколько времени я потратил на попытки поднять локальный сервер на Django или Node.js, чтобы просто получить список товаров для учебной задачи. JSONPlaceholder сэкономил мне сотни часов. Он позволил мне сосредоточиться на том, что действительно важно: на том, как писать чистый код на фронтенде, как организовывать компоненты и как управлять состоянием приложения.

Так что не бойся использовать фейковые данные. Это профессиональный инструмент. Лучшее, что ты можешь сделать сейчас — это открыть консоль разработчика в браузере, вбить адрес https://jsonplaceholder.typicode.com/posts/1 и увидеть, как красиво и упорядоченно выглядит информация, доступная каждому, у кого есть интернет. А затем написать первый код, который превратит эти строчки в живую карточку товара или статью в твоем блоге. Удачи в коде!

-- 展开阅读全文 --