{"id":467237,"date":"2025-07-17T03:00:21","date_gmt":"2025-07-17T03:00:21","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=467237"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=467237","title":{"rendered":"<span>Frontend \u0438 OpenAPI: \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 API \u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e MSW<\/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>\u0412\u00a0\u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0432\u00a0\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 frontend\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u044b \u0438\u043d\u043e\u0433\u0434\u0430 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0441\u00a0\u043e\u0434\u043d\u043e\u0439 \u0438\u0437\u00a0\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439 (\u0438\u043b\u0438 \u0441\u00a0\u043e\u0431\u0435\u0438\u043c\u0438 \u0441\u0440\u0430\u0437\u0443):<\/p>\n<ol>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u044a\u0435\u043c\u043d\u0443\u044e \u0438 \u0447\u0430\u0441\u0442\u043e \u043c\u0435\u043d\u044f\u044e\u0449\u0443\u044e\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e API. \u0422\u0443\u0442 \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430 \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u00a0\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u043c \u0437\u0430\u00a0\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0439 \u043a\u00a0\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442\u0430\u043c, \u043d\u043e\u00a0\u0441\u0430\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0435\u00a0\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u043e\u00a0\u043a\u0430\u043a\u0438\u043c\u2011\u043b\u0438\u0431\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c. \u042d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0432\u00a0\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 mock\u2011\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u00a0\u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0438 \u043e\u00a0\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 OpenAPI, \u0438 \u043e\u00a0\u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<p>\u0427\u0442\u043e\u00a0\u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p>\u043d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442 API \u0434\u043b\u044f\u00a0Axios \u0438 TypeScript \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430\u00a0\u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c Mock Service Worker (MSW) \u0434\u043b\u044f\u00a0\u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441\u00a0\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 Faker \u0438 Source \u0434\u043b\u044f\u00a0\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e<\/h3>\n<p>\u0414\u043b\u044f\u00a0\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0434\u0445\u043e\u0434 \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043e\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c \u043d\u0438\u0436\u0435, \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f.<\/p>\n<ol>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432\u043e\u0440\u043a\u0435\u0440\u043e\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0435\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u00a0\u043a\u0430\u043a\u0438\u043c\u2011\u043b\u0438\u0431\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c \u043d\u0435\u00a0\u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d. \u042d\u0442\u043e \u043c\u043e\u0433\u0443\u0442\u00a0\u0431\u044b\u0442\u044c \u0441\u0431\u043e\u0438 \u0432\u00a0\u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u0435\u0442\u0438, \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u043b\u0438\u00a0\u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u043e\u00a0\u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0444\u0438\u043b\u0430\u043a\u0442\u0438\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0411\u044b\u0432\u0430\u044e\u0442 \u043a\u0435\u0439\u0441\u044b, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c, \u043d\u043e\u00a0\u043d\u043e\u0432\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0435\u0449\u0435 \u043d\u0435\u00a0\u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442 \u043d\u0430\u00a0\u0441\u0442\u0435\u043d\u0434\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430\u00a0\u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u044c, \u0430\u00a0\u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e \u043d\u0435\u00a0\u0445\u0432\u0430\u0442\u0430\u0435\u0442. \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u043d\u043e\u00a0\u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043b\u0438\u0442\u044c\u0441\u044f \u0432\u00a0\u043d\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u0440\u0430\u0442\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0442\u0435\u0441\u0442\u043e\u0432 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u043e\u0449\u0435 \u043e\u043f\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u00a0\u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u00a0\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/storybook.js.org\/\">Storybook<\/a>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0418 \u044d\u0442\u043e \u043d\u0435\u00a0\u0432\u0441\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438. \u0412\u00a0\u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432, \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043a\u0430\u043a\u043e\u0439\u2011\u043d\u0438\u0431\u0443\u0434\u044c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442 \u0434\u043b\u044f\u00a0\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0430\u0448\u0435\u0439 \u0442\u0435\u043e\u0440\u0438\u0438, \u0430\u00a0\u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 API \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442\u00a0\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0434\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e backend. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u0432\u00a0\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e.<\/p>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u00a0\u043d\u0430\u0448\u0435\u0439 \u043c\u0430\u0448\u0438\u043d\u0435 \u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432\u00a0\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0435\u043c\u044b \u0438\u0437\u00a0\u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u043e\u0433\u0443\u0442\u00a0\u0431\u044b\u0442\u044c \u043d\u0435\u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b, \u0442\u0430\u043a \u0447\u0442\u043e\u00a0\u0432\u0441\u0435 \u0441\u0438\u0442\u0443\u0430\u0442\u0438\u0432\u043d\u043e.<\/p>\n<\/blockquote>\n<h3>\u041f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/h3>\n<p>\u0412\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 <a href=\"https:\/\/vuejs.org\/\">Vue 3<\/a>, \u0438\u0437\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0443\u0434\u0430\u043b\u0438\u043c \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u0440\u043e\u043c\u0435 <code>App.vue<\/code>. \u0412\u0441\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u0432\u00a0\u0441\u043b\u0435\u0433\u043a\u0430 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0434\u043b\u044f\u00a0\u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438. \u0420\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0435\u00a0\u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0412\u00a0\u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445\u00a0\u0436\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u00a0\u043f\u0440\u0438\u043d\u044f\u0442\u043e\u0439 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0438 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438, \u0438 \u0435\u0441\u043b\u0438 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e\u2011\u0442\u043e \u0443\u00a0\u0441\u0435\u0431\u044f \u043d\u0430\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u043d\u0435\u00a0\u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0443\u0442\u0438 \u043a\u00a0\u0444\u0430\u0439\u043b\u0430\u043c.<\/p>\n<blockquote>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432\u00a0\u0441\u0442\u0430\u0442\u044c\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c\u0438. \u042f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e \u0438\u0445 \u043d\u0430\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 Vue \u0438 React, \u0430\u00a0\u043a\u043b\u0438\u0435\u043d\u0442 \u043d\u0443\u0436\u0435\u043d \u043d\u0435\u00a0\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u00a0Axios, \u043d\u043e\u00a0\u0438\u043d\u043e\u0433\u0434\u0430 \u0438 \u043f\u043e\u0434\u00a0\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 <code>fetch<\/code>. \u041f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u043d\u0435\u00a0\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f.<\/p>\n<\/blockquote>\n<p>\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0441\u00a0\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0438 \u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 CRUD \u0434\u043b\u044f\u00a0\u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0430 \u0432\u00a0\u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e\u00a0\u0434\u043b\u044f\u00a0\u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437\u00a0\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c, \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u043e\u0439 (\u0430 \u0434\u043b\u044f\u00a0\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u0440\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u0438 \u0432\u00a0\u0444\u043e\u0440\u043c\u0430\u0442\u0435 YAML). \u0424\u0430\u0439\u043b <em>spec.json<\/em> \u043c\u044b \u043f\u043e\u043b\u043e\u0436\u0438\u043c \u0432\u00a0\u043f\u0430\u043f\u043a\u0443 <em>openapi<\/em> \u0432\u00a0\u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"json\">{   \"openapi\": \"3.0.4\",   \"info\": {     \"title\": \"User Management Service\",     \"version\": \"v1\"   },   \"servers\": [     {       \"url\": \"https:\/\/127.0.0.1:20000\/api\"     }   ],   \"paths\": {     \"\/v1\/users\": {       \"get\": {         \"tags\": [\"Users\"],         \"operationId\": \"getAllUsers\",         \"summary\": \"\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439\",         \"responses\": {           \"200\": {             \"description\": \"\u0421\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439\",             \"content\": {               \"application\/json\": {                 \"schema\": {                   \"type\": \"array\",                   \"items\": {                     \"$ref\": \"#\/components\/schemas\/User\"                   }                 }               }             }           },           \"401\": {             \"$ref\": \"#\/components\/responses\/401\"           },           \"403\": {             \"$ref\": \"#\/components\/responses\/403\"           },           \"404\": {             \"$ref\": \"#\/components\/responses\/404\"           }         }       },       \"post\": {         \"tags\": [\"Users\"],         \"operationId\": \"createUser\",         \"summary\": \"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\",         \"requestBody\": {           \"content\": {             \"application\/json\": {               \"schema\": {                 \"$ref\": \"#\/components\/schemas\/UserRequest\"               }             }           }         },         \"responses\": {           \"201\": {             \"$ref\": \"#\/components\/responses\/201\"           },           \"401\": {             \"$ref\": \"#\/components\/responses\/401\"           },           \"403\": {             \"$ref\": \"#\/components\/responses\/403\"           },           \"404\": {             \"$ref\": \"#\/components\/responses\/404\"           }         }       }     },     \"\/v1\/users\/{id}\": {       \"get\": {         \"tags\": [\"Users\"],         \"operationId\": \"getUser\",         \"summary\": \"\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\",         \"parameters\": [           {             \"$ref\": \"#\/components\/parameters\/Id\"           }         ],         \"responses\": {           \"200\": {             \"$ref\": \"#\/components\/responses\/200\"           },           \"401\": {             \"$ref\": \"#\/components\/responses\/401\"           },           \"403\": {             \"$ref\": \"#\/components\/responses\/403\"           },           \"404\": {             \"$ref\": \"#\/components\/responses\/404\"           }         }       },       \"put\": {         \"tags\": [\"Users\"],         \"operationId\": \"updateUser\",         \"summary\": \"\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\",         \"parameters\": [           {             \"$ref\": \"#\/components\/parameters\/Id\"           }         ],         \"requestBody\": {           \"content\": {             \"application\/json\": {               \"schema\": {                 \"$ref\": \"#\/components\/schemas\/UserRequest\"               }             }           }         },         \"responses\": {           \"200\": {             \"$ref\": \"#\/components\/responses\/200\"           },           \"401\": {             \"$ref\": \"#\/components\/responses\/401\"           },           \"403\": {             \"$ref\": \"#\/components\/responses\/403\"           },           \"404\": {             \"$ref\": \"#\/components\/responses\/404\"           }         }       },       \"delete\": {         \"tags\": [\"Users\"],         \"operationId\": \"deleteUser\",         \"summary\": \"\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\",         \"parameters\": [           {             \"$ref\": \"#\/components\/parameters\/Id\"           }         ],         \"responses\": {           \"204\": {             \"description\": \"\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0434\u0430\u043b\u0435\u043d\"           },           \"401\": {             \"$ref\": \"#\/components\/responses\/401\"           },           \"403\": {             \"$ref\": \"#\/components\/responses\/403\"           },           \"404\": {             \"$ref\": \"#\/components\/responses\/404\"           }         }       }     }   },   \"tags\": [     {       \"name\": \"Users\",       \"description\": \"\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439\"     }   ],   \"components\": {     \"parameters\": {       \"Id\": {         \"name\": \"id\",         \"in\": \"path\",         \"required\": true,         \"schema\": {           \"$ref\": \"#\/components\/schemas\/Id\"         }       }     },     \"schemas\": {       \"Id\": {         \"type\": \"string\",         \"description\": \"\u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\"       },       \"User\": {         \"type\": \"object\",         \"required\": [\"userId\", \"login\", \"status\"],         \"properties\": {           \"userId\": {             \"type\": \"string\",             \"description\": \"\u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\"           },           \"login\": {             \"type\": \"string\",             \"description\": \"\u041b\u043e\u0433\u0438\u043d\"           },           \"firstName\": {             \"type\": \"string\",             \"description\": \"\u0418\u043c\u044f\"           },           \"lastName\": {             \"type\": \"string\",             \"description\": \"\u0424\u0430\u043c\u0438\u043b\u0438\u044f\"           },           \"age\": {             \"type\": \"integer\",             \"format\": \"int32\",             \"minimum\": 0,             \"description\": \"\u0412\u043e\u0437\u0440\u0430\u0441\u0442\"           },           \"status\": {             \"type\": \"string\",             \"enum\": [\"active\", \"blocked\"]           }         }       },       \"UserRequest\": {         \"type\": \"object\",         \"required\": [\"login\"],         \"properties\": {           \"login\": {             \"type\": \"string\",             \"description\": \"\u041b\u043e\u0433\u0438\u043d\"           },           \"firstName\": {             \"type\": \"string\",             \"description\": \"\u0418\u043c\u044f\"           },           \"lastName\": {             \"type\": \"string\",             \"description\": \"\u0424\u0430\u043c\u0438\u043b\u0438\u044f\"           },           \"age\": {             \"type\": \"integer\",             \"minimum\": 0,             \"description\": \"\u0412\u043e\u0437\u0440\u0430\u0441\u0442\"           }         }       }     },     \"responses\": {       \"200\": {         \"description\": \"\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\",         \"content\": {           \"application\/json\": {             \"schema\": {               \"$ref\": \"#\/components\/schemas\/User\"             }           }         }       },       \"201\": {         \"$ref\": \"#\/components\/responses\/200\"       },       \"401\": {         \"description\": \"Unauthorized\"       },       \"403\": {         \"description\": \"Forbidden\"       },       \"404\": {         \"description\": \"Not Found\"       }     }   } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0412\u00a0\u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430\u00a0\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b.<\/p>\n<h3>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/h3>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 OpenAPI Generator<\/h4>\n<p>\u0414\u043b\u044f\u00a0\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c OpenAPI Generator CLI. \u0423\u00a0\u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438. \u0415\u0441\u043b\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0438 \u0432\u00a0\u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e. \u041c\u044b\u00a0\u0436\u0435 \u043f\u043e\u0439\u0434\u0435\u043c \u043f\u043e\u00a0\u0441\u0430\u043c\u043e\u043c\u0443 \u043f\u0440\u043e\u0441\u0442\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0430\u043a\u0435\u0442 \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u0430\u043a\u00a0dev \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c:<\/p>\n<pre><code class=\"bash\">npm i @openapitools\/openapi-generator-cli -D<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 \u0432\u00a0\u0440\u0430\u0437\u0434\u0435\u043b <code>scripts<\/code> \u0432 <em>package.json<\/em>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"json\">\"generate-api\": \"openapi-generator-cli generate -i openapi\/spec.json -g typescript-axios -o src\/api\/api\"<\/code><\/pre>\n<h4>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430<\/h4>\n<p>\u0414\u043b\u044f\u00a0\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043a\u00a0\u0440\u0430\u0431\u043e\u0442\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438\u0437\u00a0\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">npx openapi-generator-cli generate -i openapi\/spec.json -g typescript-axios -o src\/api\/api<\/code><\/pre>\n<p>\u041c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0442\u0440\u0435\u043c\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043e\u043f\u0446\u0438\u044f\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>generate<\/code>:<\/p>\n<ul>\n<li>\n<p><code>-i<\/code> (\u0438\u043b\u0438 <code>--input-spec<\/code>)\u00a0\u2014 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u0448 \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p><code>-g<\/code> (\u0438\u043b\u0438 <code>--generator-name<\/code>)\u00a0\u2014 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0432\u00a0\u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 <code>typescript-axios<\/code> (\u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u043e\u0447\u0435\u043c\u0443);<\/p>\n<\/li>\n<li>\n<p><code>-o<\/code> (\u0438\u043b\u0438 <code>--output<\/code>)\u00a0\u2014 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0430\u043f\u043a\u0443, \u043a\u0443\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u00a0\u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0444\u0430\u0439\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 <em>openapitools.json<\/em> \u0432\u00a0\u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043f\u0430\u043f\u043a\u0443 \u0441\u00a0\u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043f\u043e\u00a0\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438. \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0430\u043f\u043a\u0438 \u043a\u0440\u0430\u0439\u043d\u0435 \u043d\u0435\u00a0\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u041f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0442\u0440\u0435\u0442 \u044d\u0442\u0438 \u043f\u0440\u0430\u0432\u043a\u0438.<\/p>\n<blockquote>\n<p>\u0412\u00a0Windows 10\u00a0\u0432\u00a0\u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c\u0441\u044f \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0439 \u0441\u00a0Java Runtime, \u0430\u00a0\u043f\u0430\u043f\u043a\u0430 \u0441\u00a0\u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c \u043d\u0435\u00a0\u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f. \u0412\u00a0\u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u0432\u00a0\u0444\u0430\u0439\u043b\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u043d\u0438\u0437\u0438\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430 \u0434\u043e 6.6.0\u00a0\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0435\u0449\u0435 \u0440\u0430\u0437. \u041f\u0440\u0430\u0432\u0434\u0430 \u0432\u00a0\u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u00a0\u0432\u0435\u0440\u0441\u0438\u044f\u0445 OpenAPI \u0432\u044b\u0448\u0435 3.0.4\u00a0\u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f&#8230; \u042f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0447\u0435\u0440\u043e\u0432, \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044f\u0441\u044c \u0441\u00a0\u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439, \u043d\u043e\u00a0\u0442\u0430\u043a \u043d\u0438 \u043a\u00a0\u0447\u0435\u043c\u0443 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0438 \u043d\u0435\u00a0\u043f\u0440\u0438\u0448\u0435\u043b. \u0415\u0441\u043b\u0438 \u0443\u00a0\u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u00a0\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p>\n<\/blockquote>\n<p>\u041f\u0440\u0438\u00a0\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0430\u043f\u043a\u0438 \u043a\u0430\u043a\u00a0\u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f\u00a0\u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043a\u00a0\u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0432\u00a0\u0432\u0438\u0434\u0435 \u043f\u0430\u043a\u0435\u0442\u0430 npm \u0432\u043e\u00a0\u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0440\u0435\u0435\u0441\u0442\u0440, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u00a0Nexus \u0438\u043b\u0438\u00a0Verdaccio.<\/p>\n<blockquote>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043d\u0430\u00a0\u043e\u0434\u043d\u043e\u043c \u0438\u0437\u00a0\u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0430\u043f\u043e\u0432 \u0432\u00a0GitLab CI, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 (\u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043a\u0430\u043a\u00a0\u043d\u0430\u00a0\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u0436\u0435):<\/p>\n<ul>\n<li>\n<p>\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439 \u0432\u00a0package.json;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0432\u00a0Nexus \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0432\u00a0\u0447\u0430\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043e\u00a0\u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u0432\u00a0\u0440\u0435\u0435\u0441\u0442\u0440\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a \u043c\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u044e \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438 \u0438 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b\u0438 \u0441\u0440\u043e\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043d\u0430\u00a0\u0441\u0442\u043e\u0440\u043e\u043d\u0435 frontend.<\/p>\n<\/blockquote>\n<figure class=\"bordered full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/82a\/1f4\/d0c\/82a1f4d0c046d7010dee678586d8c744.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043e\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0434\u043e \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u0430\u043a\u0435\u0442\u0430 \u0432 \u0440\u0435\u0435\u0441\u0442\u0440 npm\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043e\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0434\u043e \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u0430\u043a\u0435\u0442\u0430 \u0432 \u0440\u0435\u0435\u0441\u0442\u0440 npm\" width=\"765\" height=\"165\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/82a\/1f4\/d0c\/82a1f4d0c046d7010dee678586d8c744.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/82a\/1f4\/d0c\/82a1f4d0c046d7010dee678586d8c744.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043e\u0442\u00a0\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0434\u043e\u00a0\u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u0430\u043a\u0435\u0442\u0430 \u0432\u00a0\u0440\u0435\u0435\u0441\u0442\u0440 npm<\/figcaption><\/div>\n<\/figure>\n<h3>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/h3>\n<h4>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Axios<\/h4>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c Axios \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442:<\/p>\n<pre><code class=\"bash\">npm i axios<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443\u00a0\u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0435, \u0447\u0442\u043e\u0431\u044b \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442 \u0441\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c. \u0414\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0444\u0430\u0439\u043b <em>src\/api\/index.ts<\/em>:<\/p>\n<pre><code class=\"typescript\">\/\/ src\/api\/index.ts import axios, { AxiosError, isAxiosError } from 'axios' import { UsersApi } from '.\/api'  const axiosInstance = axios.create()  axiosInstance.interceptors.request.use((config) =&gt; {   const token = 'SOME_BEARER_TOKEN'    if (token) {     config.headers['Authorization'] = `Bearer ${token}`   }    return config })  axiosInstance.interceptors.response.use(undefined, (error: AxiosError) =&gt; {   if (!isAxiosError(error)) {     return   }    if (error.response?.status === 401) {     console.warn('401 Unauthorized')   }    return Promise.reject(error) })  export const usersApi = new UsersApi(undefined, 'https:\/\/127.0.0.1:20000\/api', axiosInstance)<\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u0447\u0442\u043e\u00a0\u0442\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0438 \u043f\u0440\u0438\u00a0\u0447\u0435\u043c \u0442\u0443\u0442 Axios.<\/p>\n<p>\u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 <code>typescript-axios<\/code> \u0432\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430? \u0412\u00a0\u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0434\u043b\u044f\u00a0\u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0435\u0433\u0430 \u0438\u0437\u00a0\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u0440\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430:<\/p>\n<ul>\n<li>\n<p>\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0443\u044e \u0432\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0437\u0430\u00a0\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p>\u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0443\u0442\u044c \u0434\u043b\u044f\u00a0\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u0438\u043d\u0441\u0442\u0430\u043d\u0441 Axios, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u043e\u0434\u00a0\u043d\u0430\u0448\u0438 \u043d\u0443\u0436\u0434\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043c\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0441\u0435\u043f\u0442\u043e\u0440\u044b, \u043e\u0434\u0438\u043d \u0438\u0437\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a <code>Authorization<\/code> \u0432\u043e\u00a0\u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0430\u00a0\u0434\u0440\u0443\u0433\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u00a0\u043e\u0448\u0438\u0431\u043a\u0443 401. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0432\u00a0\u0438\u043d\u0442\u0435\u0440\u0441\u0435\u043f\u0442\u043e\u0440\u044b \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0447\u0435\u043d\u044c \u0433\u0438\u0431\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0435\u0430\u043a\u0446\u0438\u0435\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u00a0\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u043e\u0434\u044b \u043e\u0448\u0438\u0431\u043e\u043a, \u0431\u0435\u0437\u00a0\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0442\u043e\u0447\u0435\u0447\u043d\u043e \u043f\u0440\u0438\u00a0\u043a\u0430\u0436\u0434\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<p>\u0412\u00a0\u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u0438\u043d \u0442\u0435\u0433 <code>Users<\/code> \u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043e\u0434\u0438\u043d \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 <code>UsersApi<\/code>. \u0412\u00a0\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435 <code>usersApi<\/code> \u0435\u0441\u0442\u044c \u043f\u044f\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437\u00a0\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0432\u00a0\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0435 \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442\u043e\u0432: \u0447\u0435\u0442\u044b\u0440\u0435\u00a0\u2014 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f CRUD \u0441\u00a0\u0443\u0447\u0435\u0442\u043d\u044b\u043c\u0438 \u0437\u0430\u043f\u0438\u0441\u044f\u043c\u0438, \u0438 \u043f\u044f\u0442\u044b\u0439\u00a0\u2014 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0432\u00a0\u0432\u0438\u0434\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u00a0\u043c\u0435\u0442\u043e\u0434 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u0442\u0435\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u00a0\u2014 \u0432\u00a0\u0432\u0438\u0434\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u0415\u0441\u0442\u044c \u0435\u0449\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439, \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439, \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440. \u041e\u00a0\u0435\u0433\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u043e\u0437\u0436\u0435, \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u0439\u0434\u0435\u043c \u0434\u043e\u00a0\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Source.<\/p>\n<h4>TypeScript<\/h4>\n<p>\u041c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d\u00a0\u0431\u044b\u043b Axios. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u00a0TypeScript. \u0412\u00a0\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0435 \u0432\u00a0\u0440\u0430\u0437\u0434\u0435\u043b\u0435 <code>components<\/code> \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0441\u0445\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 <code>$ref<\/code> \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u00a0\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u0445 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u0445\u0435\u043c\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f \u0432\u00a0\u0442\u0435\u043b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u043b\u0438\u00a0\u0432\u00a0\u043e\u0442\u0432\u0435\u0442\u0435,\u00a0\u2014 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432\u00a0\u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e\u00a0\u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e\u00a0\u043d\u0430\u043c \u0432\u0435\u0440\u043d\u0435\u0442 \u0442\u043e\u0442 \u0438\u043b\u0438\u00a0\u0438\u043d\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u0438\u043b\u0438\u00a0\u043a\u0430\u043a\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u043e\u0442\u00a0\u043d\u0430\u0441.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u0432\u00a0\u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c. \u0412\u00a0\u0444\u0430\u0439\u043b\u0435 <em>api.ts<\/em> \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0439\u0442\u0438 \u0442\u0430\u043a\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442:<\/p>\n<pre><code class=\"typescript\">\/**  *  * @export  * @interface User  *\/ export interface User {   \/**    * \u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440    * @type {string}    * @memberof User    *\/   userId: string   \/**    * \u041b\u043e\u0433\u0438\u043d    * @type {string}    * @memberof User    *\/   login: string   \/**    * \u0418\u043c\u044f    * @type {string}    * @memberof User    *\/   firstName?: string   \/**    * \u0424\u0430\u043c\u0438\u043b\u0438\u044f    * @type {string}    * @memberof User    *\/   lastName?: string   \/**    * \u0412\u043e\u0437\u0440\u0430\u0441\u0442    * @type {number}    * @memberof User    *\/   age?: number   \/**    *    * @type {string}    * @memberof User    *\/   status: UserStatusEnum }  export const UserStatusEnum = {   Active: 'active',   Blocked: 'blocked', } as const  export type UserStatusEnum = (typeof UserStatusEnum)[keyof typeof UserStatusEnum]<\/code><\/pre>\n<p>\u041a\u0430\u043a\u00a0\u0432\u0438\u0434\u0438\u043c, \u0443\u00a0\u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <code>User<\/code>, \u0432\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432\u0441\u0435 \u043f\u043e\u043b\u044f, \u0438 \u0434\u0430\u0436\u0435 \u043f\u043e\u043b\u0435 <code>status<\/code>, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u0432\u00a0\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0435 \u043a\u0430\u043a <code>enum<\/code>, \u0438\u043c\u0435\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0442\u0438\u043f <code>UserStatusEnum<\/code>, \u043f\u0440\u0438\u00a0\u044d\u0442\u043e\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u0430\u043a\u00a0\u0442\u0438\u043f union. \u0412\u0441\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0438 \u0442\u0438\u043f\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437\u00a0\u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0442\u0430\u043a \u0447\u0442\u043e\u00a0\u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432\u00a0\u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043d\u0435\u00a0\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u0438\u0445 \u0437\u0430\u043d\u043e\u0432\u043e. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u043f\u0440\u0438\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0441\u043b\u0435 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0438 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u0435\u0441\u043b\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0435\u043c\u0441\u044f \u0441\u00a0\u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<blockquote>\n<p>\u0417\u0430\u043c\u0435\u0447\u0443, \u0447\u0442\u043e\u00a0\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043d\u0435\u00a0\u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u0438\u0437\u044f\u0449\u043d\u044b\u043c \u043d\u0435\u0439\u043c\u0438\u043d\u0433\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0438 \u0442\u0438\u043f\u043e\u0432. \u0422\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0438\u0437\u2011\u0437\u0430 \u043f\u0440\u0438\u043d\u044f\u0442\u044b\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u00a0\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u0430\u0445, \u0447\u0442\u043e\u00a0\u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0443\u044e\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e. \u0412\u00a0\u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0435\u044d\u043a\u0441\u043f\u043e\u0440\u0442, \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u044b\u0432\u0430\u044f \u0438\u043b\u0438\u00a0\u0434\u0430\u0436\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u043a\u0430\u043a\u0438\u043c\u0438\u2011\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u043c\u0438 \u043f\u043e\u043b\u044f\u043c\u0438, \u043d\u043e\u00a0\u044d\u0442\u043e \u0442\u0435\u043c\u0430 \u0434\u043b\u044f\u00a0\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<\/blockquote>\n<blockquote>\n<p>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u043d\u044e\u0430\u043d\u0441. \u042f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432\u00a0\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0432\u00a0\u0441\u0445\u0435\u043c\u044b User \u0438 UserRequest \u043d\u0438\u0436\u043d\u044e\u044e \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043b\u044f\u00a0\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044f age. \u041a\u00a0\u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, TypeScript \u043d\u0430\u00a0\u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u043d\u0435\u00a0\u0443\u043c\u0435\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u0430\u00a0\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u043d\u0435\u00a0\u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0438\u0445 \u0432\u00a0\u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0438 JSDoc. \u041d\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Swagger \u0432\u0441\u0435 \u044d\u0442\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0435\u0437\u0434\u0443\u043c\u043d\u043e \u0434\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0442\u0438\u043f\u0430\u043c \u043d\u0435\u00a0\u0441\u0442\u043e\u0438\u0442, \u043b\u0443\u0447\u0448\u0435 \u0433\u043b\u0430\u0437\u0430\u043c\u0438 \u043f\u0440\u043e\u0431\u0435\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u00a0\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.<\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0445 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0441\u043b\u043e\u0439 API, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0440\u043e\u0448\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d, \u043d\u0435\u00a0\u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c, \u0438 \u0434\u0430\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u00a0\u0431\u044b\u0442\u044c \u0432\u044b\u043d\u0435\u0441\u0435\u043d \u0432\u00a0\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442. \u042d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<h3>\u041c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h3>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Mock Service Worker (MSW)<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0443\u00a0\u043d\u0430\u0441 \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0435\u0441\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0437\u0430\u0433\u043b\u0443\u0448\u0435\u043a \u0434\u043b\u044f\u00a0\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u0414\u043b\u044f\u00a0\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442 MSW \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u043a\u043e\u0434\u0430 \u0432\u043e\u0440\u043a\u0435\u0440\u0430:<\/p>\n<pre><code class=\"bash\">npm i msw -D npx msw init public<\/code><\/pre>\n<p>\u0412\u00a0\u043f\u0430\u043f\u043a\u0435 <em>public<\/em> \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0444\u0430\u0439\u043b <em>mockServiceWorker.js<\/em>. \u042d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u043e\u0434 \u0441\u0430\u043c\u043e\u0433\u043e \u0432\u043e\u0440\u043a\u0435\u0440\u0430.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f\u00a0\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0438\u0445 \u043d\u0430\u0441 \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442\u043e\u0432 (\u043f\u043e\u043a\u0430 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u044e \u0434\u043b\u044f\u00a0\u0432\u044b\u0432\u043e\u0434\u0430 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432). \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <em>src\/mocks\/handlers.ts<\/em>:<\/p>\n<pre><code class=\"typescript\">\/\/ src\/mocks\/handlers.ts import type { User } from '@\/api\/api' import { http, HttpResponse } from 'msw'  const user: User = {   userId: 'uuid1',   login: 'admin',   firstName: '\u0421\u0435\u0440\u0433\u0435\u0439',   age: 33,   status: 'active', }  const secondUser: User = {   userId: 'uuid2',   login: 'user',   firstName: '\u0410\u043b\u0435\u043a\u0441\u0435\u0439',   age: 18,   status: 'blocked', }  export const handlers = [   http.get&lt;never, undefined, User[]&gt;('https:\/\/127.0.0.1:20000\/api\/v1\/users', () =&gt; {     return HttpResponse.json([user, secondUser])   }),    http.put&lt;{ id: string }, UserRequest, User&gt;(     'https:\/\/127.0.0.1:20000\/api\/v1\/users\/:id',     async ({ params, request }) =&gt; {       const { id } = params       console.info('Update handler params', id)        const requestBody = await request.clone().json()       console.info('Update handler request', requestBody)       return HttpResponse.json(user)     },   ),    http.delete&lt;{ id: string }&gt;('https:\/\/127.0.0.1:20000\/api\/v1\/users\/:id', ({ params }) =&gt; {     const { id } = params     console.info('Delete handler params', id)     return HttpResponse.error()   }), ]<\/code><\/pre>\n<p>\u0422\u0443\u0442 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430\u00a0\u0434\u0432\u0430 \u043c\u043e\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0412\u043e\u2011\u043f\u0435\u0440\u0432\u044b\u0445, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438\u0437\u00a0\u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0437\u0446\u044b \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0445 \u043f\u043e\u00a0\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c. \u0418 \u0432\u00a0\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u043a\u043e\u0434\u043e\u043c IDE \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0442\u0438\u043f\u044b \u043f\u043e\u043b\u0435\u0439, \u0432\u00a0\u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044f <code>status<\/code>, \u043e\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u043c\u00a0\u0431\u044b\u043b\u043e \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435. \u0422\u0430\u043a\u0436\u0435 \u0434\u043b\u044f\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u043c\u0438 \u0432\u00a0\u0434\u0436\u0435\u043d\u0435\u0440\u0438\u043a\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 <code>put<\/code>.<\/p>\n<p>\u0412\u043e\u2011\u0432\u0442\u043e\u0440\u044b\u0445, \u0432\u00a0\u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u0430\u0445 \u043c\u044b \u0438\u0437\u00a0\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043a\u043e\u043b\u043b\u0431\u0435\u043a\u0430 \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438\u043b\u0438\u00a0\u0442\u0435\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0435\u2011\u043b\u0438\u0431\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u00a0\u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432\u00a0\u0432\u043e\u0440\u043a\u0435\u0440, \u0432\u00a0\u0444\u0430\u0439\u043b <em>src\/mocks\/browser.js<\/em>:<\/p>\n<pre><code class=\"typescript\">\/\/ src\/mocks\/browser.ts import { setupWorker } from 'msw\/browser' import { handlers } from '.\/handlers'  export const worker = setupWorker(...handlers)<\/code><\/pre>\n<p>\u0418 \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0432\u043d\u0435\u0441\u0442\u0438 \u043f\u0440\u0430\u0432\u043a\u0438 \u0432\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e <em>src\/main.ts<\/em>), \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u043e\u0440\u043a\u0435\u0440:<\/p>\n<pre><code class=\"typescript\">\/\/ src\/main.ts import '.\/assets\/base.css'  import { createApp } from 'vue' import App from '.\/App.vue'  import ElementPlus from 'element-plus' import 'element-plus\/dist\/index.css'  const enableMocking = async () =&gt; {   const { worker } = await import('.\/mocks\/browser')    return worker.start() }  enableMocking().then(() =&gt; {   createApp(App).use(ElementPlus).mount('#app') })<\/code><\/pre>\n<p>\u0414\u043b\u044f\u00a0\u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u043d\u0435\u00a0\u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430\u00a0\u0440\u0435\u0436\u0438\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430, \u043f\u0440\u0438\u043c\u0435\u043c, \u0447\u0442\u043e\u00a0\u043f\u0440\u043e\u0435\u043a\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u00a0\u0440\u0435\u0436\u0438\u043c\u0435 <code>development<\/code>. \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0432\u00a0\u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0442\u0430\u043a\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430, \u0432\u0435\u0434\u044c MSW\u00a0\u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f\u00a0\u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u043f\u0440\u0438\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0445 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432\u00a0\u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 <code>[MSW] Mocking enabled.<\/code>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <em>src\/App.vue<\/em> \u043d\u0430\u00a0\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432:<\/p>\n<pre><code class=\"typescript\">\/\/ src\/App.vue &lt;script setup lang=\"ts\"&gt; import { usersApi } from '.\/api'  const fetchUsers = async () =&gt; {   const users = (await usersApi.getAllUsers()).data   console.table(users) }  const deleteUser = async () =&gt; {   await usersApi.deleteUser('uuid3') }  const updateUser = async () =&gt; {   const user = (await usersApi.updateUser('uuid1', { login: 'admin2' })).data   console.info(user) }  await fetchUsers()  try {   await deleteUser() } catch (e) {   console.error(e) }  await updateUser() &lt;\/script&gt;<\/code><\/pre>\n<p>\u0412\u00a0\u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e\u00a0\u0432\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u043d\u0430\u0448\u0438 \u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<figure class=\"bordered full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/138\/cfe\/88b\/138cfe88b4d4ace05117a2802eb9f24c.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043e\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043e\u0442\u0432\u0435\u0442\u0430\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043e\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043e\u0442\u0432\u0435\u0442\u0430\" width=\"595\" height=\"164\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/138\/cfe\/88b\/138cfe88b4d4ace05117a2802eb9f24c.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/138\/cfe\/88b\/138cfe88b4d4ace05117a2802eb9f24c.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043e\u0442\u00a0\u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043e\u00a0\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043e\u0442\u0432\u0435\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<h4>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Faker<\/h4>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0435\u0449\u0435 \u0440\u0430\u0437 \u043d\u0430\u00a0\u0444\u0430\u0439\u043b <em>src\/mocks\/handlers.ts<\/em>. \u0412\u00a0\u043f\u0435\u0440\u0432\u043e\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0438 JSON, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437\u00a0\u0434\u0432\u0443\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u041e\u0431\u0430 \u044d\u0442\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043c\u044b \u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u041d\u043e\u00a0\u0438\u043d\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043c\u043e\u043a\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u0438\u0437\u00a0\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0434\u0435\u0441\u044f\u0442\u043a\u043e\u0432 \u0437\u0430\u043f\u0438\u0441\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f\u00a0\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u0414\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438\u0437\u00a0\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Element Plus, \u0430\u00a0\u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0443\u0434\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Faker, \u0447\u0442\u043e\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f\u00a0\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u043e\u00a0\u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u0432\u00a0\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u043c\u0438\u00a0\u0436\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c Faker \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442:<\/p>\n<pre><code class=\"bash\">npm i @faker-js\/faker -D<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0435\u0433\u043e, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 <code>User<\/code>. \u041a\u043e\u0434 \u0432\u00a0\u0444\u0430\u0439\u043b\u0435 <em>src\/mocks\/handlers.ts<\/em> \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:<\/p>\n<pre><code class=\"typescript\">\/\/ src\/mocks\/handlers.ts import type { User } from '@\/api\/api' import { http, HttpResponse } from 'msw' import { faker } from '@faker-js\/faker'  const statuses: User['status'][] = ['active', 'blocked']  const users: User[] = [...Array(faker.number.int({ min: 15, max: 50 })).keys()].map(() =&gt; ({   userId: faker.string.uuid(),   login: faker.internet.username(),   firstName: faker.person.firstName(),   lastName: faker.person.lastName(),   age: faker.number.int({ min: 18, max: 27 }),   status: statuses[faker.number.int(1)], }))  export const handlers = [   http.get('https:\/\/127.0.0.1:20000\/api\/v1\/users', () =&gt; {     return HttpResponse.json(users)   }),    http.put&lt;{ id: string }&gt;(     'https:\/\/127.0.0.1:20000\/api\/v1\/users\/:id',     async ({ params, request }) =&gt; {       const { id } = params       console.info('Update handler params', id)        const requestBody = await request.clone().json()       console.info('Update handler request', requestBody)       return HttpResponse.json(users[0])     },   ),    http.delete&lt;{ id: string }&gt;('https:\/\/127.0.0.1:20000\/api\/v1\/users\/:id', ({ params }) =&gt; {     const { id } = params     console.info('Delete handler params', id)     return HttpResponse.error()   }), ]<\/code><\/pre>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u00a0\u0442\u0430\u0431\u043b\u0438\u0446\u0443 (\u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/element-plus.org\/en-US\/\">Element Plus<\/a> \u0434\u043b\u044f\u00a0\u0432\u044b\u0432\u043e\u0434\u0430). \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u043a\u043e\u0434 \u0432\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 <em>src\/App.vue<\/em>:<\/p>\n<pre><code class=\"typescript\">\/\/ src\/App.vue &lt;script setup lang=\"ts\"&gt; import { usersApi } from '.\/api' import type { User } from '.\/api\/api' import { onMounted, reactive } from 'vue'  const data: { users: User[] } = reactive({ users: [] })  const fetchUsers = async () =&gt; {   const users = (await usersApi.getAllUsers()).data   console.table(users)    data.users = users }  onMounted(fetchUsers) &lt;\/script&gt;  &lt;template&gt;   &lt;ElTable :data=\"data.users\" stripe style=\"width: 100%\"&gt;     &lt;ElTableColumn prop=\"userId\" label=\"ID\"&gt;&lt;\/ElTableColumn&gt;     &lt;ElTableColumn prop=\"login\" label=\"Login\"&gt;&lt;\/ElTableColumn&gt;     &lt;ElTableColumn prop=\"firstName\" label=\"\u0418\u043c\u044f\"&gt;&lt;\/ElTableColumn&gt;     &lt;ElTableColumn prop=\"lastName\" label=\"\u0424\u0430\u043c\u0438\u043b\u0438\u044f\"&gt;&lt;\/ElTableColumn&gt;     &lt;ElTableColumn prop=\"age\" label=\"\u0412\u043e\u0437\u0440\u0430\u0441\u0442\"&gt;&lt;\/ElTableColumn&gt;   &lt;\/ElTable&gt; &lt;\/template&gt;<\/code><\/pre>\n<h4>Source<\/h4>\n<p>\u041d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442.<\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043c\u043e\u0436\u0435\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 Source. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u043a\u043e\u0434 \u0434\u043e\u00a0\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c Source:<\/p>\n<pre><code class=\"bash\">npm i @mswjs\/source -D<\/code><\/pre>\n<p>\u0412\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442! \u0415\u0441\u043b\u0438 \u0434\u043e\u00a0\u0441\u0438\u0445 \u043f\u043e\u0440 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u00a0\u0444\u0430\u0439\u043b\u043e\u043c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043a\u0430\u043a\u00a0\u0432\u00a0\u0444\u043e\u0440\u043c\u0430\u0442\u0435 YAML, \u0442\u0430\u043a \u0438 \u0432\u00a0\u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON, \u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0444\u043e\u0440\u043c\u0430\u0442 JSON \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435\u043c.<\/p>\n<p>\u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u0434 \u0432\u00a0\u0444\u0430\u0439\u043b\u0435 <em>src\/mocks\/handlers.ts<\/em>:<\/p>\n<pre><code class=\"typescript\">\/\/ src\/mocks\/handlers.ts import { fromOpenApi } from '@mswjs\/source\/open-api' import api from '..\/..\/openapi\/spec.json'  export const handlers = await fromOpenApi(api)<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043e\u0440\u043a\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432\u00a0\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u044d\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0441\u00a0\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0438\u043c \u043d\u0430\u0441 \u043a\u043e\u0434\u043e\u043c. \u0414\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e \u0432\u00a0\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c GET\u2011\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>response<\/code> \u0441\u00a0\u043a\u043e\u0434\u043e\u043c \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<p>\u0412\u044b\u0448\u0435 \u044f \u043f\u0438\u0441\u0430\u043b, \u0447\u0442\u043e\u00a0\u043b\u044e\u0431\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 API \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432\u00a0\u0441\u0445\u0435\u043c\u0430\u0445 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440. \u042d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0442\u0438\u043f\u0430 <code>AxiosRequestConfig<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>{ params: { response: 401 } }<\/code>, \u043c\u044b \u043a\u0430\u043a\u00a0\u0440\u0430\u0437 \u043f\u043e\u043b\u0443\u0447\u0438\u043c\u00a0\u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0447\u043d\u0435\u0442 \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0441\u0435\u043f\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0440\u0430\u043d\u0435\u0435 \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0432\u00a0\u0444\u0430\u0439\u043b\u0435 <em>src\/api\/index.ts<\/em>.<\/p>\n<p>\u0421\u0442\u0440\u043e\u043a\u0430 \u0438\u0437\u00a0\u0444\u0430\u0439\u043b\u0430 <em>src\/App.vue<\/em> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">const users = (await usersApi.getAllUsers({ params: { response: 401 } })).data<\/code><\/pre>\n<p>\u041c\u0438\u043d\u0443\u0441\u043e\u043c \u043f\u0440\u0438\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Source \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e\u00a0\u043c\u044b \u0442\u0435\u0440\u044f\u0435\u043c, \u0432\u043e\u2011\u043f\u0435\u0440\u0432\u044b\u0445, \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 mock\u2011\u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0430\u043c \u0434\u0430\u0432\u0430\u043b Faker, \u0438 \u0432\u043e\u2011\u0432\u0442\u043e\u0440\u044b\u0445, \u0432\u00a0\u0446\u0435\u043b\u043e\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0437\u0430\u00a0\u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c. \u0412\u043f\u0440\u043e\u0447\u0435\u043c, \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u0442\u044c \u043e\u0431\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0430, \u0430\u00a0\u0432\u044b\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442\u00a0\u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u041e\u0434\u043d\u0438\u0445 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0434\u043b\u044f\u00a0OpenAPI Generator \u0434\u043b\u044f\u00a0JS \u0438 TS \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432, \u0435\u0441\u0442\u044c \u0438\u0437\u00a0\u0447\u0435\u0433\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c. \u041e\u0434\u043d\u0430 \u0438\u0437\u00a0\u0446\u0435\u043b\u0435\u0439 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438\u00a0\u2014 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0449\u0438\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0435\u00a0\u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0430\u044f \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0438\u0437\u043b\u0438\u0448\u043d\u0438\u043c\u0438 \u043c\u0435\u043b\u043a\u0438\u043c\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438. \u0412\u0441\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432\u00a0\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0414\u0440\u0443\u0433\u0430\u044f \u0446\u0435\u043b\u044c\u00a0\u2014 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a\u0443\u044e \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u043e\u00a0frontend\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043e\u0442\u00a0\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0441\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439 \u0434\u043e\u00a0\u043f\u043e\u043b\u043d\u043e\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u00a0\u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u00a0\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u044d\u0442\u0430\u043f\u043e\u0432, \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043f\u0440\u0438\u0447\u0435\u043c \u0432\u00a0\u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u044d\u0442\u043e \u043d\u0435\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442\u00a0\u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u00a0\u0446\u0435\u043b\u043e\u043c \u0438\u043b\u0438\u00a0\u0441\u0442\u0435\u043a\u0430 \u0432\u00a0\u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438.<\/p>\n<h3>\u0421\u0441\u044b\u043b\u043a\u0438<\/h3>\n<ol>\n<li>\n<p><a href=\"https:\/\/openapi-generator.tech\/docs\/usage\">\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e OpenAPI Generator<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/openapi-generator.tech\/docs\/generators\/typescript-axios\">\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430 typescript-axios<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/mswjs.io\/\">Mock Service Worker<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/fakerjs.dev\/\">Faker<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/source.mswjs.io\/\">Source<\/a><\/p>\n<\/li>\n<\/ol>\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\/928432\/\"> https:\/\/habr.com\/ru\/articles\/928432\/<\/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>\u0412\u00a0\u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0432\u00a0\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 frontend\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u044b \u0438\u043d\u043e\u0433\u0434\u0430 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0441\u00a0\u043e\u0434\u043d\u043e\u0439 \u0438\u0437\u00a0\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439 (\u0438\u043b\u0438 \u0441\u00a0\u043e\u0431\u0435\u0438\u043c\u0438 \u0441\u0440\u0430\u0437\u0443):<\/p>\n<ol>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u044a\u0435\u043c\u043d\u0443\u044e \u0438 \u0447\u0430\u0441\u0442\u043e \u043c\u0435\u043d\u044f\u044e\u0449\u0443\u044e\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e API. \u0422\u0443\u0442 \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430 \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u00a0\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u043c \u0437\u0430\u00a0\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0439 \u043a\u00a0\u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u044d\u043d\u0434\u043f\u043e\u0439\u043d\u0442\u0430\u043c, \u043d\u043e\u00a0\u0441\u0430\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0435\u00a0\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u043e\u00a0\u043a\u0430\u043a\u0438\u043c\u2011\u043b\u0438\u0431\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c. \u042d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0432\u00a0\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 mock\u2011\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u00a0\u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0438 \u043e\u00a0\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 OpenAPI, \u0438 \u043e\u00a0\u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<p>\u0427\u0442\u043e\u00a0\u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\n<p>\u043d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442 API \u0434\u043b\u044f\u00a0Axios \u0438 TypeScript \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430\u00a0\u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c Mock Service Worker (MSW) \u0434\u043b\u044f\u00a0\u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441\u00a0\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 Faker \u0438 Source \u0434\u043b\u044f\u00a0\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e<\/h3>\n<p>\u0414\u043b\u044f\u00a0\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0434\u0445\u043e\u0434 \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043e\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c \u043d\u0438\u0436\u0435, \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f.<\/p>\n<ol>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432\u043e\u0440\u043a\u0435\u0440\u043e\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0435\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u00a0\u043a\u0430\u043a\u0438\u043c\u2011\u043b\u0438\u0431\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c \u043d\u0435\u00a0\u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d. \u042d\u0442\u043e \u043c\u043e\u0433\u0443\u0442\u00a0\u0431\u044b\u0442\u044c \u0441\u0431\u043e\u0438 \u0432\u00a0\u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u0435\u0442\u0438, \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u043b\u0438\u00a0\u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u043e\u00a0\u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0444\u0438\u043b\u0430\u043a\u0442\u0438\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0411\u044b\u0432\u0430\u044e\u0442 \u043a\u0435\u0439\u0441\u044b, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c, \u043d\u043e\u00a0\u043d\u043e\u0432\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0435\u0449\u0435 \u043d\u0435\u00a0\u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442 \u043d\u0430\u00a0\u0441\u0442\u0435\u043d\u0434\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430\u00a0\u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u044c, \u0430\u00a0\u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e \u043d\u0435\u00a0\u0445\u0432\u0430\u0442\u0430\u0435\u0442. \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u043d\u043e\u00a0\u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043b\u0438\u0442\u044c\u0441\u044f \u0432\u00a0\u043d\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u0440\u0430\u0442\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0442\u0435\u0441\u0442\u043e\u0432 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u043e\u0449\u0435 \u043e\u043f\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u00a0\u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u00a0\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/storybook.js.org\/\">Storybook<\/a>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0418 \u044d\u0442\u043e \u043d\u0435\u00a0\u0432\u0441\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438. \u0412\u00a0\u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432, \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043a\u0430\u043a\u043e\u0439\u2011\u043d\u0438\u0431\u0443\u0434\u044c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442 \u0434\u043b\u044f\u00a0\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0430\u0448\u0435\u0439 \u0442\u0435\u043e\u0440\u0438\u0438, \u0430\u00a0\u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 API \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442\u00a0\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0434\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e backend. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u0432\u00a0\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e.<\/p>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u00a0\u043d\u0430\u0448\u0435\u0439 \u043c\u0430\u0448\u0438\u043d\u0435 \u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432\u00a0\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0435\u043c\u044b \u0438\u0437\u00a0\u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u043e\u0433\u0443\u0442\u00a0\u0431\u044b\u0442\u044c \u043d\u0435\u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b, \u0442\u0430\u043a \u0447\u0442\u043e\u00a0\u0432\u0441\u0435 \u0441\u0438\u0442\u0443\u0430\u0442\u0438\u0432\u043d\u043e.<\/p>\n<\/blockquote>\n<h3>\u041f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/h3>\n<p>\u0412\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 <a href=\"https:\/\/vuejs.org\/\">Vue 3<\/a>, \u0438\u0437\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0443\u0434\u0430\u043b\u0438\u043c \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u0440\u043e\u043c\u0435 <code>App.vue<\/code>. \u0412\u0441\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u0432\u00a0\u0441\u043b\u0435\u0433\u043a\u0430 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0434\u043b\u044f\u00a0\u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438. \u0420\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0435\u00a0\u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0412\u00a0\u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445\u00a0\u0436\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u00a0\u043f\u0440\u0438\u043d\u044f\u0442\u043e\u0439 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0438 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438, \u0438 \u0435\u0441\u043b\u0438 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e\u2011\u0442\u043e \u0443\u00a0\u0441\u0435\u0431\u044f \u043d\u0430\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u043d\u0435\u00a0\u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0443\u0442\u0438 \u043a\u00a0\u0444\u0430\u0439\u043b\u0430\u043c.<\/p>\n<blockquote>\n<p>\u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432\u00a0\u0441\u0442\u0430\u0442\u044c\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c\u0438. \u042f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e \u0438\u0445 \u043d\u0430\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 Vue \u0438 React, \u0430\u00a0\u043a\u043b\u0438\u0435\u043d\u0442 \u043d\u0443\u0436\u0435\u043d \u043d\u0435\u00a0\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u00a0Axios, \u043d\u043e\u00a0\u0438\u043d\u043e\u0433\u0434\u0430 \u0438 \u043f\u043e\u0434\u00a0\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 <code>fetch<\/code>. \u041f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u043d\u0435\u00a0\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f.<\/p>\n<\/blockquote>\n<p>\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0441\u00a0\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0438 \u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 CRUD \u0434\u043b\u044f\u00a0\u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0430 \u0432\u00a0\u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e\u00a0\u0434\u043b\u044f\u00a0\u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437\u00a0\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c, \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u043e\u0439 (\u0430 \u0434\u043b\u044f\u00a0\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u0440\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u0438 \u0432\u00a0\u0444\u043e\u0440\u043c\u0430\u0442\u0435 YAML). \u0424\u0430\u0439\u043b <em>spec.json<\/em> \u043c\u044b \u043f\u043e\u043b\u043e\u0436\u0438\u043c \u0432\u00a0\u043f\u0430\u043f\u043a\u0443 <em>openapi<\/em> \u0432\u00a0\u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"json\">{   \"openapi\": \"3.0.4\",   \"info\": {     \"title\": \"User Management Service\",     \"version\": \"v1\"   },   \"servers\": [     {       \"url\": \"https:\/\/127.0.0.1:20000\/api\"     }   ],   \"paths\": {     \"\/v1\/users\": {       \"get\": {         \"tags\": [\"Users\"],         \"operationId\": \"getAllUsers\",         \"summary\": \"\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439\",         \"responses\": {           \"200\": {             \"description\": \"\u0421\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439\",             \"content\": {               \"application\/json\": {                 \"schema\": {                   \"type\": \"array\",                   \"items\": {                     \"$ref\": \"#\/components\/schemas\/User\"                   }                 }               }             }           },           \"401\": {             \"$ref\": \"#\/components\/responses\/401\"           },           \"403\": {             \"$ref\": \"#\/components\/responses\/403\"           },           \"404\": {             \"$ref\": \"#\/components\/responses\/404\"           }         }       },       \"post\": {         \"tags\": [\"Users\"],         \"operationId\": \"createUser\",         \"summary\": \"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\",         \"requestBody\": {           \"content\": {             \"application\/json\": {               \"schema\": {                 \"$ref\": \"#\/components\/schemas\/UserRequest\"               }             }           }         },         \"responses\": {           \"201\": {             \"$ref\": \"#\/components\/responses\/201\"           },           \"401\": {             \"$ref\": \"#\/components\/responses\/401\"           },           \"403\": {             \"$ref\": \"#\/components\/responses\/403\"           },           \"404\": {             \"$ref\": \"#\/components\/responses\/404\"           }         }       }     },     \"\/v1\/users\/{id}\": {       \"get\": {         \"tags\": [\"Users\"],         \"operationId\": \"getUser\",         \"summary\": \"\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\",         \"parameters\": [           {             \"$ref\": \"#\/components\/parameters\/Id\"           }         ],         \"responses\": {           \"200\": {             \"$ref\": \"#\/components\/responses\/200\"           },           \"401\": {             \"$ref\": \"#\/components\/responses\/401\"           },           \"403\": {             \"$ref\": \"#\/components\/responses\/403\"           },           \"404\": {             \"$ref\": \"#\/components\/responses\/404\"           }         }       },       \"put\": {         \"tags\": [\"Users\"],         \"operationId\": \"updateUser\",         \"summary\": \"\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\",         \"parameters\": [           {             \"$ref\": \"#\/components\/parameters\/Id\"           }         ],         \"requestBody\": {           \"content\": {             \"application\/json\": {               \"schema\": {                 \"$ref\": \"#\/components\/schemas\/UserRequest\"               }             }           }         },         \"responses\": {           \"200\": {             \"$ref\": \"#\/components\/responses\/200\"           },           \"401\": {             \"$ref\": \"#\/components\/responses\/401\"           },           \"403\": {             \"$ref\": \"#\/components\/responses\/403\"           },           \"404\": {             \"$ref\": \"#\/components\/responses\/404\"           }         }       },       \"delete\": {         \"tags\": [\"Users\"],         \"operationId\": \"deleteUser\",         \"summary\": \"\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\",         \"parameters\": [           {             \"$ref\": \"#\/components\/parameters\/Id\"           }         ],         \"responses\": {           \"204\": {             \"description\": \"\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0434\u0430\u043b\u0435\u043d\"           },           \"401\": {             \"$ref\": \"#\/components\/responses\/401\"           },           \"403\": {             \"$ref\": \"#\/components\/responses\/403\"           },           \"404\": {             \"$ref\": \"#\/components\/responses\/404\"           }         }       }     }   },   \"tags\": [     {       \"name\": \"Users\",       \"description\": \"\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439\"     }   ],   \"components\": {     \"parameters\": {       \"Id\": {         \"name\": \"id\",         \"in\": \"path\",         \"required\": true,         \"schema\": {           \"$ref\": \"#\/components\/schemas\/Id\"         }       }     },     \"schemas\": {       \"Id\": {         \"type\": \"string\",         \"description\": \"\u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\"       },       \"User\": {         \"type\": \"object\",         \"required\": [\"userId\", \"login\", \"status\"],         \"properties\": {           \"userId\": {             \"type\": \"string\",             \"description\": \"\u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\"           },           \"login\": {             \"type\": \"string\",             \"description\": \"\u041b\u043e\u0433\u0438\u043d\"           },           \"firstName\": {             \"type\": \"string\",             \"description\": \"\u0418\u043c\u044f\"           },           \"lastName\": {             \"type\": \"string\",             \"description\": \"\u0424\u0430\u043c\u0438\u043b\u0438\u044f\"           },           \"age\": {             \"type\": \"integer\",             \"format\": \"int32\",             \"minimum\": 0,             \"description\": \"\u0412\u043e\u0437\u0440\u0430\u0441\u0442\"           },           \"status\": {             \"type\": \"string\",             \"enum\": [\"active\", \"blocked\"]           }         }       },       \"UserRequest\": {         \"type\": \"object\",         \"required\": [\"login\"],         \"properties\": {           \"login\": {             \"type\": \"string\",             \"description\": \"\u041b\u043e\u0433\u0438\u043d\"           },           \"firstName\": {             \"type\": \"string\",             \"description\": \"\u0418\u043c\u044f\"           },           \"lastName\": {             \"type\": \"string\",             \"description\": \"\u0424\u0430\u043c\u0438\u043b\u0438\u044f\"           },           \"age\": {             \"type\": \"integer\",             \"minimum\": 0,             \"description\": \"\u0412\u043e\u0437\u0440\u0430\u0441\u0442\"           }         }       }     },     \"responses\": {       \"200\": {         \"description\": \"\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\",         \"content\": {           \"application\/json\": {             \"schema\": {               \"$ref\": \"#\/components\/schemas\/User\"             }           }         }       },       \"201\": {         \"$ref\": \"#\/components\/responses\/200\"       },       \"401\": {         \"description\": \"Unauthorized\"       },       \"403\": {         \"description\": \"Forbidden\"       },       \"404\": {         \"description\": \"Not Found\"       }     }   } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0412\u00a0\u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430\u00a0\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b.<\/p>\n<h3>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/h3>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 OpenAPI Generator<\/h4>\n<p>\u0414\u043b\u044f\u00a0\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c OpenAPI Generator CLI. \u0423\u00a0\u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438. \u0415\u0441\u043b\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0438 \u0432\u00a0\u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e. \u041c\u044b\u00a0\u0436\u0435 \u043f\u043e\u0439\u0434\u0435\u043c \u043f\u043e\u00a0\u0441\u0430\u043c\u043e\u043c\u0443 \u043f\u0440\u043e\u0441\u0442\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0430\u043a\u0435\u0442 \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u0430\u043a\u00a0dev \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c:<\/p>\n<pre><code class=\"bash\">npm i @openapitools\/openapi-generator-cli -D<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 \u0432\u00a0\u0440\u0430\u0437\u0434\u0435\u043b <code>scripts<\/code> \u0432 <em>package.json<\/em>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"json\">\"generate-api\": \"openapi-generator-cli generate -i openapi\/spec.json -g typescript-axios -o src\/api\/api\"<\/code><\/pre>\n<h4>\u0413\u0435\u043d\u0435<\/h><\/div>\n<\/div>\n<\/div>\n<\/div>\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-467237","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/467237","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=467237"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/467237\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=467237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=467237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=467237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}