{"id":414085,"date":"2024-06-29T23:32:49","date_gmt":"2024-06-29T23:32:49","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=414085"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=414085","title":{"rendered":"<span>\u041c\u043e\u043a\u0438 \u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0435\u0439 \u043c\u043e\u0440\u043e\u043a\u0438 \u0441 mswjs+faker.js<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0412\u0438\u043a\u0442\u043e\u0440, \u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 Admitad. \u041c\u043e\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0430\u0431\u0438\u043d\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432. \u041d\u0435\u0434\u0430\u0432\u043d\u043e \u044f \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0442\u0438\u043f\u0438\u0447\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439:  \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0438 \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e. \u041d\u043e \u043a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442, \u043d\u0435 \u0438\u043c\u0435\u044f 100% \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442\u043e\u0432 \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435? \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u043b, \u0438 \u0440\u0430\u0437\u0431\u0435\u0440\u0443 \u0438\u0445 \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b.<\/p>\n<h2>\u041e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435<\/h2>\n<p>\u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0441\u043a\u0430\u0437\u0430\u043b \u0432\u044b\u0448\u0435, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u043b\u0430\u0441\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u043e \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435 \u044d\u0442\u043e\u0442 \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442 \u0431\u044b\u043b \u0435\u0449\u0435 \u043d\u0435 \u0433\u043e\u0442\u043e\u0432. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0432\u044b\u0445\u043e\u0434 \u0438\u0437 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 mock-\u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<blockquote>\n<p>Mock-\u043e\u0431\u044a\u0435\u043a\u0442 &#8212; \u0442\u0438\u043f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f (c)\u0412\u0438\u043a\u0438\u043f\u0435\u0434\u0438\u044f<\/p>\n<\/blockquote>\n<h2>\u041a\u0430\u043a \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 mock-\u0434\u0430\u043d\u043d\u044b\u0445?<\/h2>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e.<\/p>\n<h3>\u041f\u0438\u0448\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 node.js<\/h3>\n<p>\u041c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 mock-server \u043d\u0430 node.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0442\u0430\u043a\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u043a\u0430\u043a express \u0438\u043b\u0438 koa.<\/p>\n<p>\u041e\u0441\u043e\u0431\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 node.js. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 <a href=\"https:\/\/expressjs.com\/\" rel=\"noopener noreferrer nofollow\">express<\/a> \u043a\u043e\u0434 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">import express from 'express';  const app = express();  const port = 3000;  app.get('\/', (req, res) => { \u00a0\u00a0res.send('This is Main!'); });  app.listen(port, () => { \u00a0\u00a0console.log(`App listening at http:\/\/localhost:${port}`); });<\/code><\/pre>\n<p>\u041e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/medium.com\/analytics-vidhya\/how-to-setup-node-express-server-to-mock-apis-response-locally-53b4fdb8de97\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>.<\/p>\n<p>\u041a \u043f\u043b\u044e\u0441\u0430\u043c \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u044f \u043e\u0442\u043d\u043e\u0448\u0443 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u043e\u0432 \u043f\u043e \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u0438\u043d\u0443\u0441\u044b, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 API \u0441\u0435\u0440\u0432\u0438\u0441\u044b <\/h3>\n<p>\u0423\u0432\u0435\u0440\u0435\u043d, \u043c\u043d\u043e\u0433\u0438\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u0442\u0430\u043a\u0438\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c \u0433\u043e\u0442\u043e\u0432\u044b\u0445 API, \u043a\u0430\u043a <a href=\"https:\/\/jsonplaceholder.typicode.com\/\" rel=\"noopener noreferrer nofollow\">jsonplaceholder.typicode.com<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0435\u0441\u0442\u044c \u043a\u0430\u043a \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u044d\u043d\u0434\u043d\u043f\u043e\u0439\u043d\u0442\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \/posts, \/comments&#8230;, \u0442\u0430\u043a \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u0438, \u043f\u0440\u0438\u0447\u0435\u043c, \u043b\u0438\u0431\u043e \u0441\u043e\u0437\u0434\u0430\u0432 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b db.json \u0441 \u0444\u0435\u0439\u043a\u043e\u0432\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043b\u0438\u0431\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <a href=\"https:\/\/mockend.com\/\" rel=\"noopener noreferrer nofollow\">Mockend<\/a>. \u0413\u043b\u0430\u0432\u043d\u044b\u0439, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043c\u0438\u043d\u0443\u0441 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u044b.<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Mock Service Worker + Faker<\/h3>\n<p>\u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442\u044b \u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044f \u0443\u0436\u0435 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430, \u043e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0430\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u043a \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430  \u0432\u0441\u0435\u0445 REST-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043d\u0430\u0431\u043e\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0434\u0435\u043b\u0435\u0439.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043d\u0430\u0448\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/mswjs.io\/\" rel=\"noopener noreferrer nofollow\">Mock Service Worker<\/a>(\u0434\u0430\u043b\u0435\u0435 MSW) &#8212; \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0441\u0435\u0442\u0435\u0432\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0438\u0445 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0442\u0432\u0435\u0442\u044b;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/Marak\/Faker.js#readme\" rel=\"noopener noreferrer nofollow\">Faker<\/a> &#8212; \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438;<\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u0441\u0451 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c service worker, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u043c\u0438 \u0444\u044d\u0439\u043a\u043e\u0432\u044b\u0435  \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u043e\u043a\u0430 \u0431\u044d\u043a\u0435\u043d\u0434 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u0430 \u0434\u0432\u0443\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 \u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0441\u0442\u0438\u0441\u044c \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e. \u0410 \u043a\u043e\u0433\u0434\u0430 \u0431\u044d\u043a\u0435\u043d\u0434 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u0431\u0435\u0437 \u0444\u043b\u0430\u0433\u0430, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0449\u0435\u0433\u043e mock-\u0441\u0435\u0440\u0432\u0438\u0441.<\/p>\n<p>\u0414\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 MSW, \u044d\u0442\u043e:<\/p>\n<ul>\n<li>\n<p>request handler &#8212; \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0434\u043e\u043b\u0436\u0435\u043d \u043b\u0438 \u0431\u044b\u0442\u044c \u0437\u0430\u043c\u043e\u043a\u0430\u043d \u0437\u0430\u043f\u0440\u043e\u0441<\/p>\n<\/li>\n<li>\n<p>response resolver &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0430\u044f \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f \u0437\u0430\u043c\u043e\u043a\u0430\u043d\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442<\/p>\n<\/li>\n<\/ul>\n<h4>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/h4>\n<p>MSW \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0434\u0432\u0430 \u043d\u0430\u0431\u043e\u0440\u0430 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 API: rest \u0438 graphql. <\/p>\n<p>\u041c\u0435\u0442\u043e\u0434\u044b rest:<\/p>\n<ul>\n<li>\n<p><code>rest.get()<\/code><\/p>\n<\/li>\n<li>\n<p><code>rest.post()<\/code><\/p>\n<\/li>\n<li>\n<p><code>rest.put()<\/code><\/p>\n<\/li>\n<li>\n<p><code>rest.patch()<\/code><\/p>\n<\/li>\n<li>\n<p><code>rest.delete()<\/code><\/p>\n<\/li>\n<li>\n<p><code>rest.options()<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 URL  \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0430 \u0432\u0442\u043e\u0440\u044b\u043c response resolver.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"javascript\">import { setupWorker, rest } from 'msw'  const worker = setupWorker(   rest.get('\/users\/:userId', (req, res, ctx) => {     const { userId } = req.params      return res(       ctx.json({         id: userId,         firstName: 'John',         lastName: 'Maverick',       }),     )   }), )  worker.start()<\/code><\/pre>\n<h2>\u041f\u0440\u0438\u043c\u0435\u0440<\/h2>\n<p>\u042f \u0441\u043e\u0437\u0434\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c mswjs + faker \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 mock-\u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432  <a href=\"https:\/\/github.com\/shataev\/mswjs-faker-students-list\" rel=\"noopener noreferrer nofollow\"><u>\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/u><\/a>.  \u0424\u0440\u043e\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 React+TypeScript, redux \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441  redux-saga, \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0435\u0439 Sass. \u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0430\u043a\u0430\u044f:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/aca\/d51\/379\/acad513797a78b0b8f3448297ebd7357.png\" width=\"632\" height=\"1246\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/aca\/d51\/379\/acad513797a78b0b8f3448297ebd7357.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u043e\u0439\u0434\u0435\u043c\u0441\u044f \u043f\u043e \u043f\u0430\u043f\u043a\u0430\u043c:<\/p>\n<ul>\n<li>\n<p>\u0432 api \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0432 components \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/p>\n<\/li>\n<li>\n<p>\u0432 mocks \u0432\u0441\u0435, \u0447\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441  mock-\u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c<\/p>\n<\/li>\n<li>\n<p>\u0432 modules \u0432\u044b\u043d\u0435\u0441\u0435\u043d \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c\u044e, \u0432 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e  Students<\/p>\n<\/li>\n<li>\n<p>\u0432 store \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u0441\u0435, \u0447\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"https:\/\/create-react-app.dev\/\" rel=\"noopener noreferrer nofollow\">create-react-app<\/a>:<\/p>\n<pre><code class=\"bash\">npx create-react-app studentList<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b faker \u0438 Mock Service Worker \u043a\u0430\u043a devDependencies:<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 MSW<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c Mock Service Worker \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">npx msw init public\/ --save<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0435 <code>\/public<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0444\u0430\u0439\u043b mockServiceWorker.js \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u0430 \u0434\u043b\u044f mock-\u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b src\/mocks\/browser.js, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">\/\/ src\/mocks\/browser.js  import { setupWorker } from 'msw'; import { handlers } from '.\/handlers';  export const worker = setupWorker(...handlers);<\/code><\/pre>\n<p><em>\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Mock Service Worker \u0432 production \u0441\u0431\u043e\u0440\u043a\u0435 \u043a\u0440\u0430\u0439\u043d\u0435 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f!<\/em><\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f NODE_ENV, \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 src\/index.js:<\/p>\n<pre><code class=\"javascript\">\/\/ src\/index.js  import React from 'react'; import ReactDOM from 'react-dom'; import App from '.\/App';  if (process.env.NODE_ENV === 'development') { \u00a0\u00a0const { worker } = require('.\/mocks\/browser');  \u00a0\u00a0worker.start(); }  ReactDOM.render(&lt;App \/>, document.getElementById('root'));<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b npm start \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u0443\u0432\u0438\u0434\u0438\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 Developer Tools \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e mock-server  \u0437\u0430\u043f\u0443\u0449\u0435\u043d.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2e8\/999\/eec\/2e8999eec24263734f354bc739f753b0.png\" width=\"946\" height=\"142\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2e8\/999\/eec\/2e8999eec24263734f354bc739f753b0.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0417\u043d\u0430\u0447\u0438\u0442 \u0432\u0441\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438.<\/p>\n<h4>\u041f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438<\/h4>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 <a href=\"https:\/\/mswjs.io\/docs\/getting-started\/integrate\/browser\" rel=\"noopener noreferrer nofollow\">\u0432\u0437\u044f\u0442 \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>, \u043d\u043e \u0441 \u043d\u0438\u043c \u0432\u0441\u0435 \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e. \u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b (\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435), \u0432\u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u043e\u0441\u044b\u043f\u044f\u0442\u0441\u044f 404-\u0435 \u043e\u0442\u0432\u0435\u0442\u044b. \u0422\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u0430 &#8212; \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u0430\u0440\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430:<\/p>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/h4>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432 \u044f \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 <code>GET \/students<\/code>. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a:<\/p>\n<pre><code class=\"javascript\">\/\/ \/src\/mocks\/handlers\/students.ts  import {rest} from 'msw';  import { STUDENTS_LIST_ROUTE_MASK } from '..\/mocks.constants'; import {db} from '..\/db'; import { IStudent } from '..\/..\/components\/StudentCard\/StudentCard.types'; export const getStudentsHandler = rest.get(STUDENTS_LIST_ROUTE_MASK, ( req, res, ctx)=>{     \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043c\u043e \u043c\u043e\u0434\u0435\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0448\u0435\u0441\u0442\u0438 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432     \/\/ \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u0432 \u043e\u0442\u0432\u0435\u0442\u0435     let students:IStudent[] = [];     for (let i = 0; i &amp;lt; 6; i += 1) {     students.push(db.student.create()); }  return res(     ctx.json({         students     }) )  })<\/code><\/pre>\n<h4> \u041c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445<\/h4>\n<p>\u0414\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 @mswjs\/data \u0438 faker.\u00a0<\/p>\n<pre><code class=\"javascript\">\/\/ \/src\/mocks\/models\/StudentModel  import { primaryKey } from '@mswjs\/data'; import faker from 'faker';  export const StudentModel = { \u00a0\u00a0\u00a0\u00a0id: primaryKey(() => faker.random.number(10000).toString()), \u00a0\u00a0\u00a0\u00a0firstName: ()=> faker.name.firstName(), \u00a0\u00a0\u00a0\u00a0lastName: () => faker.name.lastName(), \u00a0\u00a0\u00a0\u00a0age: () => faker.datatype.number({min: 18, max: 69}), \u00a0\u00a0\u00a0\u00a0email: () => faker.internet.email(), \u00a0\u00a0\u00a0\u00a0phone: () => faker.phone.phoneNumber(('+7 (###) ###-##-##')), \u00a0\u00a0\u00a0\u00a0city: () => faker.address.cityName(), \u00a0\u00a0\u00a0\u00a0company: () => faker.company.companyName(), \u00a0\u00a0\u00a0\u00a0avatar: () => faker.image.avatar(), \u00a0\u00a0\u00a0\u00a0information: () => faker.lorem.words(10), };<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0436\u0434\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 faker \u0431\u0443\u0434\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u0410\u043f\u0438\u0448\u043a\u0430 \u0444\u0435\u0439\u043a\u0435\u0440\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u043e, \u043d\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0434\u0440\u0443\u0436\u0435\u043b\u044e\u0431\u043d\u044b\u0439 DSL, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0446\u0435\u043f\u043e\u0447\u0435\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u043e\u043b\u0435\u0435 20 (!). \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438:<\/p>\n<p>\u00a0<strong>Image<\/strong><\/p>\n<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.   \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c URL, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0430\u0432\u0430\u0442\u0430\u0440 128&#215;128 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c<\/p>\n<p><code>faker.image.avatar()<\/code><\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c URL, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p><code>https:\/\/cdn.fakercloud.com\/avatars\/eduardostuart_128.jpg<\/code><\/p>\n<p><strong>Company<\/strong><\/p>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0435\u0439, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c: companySuffix, catchPhrase, \u0438\u043b\u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u043b\u0435\u0439, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 companyName.<\/p>\n<p><strong>Internet<\/strong><\/p>\n<p>\u0422\u0443\u0442 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u044b email, url. \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u0441\u0430\u043c\u0438 \u0437\u0430 \u0441\u0435\u0431\u044f.<\/p>\n<p><strong>Datatype<\/strong><\/p>\n<p>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u0443\u044e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0445 \u0442\u0438\u043f\u043e\u0432, \u043a\u0430\u043a:<\/p>\n<ul>\n<li>\n<p>number &#8212; \u0446\u0435\u043b\u044b\u0435 \u0447\u0438\u0441\u043b\u0430, \u043f\u0440\u0435\u0434\u0435\u043b \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u044f\u043c\u0438 min \u0438 max<\/p>\n<\/li>\n<li>\n<p>float &#8212; \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0438\u0441\u043b\u0430<\/p>\n<\/li>\n<li>\n<p>arrayElements &#8212; \u043c\u0430\u0441\u0441\u0438\u0432<\/p>\n<\/li>\n<li>\n<p>\u0438 \u0442.\u0434.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 db.ts \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e factory \u0438\u0437 @mswjs\/data:<\/p>\n<pre><code class=\"javascript\">\/\/ \/src\/mocks\/db.ts  import { factory } from '@mswjs\/data';  import {StudentModel} from '.\/models'  export const db = factory({     student: StudentModel })<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7f1\/f6e\/bea\/7f1f6ebeaedd3a9f08d7553786b056fd.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e faker.js \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 GET \/students\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e faker.js \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 GET \/students\" width=\"602\" height=\"389\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7f1\/f6e\/bea\/7f1f6ebeaedd3a9f08d7553786b056fd.png\"\/><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e faker.js \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 GET \/students<\/figcaption><\/figure>\n<p>\u041f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438\u00a0\u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e\u0442 MSW:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e69\/70b\/eb9\/e6970beb915964938865118001b60d3a.png\" width=\"1600\" height=\"148\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e69\/70b\/eb9\/e6970beb915964938865118001b60d3a.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c\/\u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0449\u0438\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a.<\/p>\n<h2>\u0412\u044b\u0432\u043e\u0434<\/h2>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0438 \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0434\u0435\u043b\u0430\u0435\u0442 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043c\u0435\u043d\u0435\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0439 \u043e\u0442 \u0431\u044d\u043a\u0435\u043d\u0434\u0430. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u043c\u0438 \u0432 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0445\u043e\u0434\u0435 \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0441\u0442\u0430\u043b\u0438:<\/p>\n<ul>\n<li>\n<p>\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430 mock-\u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u043b\u0435\u0433\u043a\u043e\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0438 \u0444\u0435\u0439\u043a\u043e\u0432\u044b\u043c\u0438 \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>\u0431\u044b\u0441\u0442\u0440\u0430\u044f \u0438 \u0433\u0438\u0431\u043a\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043c\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u043e \u0442\u0430\u043a\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 mock-\u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/574792\/\"> https:\/\/habr.com\/ru\/articles\/574792\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0412\u0438\u043a\u0442\u043e\u0440, \u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 Admitad. \u041c\u043e\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0430\u0431\u0438\u043d\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432. \u041d\u0435\u0434\u0430\u0432\u043d\u043e \u044f \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0442\u0438\u043f\u0438\u0447\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439:  \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0438 \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e. \u041d\u043e \u043a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442, \u043d\u0435 \u0438\u043c\u0435\u044f 100% \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442\u043e\u0432 \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435? \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u043b, \u0438 \u0440\u0430\u0437\u0431\u0435\u0440\u0443 \u0438\u0445 \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b.<\/p>\n<h2>\u041e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435<\/h2>\n<p>\u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0441\u043a\u0430\u0437\u0430\u043b \u0432\u044b\u0448\u0435, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u043b\u0430\u0441\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u043e \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435 \u044d\u0442\u043e\u0442 \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442 \u0431\u044b\u043b \u0435\u0449\u0435 \u043d\u0435 \u0433\u043e\u0442\u043e\u0432. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0432\u044b\u0445\u043e\u0434 \u0438\u0437 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 mock-\u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<blockquote>\n<p>Mock-\u043e\u0431\u044a\u0435\u043a\u0442 &#8212; \u0442\u0438\u043f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f (c)\u0412\u0438\u043a\u0438\u043f\u0435\u0434\u0438\u044f<\/p>\n<\/blockquote>\n<h2>\u041a\u0430\u043a \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 mock-\u0434\u0430\u043d\u043d\u044b\u0445?<\/h2>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e.<\/p>\n<h3>\u041f\u0438\u0448\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 node.js<\/h3>\n<p>\u041c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 mock-server \u043d\u0430 node.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0442\u0430\u043a\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u043a\u0430\u043a express \u0438\u043b\u0438 koa.<\/p>\n<p>\u041e\u0441\u043e\u0431\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 node.js. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 <a href=\"https:\/\/expressjs.com\/\" rel=\"noopener noreferrer nofollow\">express<\/a> \u043a\u043e\u0434 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">import express from 'express';  const app = express();  const port = 3000;  app.get('\/', (req, res) => { \u00a0\u00a0res.send('This is Main!'); });  app.listen(port, () => { \u00a0\u00a0console.log(`App listening at http:\/\/localhost:${port}`); });<\/code><\/pre>\n<p>\u041e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/medium.com\/analytics-vidhya\/how-to-setup-node-express-server-to-mock-apis-response-locally-53b4fdb8de97\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>.<\/p>\n<p>\u041a \u043f\u043b\u044e\u0441\u0430\u043c \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u044f \u043e\u0442\u043d\u043e\u0448\u0443 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u043e\u0432 \u043f\u043e \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u0438\u043d\u0443\u0441\u044b, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 API \u0441\u0435\u0440\u0432\u0438\u0441\u044b <\/h3>\n<p>\u0423\u0432\u0435\u0440\u0435\u043d, \u043c\u043d\u043e\u0433\u0438\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u0442\u0430\u043a\u0438\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c \u0433\u043e\u0442\u043e\u0432\u044b\u0445 API, \u043a\u0430\u043a <a href=\"https:\/\/jsonplaceholder.typicode.com\/\" rel=\"noopener noreferrer nofollow\">jsonplaceholder.typicode.com<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0435\u0441\u0442\u044c \u043a\u0430\u043a \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u044d\u043d\u0434\u043d\u043f\u043e\u0439\u043d\u0442\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \/posts, \/comments&#8230;, \u0442\u0430\u043a \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u0438, \u043f\u0440\u0438\u0447\u0435\u043c, \u043b\u0438\u0431\u043e \u0441\u043e\u0437\u0434\u0430\u0432 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b db.json \u0441 \u0444\u0435\u0439\u043a\u043e\u0432\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043b\u0438\u0431\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <a href=\"https:\/\/mockend.com\/\" rel=\"noopener noreferrer nofollow\">Mockend<\/a>. \u0413\u043b\u0430\u0432\u043d\u044b\u0439, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043c\u0438\u043d\u0443\u0441 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u044b.<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Mock Service Worker + Faker<\/h3>\n<p>\u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442\u044b \u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044f \u0443\u0436\u0435 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430, \u043e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0430\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u043a \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430  \u0432\u0441\u0435\u0445 REST-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043d\u0430\u0431\u043e\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0434\u0435\u043b\u0435\u0439.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043d\u0430\u0448\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/mswjs.io\/\" rel=\"noopener noreferrer nofollow\">Mock Service Worker<\/a>(\u0434\u0430\u043b\u0435\u0435 MSW) &#8212; \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0441\u0435\u0442\u0435\u0432\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0438\u0445 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0442\u0432\u0435\u0442\u044b;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/Marak\/Faker.js#readme\" rel=\"noopener noreferrer nofollow\">Faker<\/a> &#8212; \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438;<\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u0441\u0451 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c service worker, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u043c\u0438 \u0444\u044d\u0439\u043a\u043e\u0432\u044b\u0435  \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u043e\u043a\u0430 \u0431\u044d\u043a\u0435\u043d\u0434 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u0430 \u0434\u0432\u0443\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 \u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0441\u0442\u0438\u0441\u044c \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e. \u0410 \u043a\u043e\u0433\u0434\u0430 \u0431\u044d\u043a\u0435\u043d\u0434 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u0431\u0435\u0437 \u0444\u043b\u0430\u0433\u0430, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0449\u0435\u0433\u043e mock-\u0441\u0435\u0440\u0432\u0438\u0441.<\/p>\n<p>\u0414\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 MSW, \u044d\u0442\u043e:<\/p>\n<ul>\n<li>\n<p>request handler &#8212; \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0434\u043e\u043b\u0436\u0435\u043d \u043b\u0438 \u0431\u044b\u0442\u044c \u0437\u0430\u043c\u043e\u043a\u0430\u043d \u0437\u0430\u043f\u0440\u043e\u0441<\/p>\n<\/li>\n<li>\n<p>response resolver &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0430\u044f \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f \u0437\u0430\u043c\u043e\u043a\u0430\u043d\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442<\/p>\n<\/li>\n<\/ul>\n<h4>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/h4>\n<p>MSW \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0434\u0432\u0430 \u043d\u0430\u0431\u043e\u0440\u0430 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 API: rest \u0438 graphql. <\/p>\n<p>\u041c\u0435\u0442\u043e\u0434\u044b rest:<\/p>\n<ul>\n<li>\n<p><code>rest.get()<\/code><\/p>\n<\/li>\n<li>\n<p><code>rest.post()<\/code><\/p>\n<\/li>\n<li>\n<p><code>rest.put()<\/code><\/p>\n<\/li>\n<li>\n<p><code>rest.patch()<\/code><\/p>\n<\/li>\n<li>\n<p><code>rest.delete()<\/code><\/p>\n<\/li>\n<li>\n<p><code>rest.options()<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 URL  \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0430 \u0432\u0442\u043e\u0440\u044b\u043c response resolver.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"javascript\">import { setupWorker, rest } from 'msw'  const worker = setupWorker(   rest.get('\/users\/:userId', (req, res, ctx) => {     const { userId } = req.params      return res(       ctx.json({         id: userId,         firstName: 'John',         lastName: 'Maverick',       }),     )   }), )  worker.start()<\/code><\/pre>\n<h2>\u041f\u0440\u0438\u043c\u0435\u0440<\/h2>\n<p>\u042f \u0441\u043e\u0437\u0434\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c mswjs + faker \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 mock-\u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432  <a href=\"https:\/\/github.com\/shataev\/mswjs-faker-students-list\" rel=\"noopener noreferrer nofollow\"><u>\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/u><\/a>.  \u0424\u0440\u043e\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 React+TypeScript, redux \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441  redux-saga, \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0435\u0439 Sass. \u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0430\u043a\u0430\u044f:<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u043e\u0439\u0434\u0435\u043c\u0441\u044f \u043f\u043e \u043f\u0430\u043f\u043a\u0430\u043c:<\/p>\n<ul>\n<li>\n<p>\u0432 api \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0432 components \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/p>\n<\/li>\n<li>\n<p>\u0432 mocks \u0432\u0441\u0435, \u0447\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441  mock-\u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c<\/p>\n<\/li>\n<li>\n<p>\u0432 modules \u0432\u044b\u043d\u0435\u0441\u0435\u043d \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c\u044e, \u0432 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e  Students<\/p>\n<\/li>\n<li>\n<p>\u0432 store \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u0441\u0435, \u0447\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"https:\/\/create-react-app.dev\/\" rel=\"noopener noreferrer nofollow\">create-react-app<\/a>:<\/p>\n<pre><code class=\"bash\">npx create-react-app studentList<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b faker \u0438 Mock Service Worker \u043a\u0430\u043a devDependencies:<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 MSW<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c Mock Service Worker \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">npx msw init public\/ --save<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0435 <code>\/public<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0444\u0430\u0439\u043b mockServiceWorker.js \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u0430 \u0434\u043b\u044f mock-\u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b src\/mocks\/browser.js, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">\/\/ src\/mocks\/browser.js  import { setupWorker } from 'msw'; import { handlers } from '.\/handlers';  export const worker = setupWorker(...handlers);<\/code><\/pre>\n<p><em>\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Mock Service Worker \u0432 production \u0441\u0431\u043e\u0440\u043a\u0435 \u043a\u0440\u0430\u0439\u043d\u0435 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f!<\/em><\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f NODE_ENV, \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 src\/index.js:<\/p>\n<pre><code class=\"javascript\">\/\/ src\/index.js  import React from 'react'; import ReactDOM from 'react-dom'; import App from '.\/App';  if (process.env.NODE_ENV === 'development') { \u00a0\u00a0const { worker } = require('.\/mocks\/browser');  \u00a0\u00a0worker.start(); }  ReactDOM.render(&lt;App \/>, document.getElementById('root'));<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b npm start \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u0443\u0432\u0438\u0434\u0438\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 Developer Tools \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e mock-server  \u0437\u0430\u043f\u0443\u0449\u0435\u043d.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0417\u043d\u0430\u0447\u0438\u0442 \u0432\u0441\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438.<\/p>\n<h4>\u041f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438<\/h4>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 <a href=\"https:\/\/mswjs.io\/docs\/getting-started\/integrate\/browser\" rel=\"noopener noreferrer nofollow\">\u0432\u0437\u044f\u0442 \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>, \u043d\u043e \u0441 \u043d\u0438\u043c \u0432\u0441\u0435 \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e. \u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b (\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435), \u0432\u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u043e\u0441\u044b\u043f\u044f\u0442\u0441\u044f 404-\u0435 \u043e\u0442\u0432\u0435\u0442\u044b. \u0422\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u0430 &#8212; \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u0430\u0440\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430:<\/p>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/h4>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432 \u044f \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 <code>GET \/students<\/code>. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a:<\/p>\n<pre><code class=\"javascript\">\/\/ \/src\/mocks\/handlers\/students.ts  import {rest} from 'msw';  import { STUDENTS_LIST_ROUTE_MASK } from '..\/mocks.constants'; import {db} from '..\/db'; import { IStudent } from '..\/..\/components\/StudentCard\/StudentCard.types'; export const getStudentsHandler = rest.get(STUDENTS_LIST_ROUTE_MASK, ( req, res, ctx)=>{     \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043c\u043e \u043c\u043e\u0434\u0435\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0448\u0435\u0441\u0442\u0438 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432     \/\/ \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u0432 \u043e\u0442\u0432\u0435\u0442\u0435     let students:IStudent[] = [];     for (let i = 0; i &amp;lt; 6; i += 1) {     students.push(db.student.create()); }  return res(     ctx.json({         students     }) )  })<\/code><\/pre>\n<h4> \u041c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445<\/h4>\n<p>\u0414\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 @mswjs\/data \u0438 faker.\u00a0<\/p>\n<pre><code class=\"javascript\">\/\/ \/src\/mocks\/models\/StudentModel  import { primaryKey } from '@mswjs\/data'; import faker from 'faker';  export const StudentModel = { \u00a0\u00a0\u00a0\u00a0id: primaryKey(() => faker.random.number(10000).toString()), \u00a0\u00a0\u00a0\u00a0firstName: ()=> faker.name.firstName(), \u00a0\u00a0\u00a0\u00a0lastName: () => faker.name.lastName(), \u00a0\u00a0\u00a0\u00a0age: () => faker.datatype.number({min: 18, max: 69}), \u00a0\u00a0\u00a0\u00a0email: () => faker.internet.email(), \u00a0\u00a0\u00a0\u00a0phone: () => faker.phone.phoneNumber(('+7 (###) ###-##-##')), \u00a0\u00a0\u00a0\u00a0city: () => faker.address.cityName(), \u00a0\u00a0\u00a0\u00a0company: () => faker.company.companyName(), \u00a0\u00a0\u00a0\u00a0avatar: () => faker.image.avatar(), \u00a0\u00a0\u00a0\u00a0information: () => faker.lorem.words(10), };<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0436\u0434\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 faker \u0431\u0443\u0434\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u0410\u043f\u0438\u0448\u043a\u0430 \u0444\u0435\u0439\u043a\u0435\u0440\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u043e, \u043d\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0434\u0440\u0443\u0436\u0435\u043b\u044e\u0431\u043d\u044b\u0439 DSL, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0446\u0435\u043f\u043e\u0447\u0435\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u043e\u043b\u0435\u0435 20 (!). \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438:<\/p>\n<p>\u00a0<strong>Image<\/strong><\/p>\n<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.   \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c URL, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0430\u0432\u0430\u0442\u0430\u0440 128&#215;128 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c<\/p>\n<p><code>faker.image.avatar()<\/code><\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c URL, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p><code>https:\/\/cdn.fakercloud.com\/avatars\/eduardostuart_128.jpg<\/code><\/p>\n<p><strong>Company<\/strong><\/p>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0435\u0439, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c: companySuffix, catchPhrase, \u0438\u043b\u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u043b\u0435\u0439, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 companyName.<\/p>\n<p><strong>Internet<\/strong><\/p>\n<p>\u0422\u0443\u0442 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u044b email, url. \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u0441\u0430\u043c\u0438 \u0437\u0430 \u0441\u0435\u0431\u044f.<\/p>\n<p><strong>Datatype<\/strong><\/p>\n<p>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u0443\u044e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0445 \u0442\u0438\u043f\u043e\u0432, \u043a\u0430\u043a:<\/p>\n<ul>\n<li>\n<p>number &#8212; \u0446\u0435\u043b\u044b\u0435 \u0447\u0438\u0441\u043b\u0430, \u043f\u0440\u0435\u0434\u0435\u043b \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u044f\u043c\u0438 min \u0438 max<\/p>\n<\/li>\n<li>\n<p>float &#8212; \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0438\u0441\u043b\u0430<\/p>\n<\/li>\n<li>\n<p>arrayElements &#8212; \u043c\u0430\u0441\u0441\u0438\u0432<\/p>\n<\/li>\n<li>\n<p>\u0438 \u0442.\u0434.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 db.ts \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e factory \u0438\u0437 @mswjs\/data:<\/p>\n<pre><code class=\"javascript\">\/\/ \/src\/mocks\/db.ts  import { factory } from '@mswjs\/data';  import {StudentModel} from '.\/models'  export const db = factory({     student: StudentModel })<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u043e\u0432:<\/p>\n<figure class=\"\"><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e faker.js \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 GET \/students<\/figcaption><\/figure>\n<p>\u041f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438\u00a0\u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e\u0442 MSW:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c\/\u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0449\u0438\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a.<\/p>\n<h2>\u0412\u044b\u0432\u043e\u0434<\/h2>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0438 \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0434\u0435\u043b\u0430\u0435\u0442 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043c\u0435\u043d\u0435\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0439 \u043e\u0442 \u0431\u044d\u043a\u0435\u043d\u0434\u0430. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u043c\u0438 \u0432 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0445\u043e\u0434\u0435 \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0441\u0442\u0430\u043b\u0438:<\/p>\n<ul>\n<li>\n<p>\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430 mock-\u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u043b\u0435\u0433\u043a\u043e\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0438 \u0444\u0435\u0439\u043a\u043e\u0432\u044b\u043c\u0438 \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>\u0431\u044b\u0441\u0442\u0440\u0430\u044f \u0438 \u0433\u0438\u0431\u043a\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043c\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u043e \u0442\u0430\u043a\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 mock-\u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/574792\/\"> https:\/\/habr.com\/ru\/articles\/574792\/<\/a><br \/><\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-414085","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/414085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=414085"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/414085\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=414085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=414085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=414085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}