{"id":408022,"date":"2024-06-29T19:54:37","date_gmt":"2024-06-29T19:54:37","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=408022"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-06-29T19:54:37","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=408022","title":{"rendered":"<span>JavaScript: \u043a\u0430\u043a \u0438\u0437 Fetch \u0441\u0434\u0435\u043b\u0430\u0442\u044c Axios?<\/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-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/oz\/vy\/_a\/ozvy_a-kefgzvfo95sef6pdfpza.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/oz\/vy\/_a\/ozvy_a-kefgzvfo95sef6pdfpza.jpeg\" data-blurred=\"true\"\/>  <\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430, \u0441\u0443\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043d\u0430\u0434 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\"><code>Fetch API<\/code><\/a> \u0434\u043b\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c.<\/p>\n<p>  <\/p>\n<p><strong>\u0421 \u0447\u0435\u0433\u043e \u0432\u0441\u0435 \u043d\u0430\u0447\u0430\u043b\u043e\u0441\u044c?<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0447\u0438\u0442\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u044e Kent C. Dodds <a href=\"https:\/\/kentcdodds.com\/blog\/replace-axios-with-a-simple-custom-fetch-wrapper\">&#171;Replace axios with a simple custom fetch wrapper&#187;<\/a>, \u0438\u0437\u0443\u0447\u0438\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0445 \u0443\u0442\u0438\u043b\u0438\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u0440\u0435\u0448\u0438\u043b, \u0447\u0442\u043e \u043c\u043e\u0433\u0443 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435. \u041e \u0442\u043e\u043c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u0435 \u044d\u0442\u043e \u0443\u0434\u0430\u043b\u043e\u0441\u044c, \u0441\u0443\u0434\u0438\u0442\u0435 \u0441\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0441\u044b\u043b\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f <a href=\"https:\/\/github.com\/harryheman\/simple-fetch\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0435\u0440\u0442\u043a\u0430 \u0432 \u0432\u0438\u0434\u0435 npm-\u043f\u0430\u043a\u0435\u0442\u0430 \u2014 <a href=\"https:\/\/www.npmjs.com\/package\/very-simple-fetch\"><code>very-simple-fetch<\/code><\/a> (\u0445\u043e\u0442\u0435\u043b \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e <code>simple-fetch<\/code>, \u043d\u043e \u044d\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043d\u044f\u0442\u043e).<\/p>\n<p>  <\/p>\n<p>\u041d\u0435\u0442 \u043f\u0440\u0435\u0434\u0435\u043b\u0430 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u0443 \u0438 \u043d\u0435 \u043e\u0448\u0438\u0431\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0442, \u043a\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043a\u0440\u0438\u0442\u0438\u043a\u0435, \u043b\u044e\u0431\u044b\u043c \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f\u043c \u0438 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c \u043f\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430: \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u0440\u0435\u043a\u0432\u0435\u0441\u0442\u044b \u0438\u043b\u0438 \u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043b\u0438\u0447\u043a\u0443.<\/p>\n<p>  <\/p>\n<p><strong>\u0427\u0442\u043e \u043d\u0430\u0441\u0447\u0435\u0442 <code>Axios<\/code>?<\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0448\u0430 \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 <a href=\"https:\/\/www.npmjs.com\/package\/axios\"><code>axios<\/code><\/a>. \u042d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e <code>axios<\/code> \u2014 \u043b\u0443\u0447\u0448\u0438\u0439 \u0438\u0437 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u043c\u043d\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u041e\u043d \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u0430\u043a \u0438 \u0432 <code>Node.js<\/code>. \u0411\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 <code>axios<\/code> \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043d\u0430\u043c \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0432\u0441\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u0435\u0441\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u044d\u0442\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c. \u0415\u0441\u043b\u0438 \u0432 \u0446\u0438\u0444\u0440\u0430\u0445, \u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440 <code>axios<\/code> \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 371 \u041a\u0431, \u0430 \u0440\u0430\u0437\u043c\u0435\u0440 <code>very-simple-fetch<\/code> \u2014 9.33 \u041a\u0431.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<h2 id=\"postanovka-zadach-i-proektirovanie\">\u041f\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u0430\u0434\u0430\u0447 \u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430\u0448 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0435\u0448\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 (\u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c):<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0440\u043e\u0441\u0442\u0430\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 <code>GET<\/code>, <code>POST<\/code>, <code>PUT<\/code> \u0438 <code>DELETE<\/code> \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/li>\n<li>\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0439 <code>JSON<\/code>, \u0442\u0435\u043a\u0441\u0442 \u0438\u043b\u0438 \u043d\u0435\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f;<\/li>\n<li>\u043e\u0442\u0432\u0435\u0442\u044b \u043d\u0430 GET-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0435\u0448 \u0438 \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043d\u0435\u0433\u043e \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0431\u0435\u0437 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0437\u0430\u043f\u0438\u0441\u044c \u0432 \u043a\u0435\u0448 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0439, \u043d\u043e \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439;<\/li>\n<li>\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441\u0442\u0440\u043e\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a <code>URL<\/code>;<\/li>\n<li><code>URL<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432;<\/li>\n<li>\u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0442\u043c\u0435\u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/li>\n<li>\u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e <code>URL<\/code> \u0438 \u0442\u043e\u043a\u0435\u043d\u0430 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u044d\u0442\u043e\u0433\u043e, \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">simpleFetch(options: string | object)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0433\u0434\u0435 <code>string<\/code> \u2014 \u044d\u0442\u043e <code>URL<\/code>, \u0430 <code>object<\/code> \u2014 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0421\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u044b \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ GET-\u0437\u0430\u043f\u0440\u043e\u0441 simpleFetch.get(url: string, options: object) \/\/ \u0438\u043b\u0438, \u0435\u0441\u043b\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u0431\u0430\u0437\u043e\u0432\u044b\u0439 URL simpleFetch.get(options: object)  \/\/ POST simpleFetch.post(url: string, body: any, options: object) \/\/ baseUrl simpleFetch.post(body: any, options: object)  \/\/ PUT simpleFetch.update(url: string, body: any, options: object) \/\/ baseUrl simpleFetch.update(body: any, options: object)  \/\/ DELETE simpleFetch.remove(url: string, options: object) \/\/ baseUrl simpleFetch.remove(options: object)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0435\u0442\u0442\u0435\u0440\u044b \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u0438 \u0442\u043e\u043a\u0435\u043d\u0430 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0442\u0430\u043a\u0438\u043c\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ baseUrl simpleFetch.baseUrl = 'https:\/\/example.com'  \/\/ authToken simpleFetch.authToken = token \/*  {    Authorization: 'Bearer [token]'  } *\/<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">simpleFetch.cancel()<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 (<code>options<\/code>) \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WindowOrWorkerGlobalScope\/fetch#parameters\">\u043e\u0431\u0449\u0438\u0435<\/a>, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0442\u043e\u0434;<\/li>\n<li>\u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435:<br \/> \n<ul>\n<li><code>customCache<\/code>: boolean \u2014 \u0435\u0441\u043b\u0438 <code>true<\/code>, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 GET-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0435\u0448. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0438\u0437 \u043a\u0435\u0448\u0430 \u0431\u0435\u0437 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438, \u0447\u0442\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>customCache<\/code> \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>false<\/code>. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>true<\/code>. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439;<\/li>\n<li><code>log<\/code>: boolean \u2014 \u0435\u0441\u043b\u0438 <code>true<\/code>, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u0435\u0448\u0430 \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>false<\/code>. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439;<\/li>\n<li><code>params<\/code>: object \u2014 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441\u0442\u0440\u043e\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a <code>URL<\/code>:<\/li>\n<li><code>key<\/code>: string<\/li>\n<li><code>value<\/code>: string<\/li>\n<li><code>handlers<\/code>: object \u2014 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0432\u043e\u0437\u043d\u0438\u043a\u0448\u0435\u0439 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u043e\u0442\u043c\u0435\u043d\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/li>\n<li><code>onSuccess<\/code>: function<\/li>\n<li><code>onError<\/code>: function<\/li>\n<li><code>onAbort<\/code>: function<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">{  method: 'GET',  headers: {    'Content-Type': 'application\/json'  },  referrerPolicy: 'no-referrer',  customCache: true,  log: false,  signal: new window.AbortController().signal }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0442\u0432\u0435\u0442<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u0432\u0435\u0442 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>data<\/code>: any | null \u2014 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438\u043b\u0438 <code>null<\/code>, \u0435\u0441\u043b\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430;<\/li>\n<li><code>error<\/code>: null | any \u2014 <code>null<\/code> \u043f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435, \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430 \u0438\u043b\u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/li>\n<li><code>info<\/code>: object \u2014 \u043e\u0431\u044a\u0435\u043a\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e:<br \/> \n<ul>\n<li><code>headers<\/code>: object \u2014 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u043e\u0442\u0432\u0435\u0442\u0430;<\/li>\n<li><code>status<\/code>: number \u2014 \u0441\u0442\u0430\u0442\u0443\u0441-\u043a\u043e\u0434 \u043e\u0442\u0432\u0435\u0442\u0430;<\/li>\n<li><code>statusText<\/code>: string \u2014 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435;<\/li>\n<li><code>url<\/code>: string \u2014 \u0430\u0434\u0440\u0435\u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0435\u043b\u044c\u044e \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043b\u044e\u0431\u043e\u0439 \u0446\u0435\u043d\u043e\u0439, \u0442.\u0435. \u0441 \u043b\u044e\u0431\u044b\u043c\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e <code>URL<\/code>, \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u043b\u044e\u0431\u044b\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432, \u0431\u0443\u0434\u044c \u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u0443\u0441\u043f\u0435\u0445\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u043e\u043b\u043e\u043c\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<h2 id=\"realizaciya-obertki\">\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u0438<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u0435\u0448\u0430 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u0440\u0430 \u0434\u043b\u044f \u043e\u0442\u043c\u0435\u043d\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const simpleFetchCache = new Map()  let simpleFetchController = new window.AbortController()<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u0435\u0448\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Map\"><code>Map<\/code><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u044b.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043c\u0435\u043d\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/AbortController\"><code>AbortController<\/code><\/a>. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439, \u043e\u043d\u0430 <a href=\"https:\/\/caniuse.com\/?search=AbortController\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const simpleFetch = async (options) => {   \/\/ \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0439 \u043a\u043e\u0434 \u043f\u0438\u0448\u0435\u043c \u0437\u0434\u0435\u0441\u044c }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u2014 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p><em>URL<\/em><\/p>\n<p>  <\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f <code>URL<\/code>:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>url<\/code>;<\/li>\n<li>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 <code>options<\/code> \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 <code>options<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u043e\u0439;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>url<\/code>;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u043b\u0438 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>url<\/code>;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f, \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 <code>url<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"javascript\">let url = ''  if (typeof options === 'string') {   url = options } else {   if (options?.url) {     url = options.url   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Operators\/Optional_chaining\"><code>\u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 (?.<\/code>)<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0442.\u0435. \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 <code>options &amp;&amp; options.url<\/code>. \u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 \u043f\u0440\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 <code>url<\/code> \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e <code>options<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0431\u0440\u043e\u0448\u0435\u043d\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u0443\u0442\u044c (<code>baseUrl<\/code>);<\/li>\n<li>\u0435\u0441\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d,<br \/> \n<ul>\n<li>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0438\u043c\u0435\u0435\u0442 \u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f <code>url<\/code> \u043a\u0430\u043a\u043e\u0435-\u043b\u0438\u0431\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u0440\u043e\u043c\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043b\u043e\u0436\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442, \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>baseUrl<\/code>;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u0438\u043c\u0435\u0435\u0442,<br \/> \n<ul>\n<li>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0441 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 <code>\/<\/code> \u0438\u043b\u0438 <code>?<\/code>;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f, \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>url<\/code> \u043a <code>baseUrl<\/code>;<\/li>\n<li>\u0438\u043d\u0430\u0447\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c \u0438\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>\/<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"javascript\">if (simpleFetch.baseUrl) {   if (!url) {     url = simpleFetch.baseUrl   } else {     url =       url.startsWith('\/') || url.startsWith('?')         ? `${simpleFetch.baseUrl}${url}`         : `${simpleFetch.baseUrl}\/${url}`   } }<\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u043b\u0438 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u043e\u0431\u044a\u0435\u043a\u0442 <code>params<\/code>;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f, \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 <code>?key1=val1&amp;key2=val2<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/Reduce\"><code>reduce()<\/code><\/a>:<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"javascript\">if (options?.params) {   url = Object.entries(options.params)     .reduce((a, [k, v]) => {         a += `&amp;${k}=${v}`         return a       }, url)     \/\/ \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b `&amp;` \u043d\u0430 \u0441\u0438\u043c\u0432\u043e\u043b `?`     .replace('&amp;', '?') }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 <code>simpleFetch()<\/code> \u0441 <code>baseUrl<\/code>, \u0440\u0430\u0432\u043d\u044b\u043c <code>https:\/\/example.com<\/code>, \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 <code>url: 'todos'<\/code> \u0438 <code>params: { limit: 3 }<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">simpleFetch.baseUrl = 'https:\/\/example.com'  simpleFetch({   url: 'todos',   params: {     limit: 3   } })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u043e\u0439 <code>URL<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">https:\/\/example.com\/todos?limit=3<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>URL<\/code> \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">url = window.decodeURI(url)<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 <code>URL<\/code> \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u043c \u043e\u0431 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0438 \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0430\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">if (!url) {   return console.error('URL not provided!') }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let _options = {   method: 'GET',   headers: {     'Content-Type': 'application\/json'   },   referrerPolicy: 'no-referrer',   customCache: true,   log: false,   signal: simpleFetchController.signal }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>signal<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/AbortController\/signal\"><code>AbortController.signal<\/code><\/a>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 <code>options<\/code> \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c <code>_options<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">if (typeof options === 'object') {   _options = {     ..._options,     ...options   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u043b\u0438 \u0432 <code>options<\/code> \u0442\u0435\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u0415\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a <code>Content-Type<\/code> \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>application\/json<\/code>, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u0441\u0442\u0440\u0438\u043d\u0433\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">if (   _options.body &amp;&amp;   _options.headers['Content-Type'] === 'application\/json' ) {   _options.body = JSON.stringify(_options.body) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u043b\u0438 <code>authToken<\/code>. \u0415\u0441\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0432 <code>_options.headers<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">if (simpleFetch.authToken) {   _options.headers['Authorization'] = `Bearer ${simpleFetch.authToken}` }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043e \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">if (_options.log) {   console.log(     `%c Options: ${JSON.stringify(_options, null, 2)}`,     'color: blue'   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0442\u0435\u043b\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043c <code>POST<\/code> \u0438\u043b\u0438 <code>PUT<\/code>. \u0415\u0441\u043b\u0438 \u0442\u0435\u043b\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u0435\u043c \u043e\u0431 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">if (   (_options.method === 'POST' || _options.method === 'PUT') &amp;&amp;   !_options.body ) {   console.warn('Body not provided!') }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043b\u0438 <code>options<\/code> \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0442\u043c\u0435\u043d\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 (<code>onAbort<\/code>), \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0435\u0435 \u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u0443\u044e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const handlers = options?.handlers  if (handlers?.onAbort) {  simpleFetchController.signal.addEventListener('abort', handlers.onAbort, {    once: true  }) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u043b\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0435\u0448. \u0415\u0441\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u0438 \u0432 \u043a\u0435\u0448\u0435 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441, \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u0437 \u043a\u0435\u0448\u0430 \u0438 \u043b\u0438\u0431\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 (<code>onSuccess<\/code>), \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0435\u043c\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u043b\u0438\u0431\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">if (   _options.method === 'GET' &amp;&amp;   _options.customCache &amp;&amp;   simpleFetchCache.has(url) ) {   const cachedData = simpleFetchCache.get(url)   return handlers?.onSuccess ? handlers.onSuccess(cachedData) : cachedData }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441, \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0441\u0442\u0430\u0442\u0443\u0441-\u043a\u043e\u0434 \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0438\u0437 \u043e\u0442\u0432\u0435\u0442\u0430 \u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">try {  const response = await fetch(url, defaultOptions)   const { status, statusText } = response   const info = {    \/\/ \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0432 \u0444\u043e\u0440\u043c\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430    headers: [...response.headers.entries()].reduce((a, [k, v]) => {      a[k] = v      return a    }, {}),    status,    statusText,    url: response.url  }   \/\/ ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u044b\u0445 <code>data<\/code>. \u0415\u0441\u043b\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a <code>Content-Type<\/code> \u043e\u0442\u0432\u0435\u0442\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043b\u043e\u0432\u043e <code>json<\/code>, \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c <code>JSON<\/code> \u0432 \u043e\u0431\u044a\u0435\u043a\u0442. \u0418\u043d\u0430\u0447\u0435, \u0435\u0441\u043b\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043b\u043e\u0432\u043e <code>text<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u0431\u044b\u043b\u043e \u0432\u044b\u0431\u0440\u043e\u0448\u0435\u043d\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435), \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u043e\u0442\u0432\u0435\u0442 \u0432 \u0442\u0435\u043a\u0441\u0442. \u0415\u0441\u043b\u0438 \u0432 \u0442\u0435\u043a\u0441\u0442\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f <code>Error:<\/code>, \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0438\u0437 \u043e\u0448\u0438\u0431\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0432 <code>data<\/code>. \u0418\u043d\u0430\u0447\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043e\u0442\u0432\u0435\u0442 \u0432 <code>data<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\"> const contentTypeHeader = response.headers.get('Content-Type')   if (contentTypeHeader) {    if (contentTypeHeader.includes('json')) {      data = await response.json()    } else if (contentTypeHeader.includes('text')) {      data = await response.text()       \/\/ \u0435\u0441\u043b\u0438 \u0438\u043c\u0435\u0435\u043c \u0434\u0435\u043b\u043e \u0441 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c,      if (data.includes('Error:')) {        const errorMessage = data          \/\/ \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435          .match(\/Error:.[^&lt;]+\/)[0]          \/\/ \u0443\u0434\u0430\u043b\u044f\u0435\u043c `Error:`          .replace('Error:', '')          \/\/ \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043b\u0438\u0448\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0440\u043e\u043a\u0438          .trim()         if (errorMessage) {          data = errorMessage        }      }    } else {      data = response    }  } else {    data = response  }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: <code>data<\/code> \u2014 \u044d\u0442\u043e \u043d\u0435 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441. \u041c\u044b \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432 \u044d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432\u0441\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e \u0432 \u043e\u0442\u0432\u0435\u0442: \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0443\u044e \u043e\u0448\u0438\u0431\u043a\u0443 \u0438\u043b\u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0434\u043b\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 <code>result<\/code>. \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043e\u0442\u0432\u0435\u0442\u0430 (<code>response.ok<\/code>) \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 \u0431\u044b\u043b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0443\u0441\u043f\u0435\u0448\u043d\u043e:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>GET<\/code>, \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432 \u043a\u0435\u0448 \u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u041c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u043b\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0435\u0448, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u0435\u0448 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043e, \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 (<code>onSuccess<\/code>), \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0435\u043c\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u043b\u0438\u0431\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043e, \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0448\u0438\u0431\u043e\u043a (<code>onError<\/code>), \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0435\u043c\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u043b\u0438\u0431\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0412 \u0431\u043b\u043e\u043a\u0435 <code>catch<\/code> \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043b\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0448\u0438\u0431\u043e\u043a (<code>onError<\/code>), \u0438 \u043b\u0438\u0431\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u043b\u0438\u0431\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c. \u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442 \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">  \/\/ ...    let result = null    \/\/ \u0437\u0430\u043f\u0440\u043e\u0441 \u0431\u044b\u043b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0443\u0441\u043f\u0435\u0448\u043d\u043e   if (response.ok) {     result = { data, error: null, info }      if (_options.method === 'GET') {       simpleFetchCache.set(url, result)        if (_options.log) {         console.log(simpleFetchCache)       }     }      if (_options.log) {       console.log(         `%c Result: ${JSON.stringify(result, null, 2)}`,         'color: green'       )     }      return handlers?.onSuccess ? handlers.onSuccess(result) : result   }    result = {     data: null,     error: data,     info   }    if (_options.log) {     console.log(`%c Result: ${JSON.stringify(result, null, 2)}`, 'color: red')   }    return handlers?.onError ? handlers.onError(result) : result } catch (err) {   if (handlers?.onError) {     handlers.onError(err)   }   console.error(err) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0448\u0442\u0440\u0438\u0445\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0433\u0435\u0442\u0442\u0435\u0440\u044b \u0438 \u0441\u0435\u0442\u0442\u0435\u0440\u044b \u0434\u043b\u044f <code>baseUrl<\/code> \u0438 <code>authToken<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">Object.defineProperties(simpleFetch, {   baseUrl: {     value: '',     writable: true,     enumerable: true   },   authToken: {     value: '',     writable: true,     enumerable: true   } })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0442\u043c\u0435\u043d\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">simpleFetch.cancel = () => {  simpleFetchController.abort()  simpleFetchController = new window.AbortController() }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em> \u043d\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 <code>AbortController<\/code>. \u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 <code>abort()<\/code>, \u0441\u0442\u0430\u0440\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0431\u0443\u0434\u0435\u0442 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">simpleFetch.get = (url, options) => {  \/\/ \u0441 `baseUrl` `simpleFetch.get()` \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 `url`,  \/\/ \u0442.\u0435. \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0438\u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0431\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432  if (typeof url === 'string') {    return simpleFetch({      url,      ...options    })  }  return simpleFetch({    ...url  }) }  simpleFetch.post = (url, body, options) => {  \/\/ \u0441 `baseUrl` `simpleFetch.post()` \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 `url`,  \/\/ \u0442.\u0435. \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0442\u0435\u043b\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438  \/\/ \u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0442\u0435\u043b\u043e\u043c,  \/\/ \u0438\u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0431\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432,  \/\/ \u043d\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c `POST`  if (typeof url === 'string') {    return simpleFetch({      url,      method: 'POST',      body,      ...options    })  }  return simpleFetch({    method: 'POST',    body: url,    ...body  }) }  simpleFetch.update = (url, body, options) => {  \/\/ \u0441 `baseUrl` `simpleFetch.update()` \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 `url`,  \/\/ \u0442.\u0435. \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0442\u0435\u043b\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438  \/\/ \u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0442\u0435\u043b\u043e\u043c,  \/\/ \u0438\u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0431\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432,  \/\/ \u043d\u043e \u0435\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c `PUT`  if (typeof url === 'string') {    return simpleFetch({      url,      method: 'PUT',      body,      ...options    })  }  return simpleFetch({    method: 'PUT',    body: url,    ...body  }) }  simpleFetch.remove = (url, options) => {  \/\/ \u0441 `baseUrl` `simpleFetch.remove()` \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 `url`,  \/\/ \u0442.\u0435. \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438  \/\/ \u0438\u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0431\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432,  \/\/ \u043d\u043e \u0435\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c `DELETE`  if (typeof url === 'string') {    return simpleFetch({      url,      method: 'DELETE',      ...options    })  }  return simpleFetch({    ...url  }) }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"testirovanie-instrumenta\">\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430<\/h2>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0434\u0432\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430: \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u0444\u0438\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \u0411\u0414 \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/HTTP\/CORS\"><code>CORS<\/code><\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0443\u0442\u0438\u043b\u0438\u0442.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u043d\u0435\u0435, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">mkdir simple-fetch cd !$  yarn init -y # or npm init -y  yarn add concurrently cors express json-server nodemon open-cli # or npm i ...<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/concurrently\"><code>concurrently<\/code><\/a> \u2014 \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 \u0432 <code>package.json<\/code>;<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/cors\"><code>cors<\/code><\/a> \u2014 \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 <code>CORS<\/code>. \u0417\u0434\u0435\u0441\u044c \u0432\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0443 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u044d\u0442\u043e\u0439 \u0443\u0442\u0438\u043b\u0438\u0442\u043e\u0439;<\/li>\n<li><a href=\"https:\/\/expressjs.com\/ru\/\"><code>express<\/code><\/a> \u2014 Node.js-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u044e\u0449\u0438\u0439 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432;<\/li>\n<li><a href=\"https:\/\/github.com\/typicode\/json-server\"><code>json-server<\/code><\/a> \u2014 \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f <code>API<\/code> \u043f\u0443\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0438\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0411\u0414;<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/nodemon\"><code>nodemon<\/code><\/a> \u2014 \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043f\u0440\u0438 \u0432\u043d\u0435\u0441\u0435\u043d\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b;<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/open-cli\"><code>open-cli<\/code><\/a> \u2014 \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u0430\u0434\u0440\u0435\u0441\u0443.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u0411\u0414, \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\"scripts\": {  \"db\": \"json-server -w todos.json -p 5000 -m middleware.js\",  \"server\": \"open-cli http:\/\/localhost:3000 &amp;&amp; nodemon server.js\",  \"dev\": \"concurrently \\\"yarn db\\\" \\\"yarn server\\\"\" }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u043e\u043a\u0430 <code>json-server -w todos.json -p 5000 -m middleware.js<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u0411\u0414 <code>todos.json<\/code> (\u0438 \u0435\u0433\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430) \u043d\u0430 \u043f\u043e\u0440\u0442\u0443 <code>5000<\/code> \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0430 (\u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f), \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 <code>middleware.js<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">- public - \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u0441\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438  - scripts    - actions.js - \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438    - index.js - \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a    - utils.js - \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430  - index.html  - style.css - middleware.js - \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a \u0434\u043b\u044f `json-server` - server.js - \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 - simpleFetch.js - \u043d\u0430\u0448\u0430 \u043e\u0431\u0435\u0440\u0442\u043a\u0430 - todos.json - \u0444\u0438\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0411\u0414<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0448\u0430 \u0444\u0438\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0411\u0414 (<code>todos.json<\/code>) \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 4 \u0437\u0430\u0434\u0430\u0447:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">{  \"todos\": [    {      \"id\": \"1\",      \"text\": \"Eat\",      \"done\": true    },    {      \"id\": \"2\",      \"text\": \"Code\",      \"done\": true    },    {      \"id\": \"3\",      \"text\": \"Sleep\",      \"done\": false    },    {      \"id\": \"4\",      \"text\": \"Repeat\",      \"done\": false    }  ] }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u0435 \u0434\u043b\u044f <code>json-server<\/code> \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0434\u0435\u043a\u043e\u0434\u0438\u0440\u0443\u0435\u043c <code>URL<\/code> \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/nodejs.org\/api\/querystring.html\"><code>querystring<\/code><\/a>;<\/li>\n<li>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043b\u0438 <code>URL<\/code> \u0441\u043b\u043e\u0432\u043e <code>\u0437\u0430\u0434\u0430\u0447\u0438<\/code>. \u0415\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442, \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u043d\u0430 <code>todos<\/code>;<\/li>\n<li>\u0435\u0441\u043b\u0438 <code>URL<\/code> \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>todos\/private-request<\/code>, \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e\u043a\u0435\u043d \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438. \u0415\u0441\u043b\u0438 \u0442\u043e\u043a\u0435\u043d \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u0442\u0430\u0442\u0443\u0441-\u043a\u043e\u0434 <code>403<\/code>. \u0415\u0441\u043b\u0438 \u0442\u043e\u043a\u0435\u043d \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0435 \u043e\u0442 <code>token<\/code>, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u0442\u0430\u0442\u0443\u0441-\u043a\u043e\u0434 <code>403<\/code>. \u0415\u0441\u043b\u0438 \u0442\u043e\u043a\u0435\u043d \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>token<\/code>, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043e\u0442\u0432\u0435\u0442 <code>{ message: 'Private response' }<\/code> \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 <code>JSON<\/code>;<\/li>\n<li>\u0435\u0441\u043b\u0438 <code>URL<\/code> \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>\/todos\/too-long<\/code>, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0442\u0430\u0439\u043c\u0435\u0440 \u0441 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u0441\u0442\u0430\u0442\u0443\u0441-\u043a\u043e\u0434\u0430 <code>200<\/code> \u0447\u0435\u0440\u0435\u0437 <code>3<\/code> \u0441\u0435\u043a\u0443\u043d\u0434\u044b. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043b\u044c\u0448\u0435 <code>2<\/code> \u0441\u0435\u043a\u0443\u043d\u0434;<\/li>\n<li>\u0435\u0441\u043b\u0438 <code>URL<\/code> \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>\/todos\/custom-error<\/code>, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043e\u0442\u0432\u0435\u0442 \u0441\u0442\u0430\u0442\u0443\u0441-\u043a\u043e\u0434 <code>400<\/code> \u0438 <code>{ message: 'Custom error' }<\/code> \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 <code>JSON<\/code>;<\/li>\n<li>\u0435\u0441\u043b\u0438 <code>URL<\/code> \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>\/todos\/throw-exception<\/code>, \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c <code>Error!<\/code>;<\/li>\n<li>\u0435\u0441\u043b\u0438 <code>URL<\/code> \u0438\u043c\u0435\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u0430\u043b\u044c\u0448\u0435<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"javascript\">const querystring = require('querystring')  module.exports = (req, res, next) => {  req.url = querystring.unescape(req.url)   if (req.url.includes('\u0437\u0430\u0434\u0430\u0447\u0438')) {    req.url = req.url.replace('\u0437\u0430\u0434\u0430\u0447\u0438', 'todos')  }   switch (req.url) {    case '\/todos\/private-request':      const authToken = req.headers.authorization?.split('Bearer ')[1]       if (!authToken) {        return res.sendStatus(403)      }       if (authToken !== 'token') {        return res.sendStatus(403)      } else {        return res.status(200).json({ message: 'Private response' })      }    case '\/todos\/too-long':      const timerId = setTimeout(() => {        res.sendStatus(200)        clearTimeout(timerId)      }, 3000)      break    case '\/todos\/custom-error':      return res.status(400).json({ message: 'Custom error!' })    case '\/todos\/throw-exception':      throw new Error('Error!')    default:      next()  } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>server.js<\/code> \u043c\u044b \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 Express-\u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const express = require('express') const cors = require('cors')  const app = express()  \/\/ \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c `CORS` app.use(cors()) \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0441\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 app.use(express.static('public')) \/\/ \u044d\u0442\u043e\u0442 \u0440\u043e\u0443\u0442 \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a `simpleFetch.js` \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 `public` app.get('*', (req, res) => {  res.sendFile(`${__dirname}${req.url}`) })  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u0440\u0442 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 const PORT = process.env.PORT || 3000 app.listen(PORT, () => {  console.log('Server ready ') })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0443.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 <code>index.html<\/code>. \u0412 <code>head<\/code> \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c Google-\u0448\u0440\u0438\u0444\u0442, <code>Bootstrap<\/code>, \u0441\u0442\u0438\u043b\u0438 \u0438 \u043d\u0430\u0448\u0443 \u043e\u0431\u0435\u0440\u0442\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;link  href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat&amp;display=swap\"  rel=\"stylesheet\" \/> &lt;link  href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\"  rel=\"stylesheet\"  integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\"  crossorigin=\"anonymous\" \/> &lt;link rel=\"stylesheet\" href=\"style.css\" \/> &lt;script src=\"simpleFetch.js\">&lt;\/script><\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>body<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439. <em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em> \u043d\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b <code>data-for<\/code> \u043a\u043d\u043e\u043f\u043e\u043a. \u0421 \u0438\u0445 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u043a\u0430\u043a\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0431\u044b\u043b\u0430 \u043d\u0430\u0436\u0430\u0442\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=\"container\">  &lt;h1 class=\"text-center mt-4\">Simple Fetch&lt;\/h1>  &lt;div class=\"d-flex\">    &lt;!-- \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a -->    &lt;div class=\"buttons\">      &lt;!-- \u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447 \u0438\u0437 \u043a\u0435\u0448\u0430 -->      &lt;div class=\"d-flex\">        &lt;button class=\"btn btn-primary\" data-for=\"get_cached_todos\">          Get        &lt;\/button>        &lt;p>todos from cache&lt;\/p>      &lt;\/div>       &lt;!-- ... \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 -->      &lt;div class=\"d-flex\">        &lt;button class=\"btn btn-primary\" data-for=\"get_todos_from_server\">          Get        &lt;\/button>        &lt;p>todos from server&lt;\/p>      &lt;\/div>       &lt;!-- \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0432\u044b\u0445 \u0434\u0432\u0443\u0445 \u0437\u0430\u0434\u0430\u0447 \u0441 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u043e\u0439 \u043f\u043e \u0443\u0431\u044b\u0432\u0430\u043d\u0438\u044e -->      &lt;div class=\"d-flex\">        &lt;button class=\"btn btn-primary\" data-for=\"get_first_two_todos\">          Get        &lt;\/button>        &lt;p>first two todos desc&lt;\/p>      &lt;\/div>       &lt;!-- \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043e `id` -->      &lt;div class=\"d-flex\">        &lt;button class=\"btn btn-primary\" data-for=\"get_todo_by_id\">          Get        &lt;\/button>        &lt;label>todo by ID&lt;\/label>        &lt;input type=\"text\" class=\"todo_id form-control\" value=\"1\" \/>      &lt;\/div>       &lt;!-- \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0411\u0414 \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 -->      &lt;div class=\"d-flex\">        &lt;button class=\"btn btn-success\" data-for=\"add_todo\">Add&lt;\/button>        &lt;input          type=\"text\"          class=\"todo_text form-control\"          value=\"New todo\"        \/>      &lt;\/div>       &lt;!-- \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0442\u043e\u043a\u0435\u043d\u0430 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 -->      &lt;div class=\"d-flex\">        &lt;button class=\"btn btn-primary\" data-for=\"set_auth_token\">          Set        &lt;\/button>        &lt;p>auth token&lt;\/p>      &lt;\/div>       &lt;!-- \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430 -->      &lt;div class=\"d-flex\">        &lt;button class=\"btn btn-warning\" data-for=\"send_private_request\">          Send        &lt;\/button>        &lt;p>private request&lt;\/p>      &lt;\/div>       &lt;!-- \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043e\u043b\u0433\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 -->      &lt;div class=\"d-flex\">        &lt;button class=\"btn btn-warning\" data-for=\"send_long_request\">          Send        &lt;\/button>        &lt;p>too long request&lt;\/p>      &lt;\/div>       &lt;!-- \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438 -->      &lt;div class=\"d-flex\">        &lt;button class=\"btn btn-danger\" data-for=\"get_custom_error\">          Get        &lt;\/button>        &lt;p>custom error&lt;\/p>      &lt;\/div>       &lt;!-- \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043f\u0440\u0438\u0432\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u043a \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043d\u0438\u044e \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f -->      &lt;div class=\"d-flex\">        &lt;button class=\"btn btn-danger\" data-for=\"throw_exception\">          Throw        &lt;\/button>        &lt;p>exception&lt;\/p>      &lt;\/div>    &lt;\/div>     &lt;!-- \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 -->    &lt;ul class=\"result list-group\">&lt;\/ul>  &lt;\/div> &lt;\/div><\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0441 \u0442\u0438\u043f\u043e\u043c <code>module<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;script>   const container = document.querySelector('.container')   const buttons = container.querySelector('.buttons')   const result = container.querySelector('.result')   const idInput = container.querySelector('.todo_id')   const textInput = container.querySelector('.todo_text') &lt;\/script> &lt;script src=\"scripts\/index.js\" type=\"module\">&lt;\/script><\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0441\u0442\u0438\u043b\u0438 <code>Boostsrap<\/code> \u0432 <code>style.css<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">* {  font-family: 'Montserrat', sans-serif; }  .container {  max-width: 760px; }  .d-flex {  margin: 0.15rem 0;  padding: 0.15rem 0;  align-items: center;  gap: 1rem; }  p {  margin: 0; }  .form-control {  width: auto; }  .list-group {  min-width: 280px; }  .list-group-item {  align-items: center;  justify-content: space-between; }  .list-group-item input {  margin-left: 0.5rem;  width: 15px;  height: 15px; }  .list-group-item .btn {  margin-right: 0.5rem; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>scripts\/utils.js<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0443\u0442\u0438\u043b\u0438\u0442\u0443 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 \u0438 \u0435\u0433\u043e \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const createTodo = (todo) => {   const template = \/*html*\/ `     &lt;li       data-id=\"${todo.id}\"       class=\"todo_item list-group-item d-flex\"     >       &lt;input         type=\"checkbox\"         ${todo.done ? 'checked' : ''}         class=\"btn\"         data-for=\"update_todo\"       \/>       &lt;p>${todo.text}&lt;\/p>       &lt;button         class=\"btn btn-sm\"         data-for=\"remove_todo\"       >        &lt;\/button>     &lt;\/li>   `   result.insertAdjacentHTML('beforeend', template) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em> \u043d\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b <code>data-id<\/code> \u0442\u0435\u0433\u0430 <code>li<\/code> \u0438 <code>data-for<\/code> \u0442\u0435\u0433\u043e\u0432 <code>input<\/code> \u0438 <code>button<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <code>scripts\/index.js<\/code> \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u0437 <code>actions.js<\/code>;<\/li>\n<li>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438, \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u044d\u0448;<\/li>\n<li>\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a &#171;\u043a\u043b\u0438\u043a\u0430&#187;, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a CSS-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0446\u0435\u043b\u0438 \u043a\u043b\u0438\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 <code>.btn<\/code>;<\/li>\n<li>\u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a, \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0430\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430;<\/li>\n<li>\u043e\u0447\u0438\u0449\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432;<\/li>\n<li>\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0431\u044b\u043b\u0430 \u043d\u0430\u0436\u0430\u0442\u0430, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e.<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 import * as A from '.\/actions.js'  \/\/ \u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \/\/ \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043a\u0435\u0448 \/\/ \u0412\u0430\u0436\u043d\u043e: \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043f\u0435\u0440\u0435\u0434 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0435\u0448\u0430 const cacheRefresh = ['add_todo', 'update_todo', 'remove_todo']  container.addEventListener('click', async ({ target }) => {  if (!target.classList.contains('btn')) return   result.innerHTML = ''   switch (target.dataset.for) {    case 'get_cached_todos':      return A.getCachedTodos()    case 'get_todos_from_server':      return A.getTodosFromServer()    case 'get_todo_by_id':      \/\/ \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e `input`      return A.getTodoById(idInput.value)    case 'get_first_two_todos':      return A.getFirstTwoTodosDesc()    case 'add_todo':      \/\/ \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e `input`      await A.addTodo(textInput.value)      break    case 'update_todo': {      \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438      const { id } = target.closest('.todo_item').dataset      \/\/ \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0432 \u0411\u0414      await A.updateTodo(id)      break    }    case 'remove_todo': {      \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0443\u0434\u0430\u043b\u044f\u0435\u043c\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438      const { id } = target.closest('.todo_item').dataset      \/\/ \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0435\u0435 \u0438\u0437 \u0411\u0414      await A.removeTodo(id)      break    }    case 'set_auth_token':      return A.setAuthToken()    case 'send_private_request':      return A.sendPrivateRequest()    case 'send_long_request':      return A.sendTooLongRequest()    case 'get_custom_error':      return A.getCustomError()    case 'throw_exception':      return A.throwException()  }   if (cacheRefresh.includes(target.dataset.for)) {    \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u0435\u0448    A.getTodosFromServer()  } })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435, \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c <code>scripts\/actions.js<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0443\u0442\u0438\u043b\u0438\u0442\u0443 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0437\u0430\u0434\u0430\u0447\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c <code>baseUrl<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { createTodo } from '.\/utils.js'  simpleFetch.baseUrl = 'http:\/\/localhost:5000\/\u0437\u0430\u0434\u0430\u0447\u0438'<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (\u0441 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c) \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0437\u0430\u0434\u0430\u0447:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const getCachedTodos = async () => {  \/\/ GET-\u0437\u0430\u043f\u0440\u043e\u0441  const response = await simpleFetch.get({    \/\/ \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435    log: true  })   response.data.forEach((todo) => {    createTodo(todo)  }) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0431\u0435\u0437 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u043e \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const getTodosFromServer = async () => {  \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a  const onSuccess = ({ data }) => {    data.forEach((todo) => {      createTodo(todo)    })  }   \/\/ `.get()` \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c  await simpleFetch({    \/\/ \u0431\u0435\u0437 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f,    customCache: false,    \/\/ \u043d\u043e \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c    handlers: { onSuccess }  }) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043e <code>id<\/code> \u0438 \u0435\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const getTodoById = async (todoId) => {  const { data } = await simpleFetch.get(todoId)   createTodo(data) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0432\u044b\u0445 \u0434\u0432\u0443\u0445 \u0437\u0430\u0434\u0430\u0447, \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043f\u043e <code>id<\/code> \u0438 \u043f\u043e \u0443\u0431\u044b\u0432\u0430\u043d\u0438\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const getFirstTwoTodosDesc = async () => {  const onSuccess = ({ data }) => {    data.forEach((todo) => {      createTodo(todo)    })  }   await simpleFetch({    \/\/ \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b    params: {      _sort: 'id',      _order: 'desc',      _limit: 2    },    handlers: { onSuccess },    \/\/ \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435    log: true  }) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const addTodo = async (text) => {  \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c `id`  const id = Math.random().toString(16).replace('0.', '')   \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0443  const todo = {    id,    text,    done: false  }   await simpleFetch.post(todo) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const updateTodo = async (todoId) => {  \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u043e `id` \u0431\u0435\u0437 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f  const { data: existingTodo } = await simpleFetch.get(todoId, {    customCache: false  })  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 -  \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u0434\u0430\u0447\u0438  const newTodo = { ...existingTodo, done: !existingTodo.done }   await simpleFetch.update(todoId, newTodo) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const removeTodo = async (todoId) => {  await simpleFetch.remove(todoId) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0442\u043e\u043a\u0435\u043d\u0430 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const setAuthToken = () => {  simpleFetch.authToken = 'token' }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const sendPrivateRequest = async () => {  const { data, error } = await simpleFetch.get('\/private-request', {    customCache: false,    log: true  })   if (error) {    console.error(error)  } else {    console.log(data)  } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043e\u043b\u0433\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const sendTooLongRequest = async () => {  \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0442\u043c\u0435\u043d\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430  const onAbort = () => {    console.log('Request aborted!')  }  \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0448\u0438\u0431\u043a\u0438  const onError = (err) => {    console.error(err.message)  }   simpleFetch({    url: '\/too-long',    handlers: {      onAbort,      onError    }  })   const timerId = setTimeout(() => {    \/\/ \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u0447\u0435\u0440\u0435\u0437 2 \u0441\u0435\u043a \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430    simpleFetch.cancel()    clearTimeout(timerId)  }, 2000) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const getCustomError = async () => {  const response = await simpleFetch('custom-error')   console.log(response.error) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const throwException = async () => {  const { error } = await simpleFetch('throw-exception')   console.log(error) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0445\u043e\u0434\u044f\u0441\u044c \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>yarn dev<\/code> \u0438\u043b\u0438 <code>npm run dev<\/code> \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432 \u0434\u043b\u044f \u0411\u0414 \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/bt\/5h\/3j\/bt5h3jeta6ppia1xoscz5ywhoja.png\" data-src=\"https:\/\/habrastorage.org\/webt\/bt\/5h\/3j\/bt5h3jeta6ppia1xoscz5ywhoja.png\"\/>  <\/p>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0438 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0441 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/kt\/qa\/j8\/ktqaj8jhm91lhyfjcfylty8rrne.png\" data-src=\"https:\/\/habrastorage.org\/webt\/kt\/qa\/j8\/ktqaj8jhm91lhyfjcfylty8rrne.png\"\/>  <\/p>\n<p>  \u041f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u0437 \u043a\u0435\u0448\u0430 \u2014 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u0441\u043b\u0443\u0436\u0438\u0442 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 <code>URL<\/code> \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043e\u0442 <code>json-server<\/code> \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0442\u0435\u043c, \u0447\u0442\u043e \u0437\u0430\u0434\u0430\u0447\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0443\u0431\u044b\u0432\u0430\u043d\u0438\u044e:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/0l\/f-\/tc\/0lf-tcovzc2uaxj92zjfkylndvu.png\" data-src=\"https:\/\/habrastorage.org\/webt\/0l\/f-\/tc\/0lf-tcovzc2uaxj92zjfkylndvu.png\"\/>  <\/p>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/8i\/wb\/of\/8iwbofhz4upwfufr4viylggw2u4.png\" data-src=\"https:\/\/habrastorage.org\/webt\/8i\/wb\/of\/8iwbofhz4upwfufr4viylggw2u4.png\"\/>  <\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/r2\/sv\/2s\/r2sv2sthtd9tgsqrjzi98mfjv80.png\" data-src=\"https:\/\/habrastorage.org\/webt\/r2\/sv\/2s\/r2sv2sthtd9tgsqrjzi98mfjv80.png\"\/>  <\/p>\n<p>  \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/mr\/pg\/tl\/mrpgtljwlghroheielhq8sxfqgw.png\" data-src=\"https:\/\/habrastorage.org\/webt\/mr\/pg\/tl\/mrpgtljwlghroheielhq8sxfqgw.png\"\/>  <\/p>\n<p>  \u0418 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0435\u0435 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0431\u0443\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/pc\/_b\/_z\/pc_b_zkkgbnf9tvnrjzh4tddjnk.png\" data-src=\"https:\/\/habrastorage.org\/webt\/pc\/_b\/_z\/pc_b_zkkgbnf9tvnrjzh4tddjnk.png\"\/>  <\/p>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0442\u0430\u0442\u0443\u0441-\u043a\u043e\u0434 <code>403<\/code> \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 <code>Forbidden<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0442\u043e\u043a\u0435\u043d \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u043d\u043e\u0432\u0430:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/rp\/he\/7y\/rphe7y81z0ejtlgk3puhdsljjfq.png\" data-src=\"https:\/\/habrastorage.org\/webt\/rp\/he\/7y\/rphe7y81z0ejtlgk3puhdsljjfq.png\"\/>  <\/p>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c <code>{ message: 'Private response' }<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043e\u043b\u0433\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/c3\/ux\/il\/c3uxilz3c9gqvck97u2otdhhfzq.png\" data-src=\"https:\/\/habrastorage.org\/webt\/c3\/ux\/il\/c3uxilz3c9gqvck97u2otdhhfzq.png\"\/>  <\/p>\n<p>  \u0427\u0435\u0440\u0435\u0437 2 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0442\u043c\u0435\u043d\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0443\u044e \u043e\u0448\u0438\u0431\u043a\u0443:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/zf\/ix\/rg\/zfixrgucmo5r9zm_cljd7p9k5ki.png\" data-src=\"https:\/\/habrastorage.org\/webt\/zf\/ix\/rg\/zfixrgucmo5r9zm_cljd7p9k5ki.png\"\/>  <\/p>\n<p>  \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/7e\/cf\/ib\/7ecfibjl9smag8scsslqiaes624.png\" data-src=\"https:\/\/habrastorage.org\/webt\/7e\/cf\/ib\/7ecfibjl9smag8scsslqiaes624.png\"\/>  <\/p>\n<p>  \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u043d\u0430\u0448 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u0434 \u043d\u0438\u043c \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438. \u041a\u0440\u0443\u0442\u043e!<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0437\u0440\u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u0440\u0435\u043c\u044f \u0438 \u0443\u0437\u043d\u0430\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0435 \u0434\u043b\u044f \u0441\u0435\u0431\u044f. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0434\u043d\u044f!<\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<p><a href=\"https:\/\/timeweb.com\/ru\/?utm_source=habr&amp;utm_medium=banner&amp;utm_campaign=10S&amp;utm_content=low\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/wo\/qf\/6c\/woqf6cweprtwtuq2m7jch92h5wk.png\" data-src=\"https:\/\/habrastorage.org\/webt\/wo\/qf\/6c\/woqf6cweprtwtuq2m7jch92h5wk.png\"\/><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/571252\/\"> https:\/\/habr.com\/ru\/articles\/571252\/<\/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-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/oz\/vy\/_a\/ozvy_a-kefgzvfo95sef6pdfpza.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/oz\/vy\/_a\/ozvy_a-kefgzvfo95sef6pdfpza.jpeg\" data-blurred=\"true\"\/>  <\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430, \u0441\u0443\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043d\u0430\u0434 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\"><code>Fetch API<\/code><\/a> \u0434\u043b\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c.<\/p>\n<p>  <\/p>\n<p><strong>\u0421 \u0447\u0435\u0433\u043e \u0432\u0441\u0435 \u043d\u0430\u0447\u0430\u043b\u043e\u0441\u044c?<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0447\u0438\u0442\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u044e Kent C. Dodds <a href=\"https:\/\/kentcdodds.com\/blog\/replace-axios-with-a-simple-custom-fetch-wrapper\">&#171;Replace axios with a simple custom fetch wrapper&#187;<\/a>, \u0438\u0437\u0443\u0447\u0438\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0445 \u0443\u0442\u0438\u043b\u0438\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u0440\u0435\u0448\u0438\u043b, \u0447\u0442\u043e \u043c\u043e\u0433\u0443 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435. \u041e \u0442\u043e\u043c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u0435 \u044d\u0442\u043e \u0443\u0434\u0430\u043b\u043e\u0441\u044c, \u0441\u0443\u0434\u0438\u0442\u0435 \u0441\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0441\u044b\u043b\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f <a href=\"https:\/\/github.com\/harryheman\/simple-fetch\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0435\u0440\u0442\u043a\u0430 \u0432 \u0432\u0438\u0434\u0435 npm-\u043f\u0430\u043a\u0435\u0442\u0430 \u2014 <a href=\"https:\/\/www.npmjs.com\/package\/very-simple-fetch\"><code>very-simple-fetch<\/code><\/a> (\u0445\u043e\u0442\u0435\u043b \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e <code>simple-fetch<\/code>, \u043d\u043e \u044d\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043d\u044f\u0442\u043e).<\/p>\n<p>  <\/p>\n<p>\u041d\u0435\u0442 \u043f\u0440\u0435\u0434\u0435\u043b\u0430 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u0443 \u0438 \u043d\u0435 \u043e\u0448\u0438\u0431\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0442, \u043a\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043a\u0440\u0438\u0442\u0438\u043a\u0435, \u043b\u044e\u0431\u044b\u043c \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f\u043c \u0438 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c \u043f\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430: \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u0440\u0435\u043a\u0432\u0435\u0441\u0442\u044b \u0438\u043b\u0438 \u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043b\u0438\u0447\u043a\u0443.<\/p>\n<p>  <\/p>\n<p><strong>\u0427\u0442\u043e \u043d\u0430\u0441\u0447\u0435\u0442 <code>Axios<\/code>?<\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0448\u0430 \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 <a href=\"https:\/\/www.npmjs.com\/package\/axios\"><code>axios<\/code><\/a>. \u042d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e <code>axios<\/code> \u2014 \u043b\u0443\u0447\u0448\u0438\u0439 \u0438\u0437 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u043c\u043d\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u041e\u043d \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u0430\u043a \u0438 \u0432 <code>Node.js<\/code>. \u0411\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 <code>axios<\/code> \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043d\u0430\u043c \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0432\u0441\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u0435\u0441\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u044d\u0442\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c. \u0415\u0441\u043b\u0438 \u0432 \u0446\u0438\u0444\u0440\u0430\u0445, \u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440 <code>axios<\/code> \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 371 \u041a\u0431, \u0430 \u0440\u0430\u0437\u043c\u0435\u0440 <code>very-simple-fetch<\/code> \u2014 9.33 \u041a\u0431.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-408022","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/408022","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=408022"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/408022\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=408022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=408022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=408022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}