{"id":63380,"date":"2024-04-16T00:21:08","date_gmt":"2024-04-15T20:51:08","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/angulars-17-httpclient-complete-tutorial-2eao\/"},"modified":"2024-04-16T00:21:08","modified_gmt":"2024-04-15T20:51:08","slug":"angulars-17-httpclient-complete-tutorial-2eao","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/angulars-17-httpclient-complete-tutorial-2eao\/","title":{"rendered":"Angular&#8217;s 17 HttpClient Complete Tutorial &#8211; DEV Community"},"content":{"rendered":"<div data-article-id=\"1823571\" id=\"article-body\">\n<p>Angular \u06a9\u0647 \u06cc\u06a9 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u062c\u0644\u0648\u06cc\u06cc \u0627\u0633\u062a\u060c \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u0642\u0631\u0627\u0631\u06cc \u0627\u0631\u062a\u0628\u0627\u0637 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0627 \u0633\u0631\u0648\u0631\u0647\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u0645\u062c\u0647\u0632 \u0645\u06cc \u06a9\u0646\u062f.  \u06cc\u06a9\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc HttpClient \u0627\u0633\u062a \u06a9\u0647 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u0633\u0631\u0648\u0631\u0647\u0627 \u06cc\u0627 \u0627\u0631\u0633\u0627\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0647 \u0633\u0631\u0648\u0631\u0647\u0627 \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0628\u0647 \u062f\u0631\u06a9 \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a \u06a9\u0647 HttpClient \u0686\u06cc\u0633\u062a \u0648 \u0686\u06af\u0648\u0646\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0624\u062b\u0631 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 Angular \u062e\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>HttpClient<\/strong> \u0627\u0628\u0632\u0627\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u0633\u0637 Angular \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u062f\u0631 \u0628\u0631\u0642\u0631\u0627\u0631\u06cc \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0633\u0631\u0648\u0631\u0647\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f.  \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u0633\u0631\u0648\u0631\u0647\u0627 \u06cc\u0627 \u0627\u0631\u0633\u0627\u0644 \u062f\u0627\u062f\u0647 \u0628\u0647 \u0633\u0631\u0648\u0631\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc HttpClient \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0634\u0627\u0645\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0622\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0627\u0633\u062a.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0628\u0627 \u0645\u062b\u0627\u0644 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/angulars-17-httpclient-complete-tutorial-2eao\/#1_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_HttpClient_%D8%A7%D8%B2_%D8%B7%D8%B1%DB%8C%D9%82_%D8%AA%D8%B2%D8%B1%DB%8C%D9%82_%D9%88%D8%A7%D8%A8%D8%B3%D8%AA%DA%AF%DB%8C\" >1. \u0627\u0631\u0627\u0626\u0647 HttpClient \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/angulars-17-httpclient-complete-tutorial-2eao\/#2_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_HttpClient\" >2. \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc HttpClient:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/angulars-17-httpclient-complete-tutorial-2eao\/#%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_JSON\" >\u062f\u0631 \u062d\u0627\u0644 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc JSON<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/angulars-17-httpclient-complete-tutorial-2eao\/#%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D8%A7%D9%86%D9%88%D8%A7%D8%B9_%D8%AF%DB%8C%DA%AF%D8%B1_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7\" >\u0648\u0627\u06a9\u0634\u06cc \u0627\u0646\u0648\u0627\u0639 \u062f\u06cc\u06af\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/angulars-17-httpclient-complete-tutorial-2eao\/#%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D9%88%D8%B6%D8%B9%DB%8C%D8%AA_%D8%B3%D8%B1%D9%88%D8%B1\" >\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0633\u0631\u0648\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/angulars-17-httpclient-complete-tutorial-2eao\/#%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%AE%D8%B7%D8%A7%D9%87%D8%A7\" >\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627\u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/angulars-17-httpclient-complete-tutorial-2eao\/#%D9%85%D8%AB%D8%A7%D9%84\" >\u0645\u062b\u0627\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/angulars-17-httpclient-complete-tutorial-2eao\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_HttpClient_%D8%A7%D8%B2_%D8%B7%D8%B1%DB%8C%D9%82_%D8%AA%D8%B2%D8%B1%DB%8C%D9%82_%D9%88%D8%A7%D8%A8%D8%B3%D8%AA%DA%AF%DB%8C\"><\/span>\n<p>  1. \u0627\u0631\u0627\u0626\u0647 HttpClient \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f HttpClient \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f.  \u0627\u06cc\u0646 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062f\u0631 \u0641\u0627\u06cc\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f (<strong>app.config.ts<\/strong>).<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ app.config.ts\nimport { ApplicationConfig } from '@angular\/core';\nimport { provideHttpClient } from '@angular\/common\/http';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHttpClient(),\n  ]\n};\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06af\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0627\u0632 \u0628\u0648\u062a \u0627\u0633\u062a\u0631\u067e \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 NgModule \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f provideHttpClient \u0631\u0627 \u062f\u0631 \u0622\u0631\u0627\u06cc\u0647 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 NgModule \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ app.module.ts\nimport { NgModule } from '@angular\/core';\nimport { provideHttpClient } from 'somewhere';\n\n@NgModule({\n  providers: [\n    provideHttpClient(),\n  ],\n  \/\/ ... other application configuration\n})\nexport class AppModule {}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646\u060c HttpClient \u0628\u0631\u0627\u06cc \u062a\u0632\u0631\u06cc\u0642 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u060c \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627 \u06cc\u0627 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0627\u0633\u062a.<\/p>\n<p>\u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 HttpClient \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u062a\u0632\u0631\u06cc\u0642 \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u060c \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u0634\u0648\u062f \u062e\u062f\u0645\u0627\u062a \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0648 \u062a\u0632\u0631\u06cc\u0642\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u0646\u0637\u0642 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0627\u06cc\u0632\u0648\u0644\u0647 \u0648 \u0645\u062d\u0635\u0648\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ data.service.ts\nimport { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\n\n@Injectable({ providedIn: 'root' })\nexport class DataService {\n  constructor(private http: HttpClient) {\n    \/\/ This service can now make HTTP requests via `this.http`.\n  }\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"2_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_HttpClient\"><\/span>\n<p>  2. \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc HttpClient:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc HttpClient \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u0627\u0631\u0627\u0626\u0647 \u0622\u0646 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>\u0628\u0627 \u0648\u0627\u06a9\u0634\u06cc:<\/strong><br \/>\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc HttpClient \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 fetch API \u0628\u0647 \u062c\u0627\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 XMLHttpRequest API \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ app.config.ts\nimport { provideHttpClient, withFetch } from 'somewhere';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHttpClient(\n      withFetch(),\n    ),\n  ]\n};\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0628\u0627 \u0631\u0647\u06af\u06cc\u0631\u0647\u0627:<\/strong><br \/>\u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u062a\u0648\u0627\u0628\u0639 \u0631\u0647\u06af\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u0631\u062f\u0627\u0632\u0634 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0634\u062f\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 HttpClient \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>withInterceptorsFromDi:<\/strong><br \/>\u0634\u0627\u0645\u0644 \u0633\u0628\u06a9 \u0642\u062f\u06cc\u0645\u06cc \u062a\u0631 \u0631\u0647\u06af\u06cc\u0631\u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u06a9\u0644\u0627\u0633 \u062f\u0631 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc HttpClient.<\/p>\n<p><strong>withRequestsMadeViaParent:<\/strong><br \/>\u067e\u0633 \u0627\u0632 \u0639\u0628\u0648\u0631 \u0627\u0632 \u0631\u0647\u06af\u06cc\u0631\u0647\u0627 \u062f\u0631 \u0633\u0637\u062d \u0641\u0639\u0644\u06cc\u060c \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0646\u0645\u0648\u0646\u0647 HttpClient \u062f\u0631 \u0627\u0646\u0698\u06a9\u062a\u0648\u0631 \u0648\u0627\u0644\u062f \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p><strong>withJsonpSupport:<\/strong><br \/>\u0631\u0648\u0634 .jsonp() \u0631\u0627 \u062f\u0631 HttpClient \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0628\u06cc\u0646 \u062f\u0627\u0645\u0646\u0647 \u0627\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0631\u0627\u0631\u062f\u0627\u062f JSONP \u0641\u0639\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>withXsrfConfiguration:<\/strong><br \/>\u0628\u0647 \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0645\u0646\u06cc\u062a\u06cc XSRF \u062f\u0627\u062e\u0644\u06cc HttpClient \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p><strong>\u0628\u0627 NoXsrfProtection<\/strong>:<\/p>\n<p>\u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0645\u0646\u06cc\u062a\u06cc XSRF \u062f\u0627\u062e\u0644\u06cc HttpClient \u0631\u0627 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_JSON\"><\/span>\n<p>  \u062f\u0631 \u062d\u0627\u0644 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc JSON<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636\u060c HttpClient \u0641\u0631\u0636 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0633\u0631\u0648\u0631\u0647\u0627 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc JSON \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u0646\u062f.<\/p>\n<p><strong>\u0645\u062b\u0627\u0644:<\/strong><br \/>\u00b7 \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u06cc\u06a9 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646 \u062f\u0627\u0631\u06cc\u0645 \u0648 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ We use HttpClient to make a GET request to a server endpoint.\nthis.http.get('\/api\/products').subscribe({\n  next: products =&gt; {\n    \/\/ Once we get the products, we can display them to the user.\n    console.log(products);\n  }\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D8%A7%D9%86%D9%88%D8%A7%D8%B9_%D8%AF%DB%8C%DA%AF%D8%B1_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7\"><\/span>\n<p>  \u0648\u0627\u06a9\u0634\u06cc \u0627\u0646\u0648\u0627\u0639 \u062f\u06cc\u06af\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0647\u0646\u06af\u0627\u0645 \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u06cc\u06a9 API \u063a\u06cc\u0631 JSON\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u06af\u0648\u06cc\u06cc\u062f <strong>HttpClient<\/strong> \u0686\u0647 \u0646\u0648\u0639 \u067e\u0627\u0633\u062e\u06cc \u0631\u0627 \u0628\u0627\u06cc\u062f \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0627\u0634\u062a \u0648 \u0647\u0646\u06af\u0627\u0645 \u0627\u0631\u0627\u0626\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627 \u06af\u0632\u06cc\u0646\u0647 answerType \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p><strong>\u0645\u062b\u0627\u0644:<\/strong><br \/>\u00b7 \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ We use HttpClient to make a GET request for an image.\nthis.http.get('\/images\/cat.jpg', { responseType: 'blob' }).subscribe({\n  next: image =&gt; {\n    \/\/ Once we get the image, we can display it to the user.\n    console.log(image);\n  }\n});\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D9%88%D8%B6%D8%B9%DB%8C%D8%AA_%D8%B3%D8%B1%D9%88%D8%B1\"><\/span>\n<p>  \u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0633\u0631\u0648\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06af\u0631 \u0628\u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc HTTP \u0645\u0627\u0646\u0646\u062f POST\u060c PUT \u06cc\u0627 DELETE \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p><strong>\u0645\u062b\u0627\u0644:<\/strong><br \/>\u00b7 \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ We use HttpClient to make a POST request to add a new product.\nthis.http.post('\/api\/products', newProduct).subscribe({\n  next: response =&gt; {\n    \/\/ Once the product is added, we can do something with the response.\n    console.log(response);\n  }\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%AE%D8%B7%D8%A7%D9%87%D8%A7\"><\/span>\n<p>  \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627\u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627 \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0645\u0634\u06a9\u0644\u0627\u062a \u0634\u0628\u06a9\u0647 \u06cc\u0627 \u062e\u0637\u0627\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0628\u0627 \u0634\u06a9\u0633\u062a \u0645\u0648\u0627\u062c\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f.  \u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u0627 \u0627\u06cc\u0646 \u062e\u0637\u0627\u0647\u0627 \u0628\u0627 \u0638\u0631\u0627\u0641\u062a \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<p><strong>\u0645\u062b\u0627\u0644:<\/strong><br \/>\u00b7 \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u0627 \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u0632 \u06a9\u0627\u0631 \u0627\u0641\u062a\u0627\u062f\u0646 \u0633\u0631\u0648\u0631 \u0628\u0627 \u0634\u06a9\u0633\u062a \u0645\u0648\u0627\u062c\u0647 \u0634\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ We use HttpClient to make a POST request to add a new product.\nhttp.post('\/api\/products', newProduct).subscribe({\n  next: response =&gt; {\n    console.log('Product added successfully:', response);\n  },\n  error: err =&gt; {\n    console.error('Failed to add product:', err);\n    \/\/ We can show an error message to the user or retry the request.\n  }\n});\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84\"><\/span>\n<p>  \u0645\u062b\u0627\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Angular \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <strong>HttpClient<\/strong> \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u0627\u0646\u0646\u062f \u0627\u0631\u0633\u0627\u0644 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc HTTP\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u0646\u0648\u0627\u0639 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>ng new http-client-demo\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0633\u0631\u0648\u06cc\u0633 \u062c\u062f\u06cc\u062f \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>ng generate service data\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u0645 <strong>data.service.ts<\/strong> \u0641\u0627\u06cc\u0644 \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc src\/app \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 HttpClient:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http'; \nimport { Observable, throwError } from 'rxjs';\nimport { catchError } from 'rxjs\/operators';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class DataService {\n\n  private apiUrl=\"https:\/\/jsonplaceholder.typicode.com\";\n\n  constructor(private http: HttpClient) { }\n\n  \/\/ Method to fetch JSON data\n  getJsonData(): Observable&lt;any&gt; {\n    return this.http.get&lt;any&gt;(`${this.apiUrl}\/posts`).pipe(\n      catchError(error =&gt; {\n        console.error('Error fetching JSON data:', error);\n        return throwError(()=&gt; new Error('Something went wrong; please try again later.'));\n      })\n    );\n  }\n\n  \/\/ Method to fetch an image\n  getImage(): Observable&lt;Blob&gt; {\n    return this.http.get(`${this.apiUrl}\/photos\/1`, { responseType: 'blob' }).pipe(\n      catchError(error =&gt; {\n        console.error('Error fetching image:', error);\n        return throwError(()=&gt; new Error('Unable to fetch image.'));\n      })\n    );\n  }\n\n  \/\/ Method to simulate adding a new post\n  addPost(newPost: any): Observable&lt;any&gt; {\n    return this.http.post&lt;any&gt;(`${this.apiUrl}\/posts`, newPost).pipe(\n      catchError(error =&gt; {\n        console.error('Error adding post:', error);\n        return throwError(()=&gt; new Error('Failed to add post.'));\n      })\n    );\n  }\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u0645 <strong>app.component.ts<\/strong> \u0641\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 DataService:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import { Component, OnInit } from '@angular\/core';\nimport { DataService } from '.\/data.service'; \n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  templateUrl: '.\/app.component.html',\n  styleUrl: '.\/app.component.css'\n})\nexport class AppComponent implements OnInit {\n\n  constructor(private dataService: DataService) { }\n\n  ngOnInit(): void {\n    \/\/ Fetch JSON data\n    this.dataService.getJsonData().subscribe({\n      next: data =&gt; {\n        console.log('JSON Data:', data)\n      },\n      error: error =&gt; {\n        console.error('Error fetching JSON data:', error)\n      }\n  });\n\n    \/\/ Fetch image\n    this.dataService.getImage().subscribe({\n      next: image =&gt; {\n        const reader = new FileReader();\n        reader.onload = () =&gt; {\n          console.log('Image:', reader.result);\n        };\n        reader.readAsDataURL(image);\n      },\n      error: error =&gt; {\n        console.error('Error fetching image:', error)\n      }\n  });\n\n    \/\/ Add a new post\n    const newPost = {\n      title: 'New Post',\n      body: 'Description of the new post'\n    };\n    this.dataService.addPost(newPost).subscribe({\n      next: response =&gt; {\n        console.log('Post added successfully:', response)\n      },\n      error: error =&gt; {\n        console.error('Error adding post:', error)\n      }\n  });\n  }\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc <strong>app.component.html<\/strong> \u0641\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u06cc\u0634 \u0641\u0631\u0636:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>&lt;div style=\"text-align:center\"&gt;\n  &lt;h1&gt;\n    Welcome to HttpClient Demo!\n  &lt;\/h1&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>ng serve\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u0634\u0648\u062f \u0648 \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u062e\u0631\u0648\u062c\u06cc \u0631\u0627 \u062f\u0631 \u06a9\u0646\u0633\u0648\u0644 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u067e\u0627\u06cc\u0627\u0646\u060c HttpClient \u0627\u0628\u0632\u0627\u0631 \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u0633\u0637 Angular \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc HTTP \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0634\u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0628\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0645\u0631\u0627\u062d\u0644 \u0630\u06a9\u0631 \u0634\u062f\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0637\u0648\u0631 \u0645\u0648\u062b\u0631 HttpClient \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u0633\u0631\u0648\u0631\u0647\u0627\u060c \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0648 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641 \u067e\u0627\u0633\u062e \u0647\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u062f \u06a9\u0627\u0645\u0644 \u0628\u0647 \u0644\u06cc\u0646\u06a9 \u0632\u06cc\u0631 \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f\ud83d\udc47\ud83d\udc47\ud83d\udc47<br \/>https:\/\/github.com\/anthony-kigotho\/http-client-demo<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Angular \u06a9\u0647 \u06cc\u06a9 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u062c\u0644\u0648\u06cc\u06cc \u0627\u0633\u062a\u060c \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u0642\u0631\u0627\u0631\u06cc \u0627\u0631\u062a\u0628\u0627\u0637 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0627 \u0633\u0631\u0648\u0631\u0647\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u0645\u062c\u0647\u0632 \u0645\u06cc \u06a9\u0646\u062f. \u06cc\u06a9\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc HttpClient \u0627\u0633\u062a \u06a9\u0647 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u0633\u0631\u0648\u0631\u0647\u0627 \u06cc\u0627 \u0627\u0631\u0633\u0627\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0647 \u0633\u0631\u0648\u0631\u0647\u0627 \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0628\u0647 \u062f\u0631\u06a9 \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":63381,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-63380","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/63380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=63380"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/63380\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/63381"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=63380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=63380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=63380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}