Fake REST API для тестирования (JSON)

Опубликовано в Общее • 05 мая 2018 г. • 2 мин. на чтение

REST API может понадобится:

  • При разработке нового проекта
  • При тестировнии нового программного инструмента
  • Когда хочеться пощупать очередной фреймворк
  • Просто нужны json данные

Всегда можно создать массив и читать его или обращаться к какому-нибудь API. Однако есть специальный инструмент, чтобы не искать "что-нибудь".

Fake Rest API (jsonplaceholder)

JSONPlaceholder - Live running version. Можно сделать свой Fake Server, проект доступен на github

Ресурсы

Маршрут
/posts 100 items
/comments 500 items
/albums 100 items
/photos 5000 items
/todos 200 items
/users 10 items

Маршруты

HTTP метод Маршрут
GET /posts
GET /posts/1
GET /posts/1/comments
GET /comments?postId=1
GET /posts?userId=1
POST /posts
PUT /posts/1
PATCH /posts/1
DELETE /posts/1

Например http://jsonplaceholder.typicode.com/posts вернёт

[
  {
    "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": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
  ...

Видео от Traversy Media по работе Fake Server

Альтернативный сервис

Test your front-end against a real API

Запрос

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://reqres.in/api/products/3", true);
xhr.onload = function(){
    console.log(xhr.responseText);
};
xhr.send();

Ответ

{
    "data":{
        "id":3,
        "name":"true red",
        "year":2002,
        "pantone_value":"19-1664"
    }
}

Mock Service Worker

Еще одно интересное решение mswjs.io - перехват запросов на сетевом уровне. Библиотека, которая использует API Service Worker для подмены реальных запросов.

npm install msw --save-dev

Надо самостоятельно создать json и скормить в эту бибилотеку. 

// src/mocks/handlers.js
import { rest } from 'msw'

export const handlers = [
  rest.post('/login', (req, res, ctx) => {
    // Persist user's authentication in the session
    sessionStorage.setItem('is-authenticated', 'true')
    return res(
      // Respond with a 200 status code
      ctx.status(200),
    )
  }),
  rest.get('/user', (req, res, ctx) => {
    // Check if the user is authenticated in this session
    const isAuthenticated = sessionStorage.getItem('is-authenticated')
    if (!isAuthenticated) {
      // If not authenticated, respond with a 403 error
      return res(
        ctx.status(403),
        ctx.json({
          errorMessage: 'Not authorized',
        }),
      )
    }
    // If authenticated, return a mocked user details
    return res(
      ctx.status(200),
      ctx.json({  // вот тут положить json
        username: 'admin',
      }),
    )
  }),
]

Для генерации данных удобно использовать faker.js

Похожие записи