{"id":105525,"date":"2025-04-11T08:48:43","date_gmt":"2025-04-11T04:18:43","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%af%d8%ba%d8%a7%d9%85-httpresource-angular-%d8%a8%d8%a7-httpinterceptors-%d8%ac%d8%a7%d9%85%d8%b9%d9%87-dev\/"},"modified":"2025-04-11T08:48:43","modified_gmt":"2025-04-11T04:18:43","slug":"%d8%a7%d8%af%d8%ba%d8%a7%d9%85-httpresource-angular-%d8%a8%d8%a7-httpinterceptors-%d8%ac%d8%a7%d9%85%d8%b9%d9%87-dev","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%af%d8%ba%d8%a7%d9%85-httpresource-angular-%d8%a8%d8%a7-httpinterceptors-%d8%ac%d8%a7%d9%85%d8%b9%d9%87-dev\/","title":{"rendered":"\u0627\u062f\u063a\u0627\u0645 httpresource angular \u0628\u0627 httpinterceptors &#8211; \u062c\u0627\u0645\u0639\u0647 dev"},"content":{"rendered":"<div data-article-id=\"2395981\" id=\"article-body\">\n<p>\u0632\u0627\u0648\u06cc\u0647 \u062f\u0627\u0631 <code>httpResource<\/code> \u0631\u0648\u0634\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0631\u0627\u062d\u062a \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc HTTP \u060c \u0628\u0647 \u0648\u06cc\u0698\u0647 \u0647\u0646\u06af\u0627\u0645 \u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627 \u0645\u0646\u0627\u0628\u0639\u06cc \u0645\u0627\u0646\u0646\u062f \u062d\u0628\u0627\u0628 \u0648 \u0628\u0627\u0641\u0631 \u0622\u0631\u0627\u06cc\u0647 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0627\u063a\u0644\u0628 \u0628\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0627\u0633\u0627\u0633\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f. \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0644\u0627\u0632\u0645 \u0628\u0627\u0634\u062f \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u060c \u0647\u062f\u0631\u0647\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u06cc\u0627 \u062e\u0637\u0627\u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc \u0631\u0627 \u0628\u0631\u0637\u0631\u0641 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 <code>HttpInterceptors<\/code> \u0648\u0627\u0631\u062f \u0634\u0648\u06cc\u062f <code>HttpInterceptors<\/code> \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627 \u0648 \u067e\u0627\u0633\u062e \u0647\u0627\u06cc HTTP \u0631\u0627 \u0631\u0647\u06af\u06cc\u0631\u06cc \u0648 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f \u060c \u0648 \u06cc\u06a9 \u0631\u0648\u0634 \u0645\u062a\u0645\u0631\u06a9\u0632 \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0646\u06af\u0631\u0627\u0646\u06cc \u0647\u0627\u06cc \u0645\u062a\u0642\u0627\u0628\u0644 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u0646\u062d\u0648\u0647 \u0627\u062f\u063a\u0627\u0645 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f <code>httpResource<\/code> \u0628\u0627 <code>HttpInterceptors<\/code>\u0628\u0634\u0631 \u067e\u0633 \u0627\u0632 <code>httpResource<\/code> \u0627\u0632 \u0632\u0627\u0648\u06cc\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>HttpClient<\/code> \u0632\u06cc\u0631 \u06a9\u0627\u067e\u0648\u062a \u060c <code>HttpInterceptors<\/code> \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 <code>httpResource<\/code>\u060c \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0645\u0646\u0637\u0642 \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u0628\u0647 \u0641\u0631\u0622\u06cc\u0646\u062f \u0648\u0627\u06af\u0630\u0627\u0631\u06cc \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0634\u06cc\u0631\u062c\u0647 \u0632\u062f\u0646 \u0628\u0647 \u06a9\u062f \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f Angular \u0631\u0627 \u0628\u0647 \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u0645. \u0627\u0632 \u0627\u06cc\u0646 \u0646\u0648\u0634\u062a\u0627\u0631 \u060c \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 19.2.5 \u0627\u0633\u062a. \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc Angular CLI \u0648 \u0627\u0635\u0644\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>ng update @angular\/core @angular\/cli\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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>\u0645\u062b\u0627\u0644: \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>HttpInterceptors<\/code> \u0628\u0627 <code>httpResource<\/code><\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u060c \u0645\u0627 \u062f\u0648 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0627 \u0646\u0634\u0627\u0646 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f:<\/p>\n<ul>\n<li>\u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645: \u0645\u0627 \u06cc\u06a9 \u0631\u0647\u06af\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u06a9\u0647 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u062a\u06a9\u0645\u06cc\u0644 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0648 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>\u0627\u0635\u0644\u0627\u062d \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627: \u0645\u0627 \u06cc\u06a9 \u0631\u0647\u06af\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u0628\u062f\u0646\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f \u060c \u0648 \u0628\u0647 \u06cc\u06a9 \u0645\u0633\u0626\u0644\u0647 \u0628\u0627\u0644\u0642\u0648\u0647 \u062f\u0631 \u06a9\u062c\u0627 \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u06cc\u0645 <code>httpResource<\/code> \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0633\u0647\u0648\u0627\u064b \u0634\u0627\u0645\u0644 \u0628\u062f\u0646\u0647 \u0627\u06cc \u062f\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc GET (\u06a9\u0647 \u0642\u0631\u0627\u0631 \u0646\u06cc\u0633\u062a \u0628\u062f\u0646 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f).<\/li>\n<\/ul>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u062f \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f:<\/p>\n<p>1) \u0631\u0647\u06af\u06cc\u0631\u06cc \u0647\u0627\u06cc HTTP \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\u0627\u0628\u062a\u062f\u0627 \u060c \u0631\u0647\u06af\u06cc\u0631\u06cc \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">elapsed<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">signal<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">loggingInterceptor<\/span><span class=\"p\">:<\/span> <span class=\"nx\">HttpInterceptorFn<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span>\n  <span class=\"nx\">req<\/span><span class=\"p\">:<\/span> <span class=\"nx\">HttpRequest<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">unknown<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">next<\/span><span class=\"p\">:<\/span> <span class=\"nx\">HttpHandlerFn<\/span>\n<span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">startTime<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">now<\/span><span class=\"p\">();<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nf\">next<\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">).<\/span><span class=\"nf\">pipe<\/span><span class=\"p\">(<\/span>\n    <span class=\"nf\">finalize<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">endTime<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">now<\/span><span class=\"p\">();<\/span>\n      <span class=\"nx\">elapsed<\/span><span class=\"p\">.<\/span><span class=\"nf\">set<\/span><span class=\"p\">(<\/span><span class=\"nx\">endTime<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">startTime<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Round trip time is <\/span><span class=\"p\">${<\/span><span class=\"nf\">elapsed<\/span><span class=\"p\">()}<\/span><span class=\"s2\"> milliseconds.`<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">})<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">requestInterceptor<\/span><span class=\"p\">:<\/span> <span class=\"nx\">HttpInterceptorFn<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span>\n  <span class=\"nx\">req<\/span><span class=\"p\">:<\/span> <span class=\"nx\">HttpRequest<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">unknown<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">next<\/span><span class=\"p\">:<\/span> <span class=\"nx\">HttpHandlerFn<\/span>\n<span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">method<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">method<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">GET<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"c1\">\/\/ GET method does not have body<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">method<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">GET<\/span><span class=\"dl\">'<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nx\">body<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nf\">next<\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">.<\/span><span class=\"nf\">clone<\/span><span class=\"p\">({<\/span> <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span> <span class=\"p\">}));<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nf\">next<\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<ul>\n<li>\n<p>\u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645: \u0627\u06cc\u0646 \u0631\u0647\u06af\u06cc\u0631\u06cc \u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0647\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a HTTP \u0631\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>finalize<\/code> \u0627\u067e\u0631\u0627\u062a\u0648\u0631 \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0645\u0646\u0637\u0642 \u0632\u0645\u0627\u0646 \u0628\u0646\u062f\u06cc \u0628\u062f\u0648\u0646 \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u0648\u0641\u0642\u06cc\u062a \u06cc\u0627 \u0634\u06a9\u0633\u062a \u0645\u06cc \u06cc\u0627\u0628\u062f \u060c \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f. \u0632\u0645\u0627\u0646 \u0633\u067e\u0631\u06cc \u0634\u062f\u0647 \u062f\u0631 \u06cc\u06a9 \u0633\u06cc\u06af\u0646\u0627\u0644 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0647 \u06a9\u0646\u0633\u0648\u0644 \u0648\u0627\u0631\u062f \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<\/li>\n<li>\n<p>RequestInterceptor: \u0627\u06cc\u0646 \u0631\u0647\u06af\u06cc\u0631\u06cc \u0645\u0633\u0626\u0644\u0647 \u0628\u0627\u0644\u0642\u0648\u0647 \u0631\u0627 \u0628\u0627 <code>httpResource<\/code> \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u06cc\u06a9 \u0628\u062f\u0646 \u062f\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062f\u0631\u06cc\u0627\u0641\u062a \u06af\u0646\u062c\u0627\u0646\u062f\u0647 \u0634\u0648\u062f. \u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a\u06cc \u0646\u0628\u0627\u06cc\u062f \u0628\u062f\u0646\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f \u060c \u0627\u06cc\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0647\u06af\u06cc\u0631\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u06a9\u0644\u0648\u0646 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u062f\u0631\u06cc\u0627\u0641\u062a \u0631\u0648\u0634 \u0628\u062f\u0646 \u0631\u0627 \u0627\u0632 \u0628\u06cc\u0646 \u0645\u06cc \u0628\u0631\u062f. \u0627\u06cc\u0646 \u0645\u0627\u0646\u0639 \u0627\u0632 \u062e\u0637\u0627\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0645\u06cc \u0634\u0648\u062f. \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646 \u0631\u0647\u06af\u06cc\u0631\u06cc \u060c <code>httpResource<\/code> \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0628\u0627 \u0628\u062f\u0646 \u062f\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u0646\u062c\u0631 \u0628\u0647 \u067e\u06cc\u0627\u0645 \u062e\u0637\u0627 \u0645\u0634\u0627\u0628\u0647 \u0645\u06cc \u0634\u0648\u062f: &#8220;\u067e\u0627\u0633\u062e \u0634\u06a9\u0633\u062a HTTP \u0628\u0631\u0627\u06cc&#8221;<url>&#39;: 0 \u062e\u0637\u0627\u06cc \u0646\u0627\u0634\u0646\u0627\u062e\u062a\u0647 &#8220;.<\/url><\/p>\n<\/li>\n<\/ul>\n<p>2) \u0631\u0647\u06af\u06cc\u0631\u06cc \u0647\u0627 \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f<br \/>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f \u060c \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0647\u06af\u06cc\u0631\u0647\u0627 \u0628\u0627\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u0645. \u0645\u0627 \u0648\u0642\u062a\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u0645 <code>HttpClient<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">appConfig<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ApplicationConfig<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">providers<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"nf\">provideHttpClient<\/span><span class=\"p\">(<\/span>\n      <span class=\"nf\">withInterceptors<\/span><span class=\"p\">([<\/span><span class=\"nx\">loggingInterceptor<\/span><span class=\"p\">,<\/span> <span class=\"nx\">requestInterceptor<\/span><span class=\"p\">])<\/span>\n    <span class=\"p\">),<\/span>\n  <span class=\"p\">],<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"nf\">bootstrapApplication<\/span><span class=\"p\">(<\/span><span class=\"nx\">AppComponent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">appConfig<\/span><span class=\"p\">);<\/span>\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<ul>\n<li>APPCONFIG: \u0627\u0632 \u062a\u0627\u0628\u0639 \u0627\u0631\u0627\u0626\u0647 httpclient \u0628\u0631\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc httpclient \u0628\u0627 \u0631\u0647\u06af\u06cc\u0631\u0647\u0627\u06cc \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0631\u0648\u0646 \u06af\u06cc\u0631\u0646\u062f\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u062a\u0648\u0627\u0628\u0639 \u0631\u0647\u06af\u06cc\u0631\u06cc \u0631\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/li>\n<\/ul>\n<p>3) \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 httpresource<br \/>\u062d\u0627\u0644 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 <code>httpResource<\/code> \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0645\u0627 \u062f\u0648 \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f: \u06cc\u06a9\u06cc \u06a9\u0647 \u06cc\u06a9 \u062d\u0628\u0627\u0628 (\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0635\u0648\u062a\u06cc) \u0648 \u062f\u06cc\u06af\u0631\u06cc \u0631\u0627 \u06a9\u0647 \u06cc\u06a9 \u0628\u0627\u0641\u0631 \u0622\u0631\u0627\u06cc\u0647 (\u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631) \u0631\u0627 \u0628\u0647 \u062f\u0633\u062a \u0645\u06cc \u0622\u0648\u0631\u062f \u060c \u0645\u06cc \u06af\u06cc\u0631\u062f. \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u062f\u0646 \u062f\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a GET \u060c \u062e\u0637\u0627\u06cc\u06cc \u0631\u0627 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>3.1) \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 httpresource.blob \u062f\u0631 httpresourceblobcomponent<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ChangeDetectionStrategy<\/span><span class=\"p\">,<\/span> <span class=\"nx\">computed<\/span><span class=\"p\">,<\/span> <span class=\"nx\">signal<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">httpResource<\/span><span class=\"p\">,<\/span> <span class=\"nx\">HttpResourceRef<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/common\/http<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">makeResourceRefStatus<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">resourceRef<\/span><span class=\"p\">:<\/span> <span class=\"nx\">HttpResourceRef<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">unknown<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">undefined<\/span><span class=\"o\">&gt;<\/span>\n<span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">progress<\/span><span class=\"p\">:<\/span> <span class=\"nf\">computed<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">resourceRef<\/span><span class=\"p\">.<\/span><span class=\"nf\">progress<\/span><span class=\"p\">())<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">progress<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">resourceRef<\/span><span class=\"p\">.<\/span><span class=\"nf\">progress<\/span><span class=\"p\">();<\/span>\n        <span class=\"k\">return<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">progress<\/span><span class=\"p\">?.<\/span><span class=\"nx\">loaded<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">progress<\/span><span class=\"p\">?.<\/span><span class=\"nx\">total<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"k\">return<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}),<\/span>\n    <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"nf\">computed<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span>\n      <span class=\"nx\">resourceRef<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">()<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span><span class=\"nx\">resourceRef<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">()<\/span> <span class=\"k\">as<\/span> <span class=\"nb\">Error<\/span><span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"kc\">undefined<\/span>\n    <span class=\"p\">),<\/span>\n  <span class=\"p\">};<\/span>\n<span class=\"p\">}<\/span>\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<ul>\n<li>makeresourcerefstatus: \u0627\u06cc\u0646 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u06cc\u0627\u0648\u0631 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0633\u06cc\u06af\u0646\u0627\u0644 \u0647\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0647 \u0634\u062f\u0647 \u067e\u06cc\u0634\u0631\u0641\u062a \u0648 \u062e\u0637\u0627 \u0627\u0633\u062a.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">PIKACHU_OGG_URL<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/raw.githubusercontent.com\/PokeAPI\/cries\/main\/cries\/pokemon\/latest\/25.ogg<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-resource-blob<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/httpresource-blob.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">changeDetection<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ChangeDetectionStrategy<\/span><span class=\"p\">.<\/span><span class=\"nx\">OnPush<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">HttpResourceBlobComponent<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">audioUrl<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">PIKACHU_OGG_URL<\/span><span class=\"p\">;<\/span>\n  <span class=\"nx\">audioSignal<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">signal<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nx\">audioResource<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">httpResource<\/span><span class=\"p\">.<\/span><span class=\"nf\">blob<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">audioSignal<\/span><span class=\"p\">()<\/span>\n      <span class=\"p\">?<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">audioSignal<\/span><span class=\"p\">(),<\/span>\n          <span class=\"na\">reportProgress<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">x<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">bad blob data<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span> <span class=\"c1\">\/\/ Intentionally incorrect body for GET<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">:<\/span> <span class=\"kc\">undefined<\/span>\n  <span class=\"p\">);<\/span>\n\n  <span class=\"nx\">resourceRefStatus<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">makeResourceRefStatus<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">audioResource<\/span><span class=\"p\">);<\/span>\n  <span class=\"nx\">audioProgress<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">resourceRefStatus<\/span><span class=\"p\">.<\/span><span class=\"nx\">progress<\/span><span class=\"p\">;<\/span>\n  <span class=\"nx\">audioError<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">resourceRefStatus<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nx\">blobURL<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">computed<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">audioResource<\/span><span class=\"p\">.<\/span><span class=\"nf\">hasValue<\/span><span class=\"p\">()<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">URL<\/span><span class=\"p\">.<\/span><span class=\"nf\">createObjectURL<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">audioResource<\/span><span class=\"p\">.<\/span><span class=\"nf\">value<\/span><span class=\"p\">())<\/span> <span class=\"p\">:<\/span> <span class=\"kc\">undefined<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><div>\n  <span class=\"nt\"><button> <span class=\"na\">(click)=<\/span><span class=\"s\">\"audioSignal.set(audioUrl)\"<\/span><span class=\"nt\">&gt;<\/span>Load blob data<span class=\"nt\"\/><\/button><\/span>\n  <span class=\"nt\"\/>{{ `Url: ${audioSignal()}` }}<span class=\"nt\"\/>\n  <span class=\"nt\"\/>{{ `Progress: ${audioProgress()}` }}<span class=\"nt\"\/>\n  @if (audioError()) {\n    <span class=\"nt\"\/>Error: <span class=\"nt\"><span\/>{{ audioError()?.message }}<span class=\"nt\"\/><\/span>\n  } @else if (blobURL()) {\n    <span class=\"nt\"><label\/><\/span>Listen to Pikachu:<span class=\"nt\"\/>\n    <span class=\"nt\"><audio> <span class=\"na\">[src]=<\/span><span class=\"s\">\"blobURL()\"<\/span> <span class=\"na\">controls<\/span><span class=\"nt\">&gt;<\/span><\/audio><\/span>\n  }\n<span class=\"nt\"\/><\/div><\/span>\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<ul>\n<li>httpresourceblobcomponent: \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0627\u0632 httpresource.blob \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u06cc\u06a9 \u0641\u0627\u06cc\u0644 ogg \u0627\u0632 \u06cc\u06a9 \u0622\u062f\u0631\u0633 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0646\u062a\u0627\u06cc\u062c \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f. \u0645\u0627 \u0639\u0645\u062f\u0627\u064b \u06cc\u06a9 \u062e\u0627\u0635\u06cc\u062a \u0628\u062f\u0646 \u0631\u0627 \u0628\u0647 <code>HttpResourceRequest<\/code> \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 \u060c \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u0627\u062f\u0631\u0633\u062a \u0627\u0633\u062a. \u062f\u0631 \u0635\u0648\u0631\u062a \u0639\u062f\u0645 \u062d\u0636\u0648\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0646\u0646\u062f\u0647 \u060c \u0627\u06cc\u0646 \u062e\u0637\u0627\u06cc\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0647\u0645\u0686\u0646\u06cc\u0646 \u067e\u06cc\u0634\u0631\u0641\u062a \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0648 \u0647\u0631\u06af\u0648\u0646\u0647 \u062e\u0637\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0631\u062e \u0645\u06cc \u062f\u0647\u062f \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.\n<ul>\n<li>Bloburl \u06cc\u06a9 \u0633\u06cc\u06af\u0646\u0627\u0644 \u0645\u062d\u0627\u0633\u0628\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0634\u06cc\u0621 URL \u0631\u0627 \u0627\u0632 \u062d\u0628\u0627\u0628 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u060c \u0633\u067e\u0633 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0635\u0631 \u0635\u0648\u062a\u06cc \u0627\u062e\u062a\u0635\u0627\u0635 \u0645\u06cc \u062f\u0647\u062f <code>src<\/code> \u0648\u06cc\u0698\u06af\u06cc<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>3.2) \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 httpresource.arraybuffer \u062f\u0631 httpresourcearraybuffercomponent<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">PIKACHU_IMAGE_URL<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/raw.githubusercontent.com\/PokeAPI\/sprites\/master\/sprites\/pokemon\/shiny\/25.png<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-resource-array-buffer<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/httpresource-arraybuffer.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">changeDetection<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ChangeDetectionStrategy<\/span><span class=\"p\">.<\/span><span class=\"nx\">OnPush<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">HttpResourceArrayBufferComponent<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">imageUrl<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">PIKACHU_IMAGE_URL<\/span><span class=\"p\">;<\/span>\n  <span class=\"nx\">imageSignal<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">signal<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nx\">imgResource<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">httpResource<\/span><span class=\"p\">.<\/span><span class=\"nf\">arrayBuffer<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">imageSignal<\/span><span class=\"p\">()<\/span>\n      <span class=\"p\">?<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">imageSignal<\/span><span class=\"p\">(),<\/span>\n          <span class=\"na\">reportProgress<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">GET<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">x<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">bad arraybuffer data<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span> <span class=\"c1\">\/\/ Intentionally incorrect body for GET<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">:<\/span> <span class=\"kc\">undefined<\/span>\n  <span class=\"p\">);<\/span>\n\n  <span class=\"nx\">resourceRefStatus<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">makeResourceRefStatus<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">imgResource<\/span><span class=\"p\">);<\/span>\n  <span class=\"nx\">imgProgress<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">resourceRefStatus<\/span><span class=\"p\">.<\/span><span class=\"nx\">progress<\/span><span class=\"p\">;<\/span>\n  <span class=\"nx\">imgError<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">resourceRefStatus<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nx\">bufferedImage<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">computed<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">imgResource<\/span><span class=\"p\">.<\/span><span class=\"nf\">hasValue<\/span><span class=\"p\">()<\/span>\n      <span class=\"p\">?<\/span> <span class=\"nx\">URL<\/span><span class=\"p\">.<\/span><span class=\"nf\">createObjectURL<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Blob<\/span><span class=\"p\">([<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">imgResource<\/span><span class=\"p\">.<\/span><span class=\"nf\">value<\/span><span class=\"p\">()]))<\/span>\n      <span class=\"p\">:<\/span> <span class=\"kc\">undefined<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"p\">}<\/span>\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><div>\n  <span class=\"nt\"><button> <span class=\"na\">(click)=<\/span><span class=\"s\">\"imageSignal.set(imageUrl)\"<\/span><span class=\"nt\">&gt;<\/span>Load arrayBuffer data<span class=\"nt\"\/><\/button><\/span>\n  <span class=\"nt\"\/>{{ `Url: ${imageSignal()}` }}<span class=\"nt\"\/>\n  <span class=\"nt\"\/>{{ `Progress: ${imgProgress()}`}}<span class=\"nt\"\/>\n  @if (imgError()) {\n    <span class=\"nt\"\/>Error: <span class=\"nt\"><span\/>{{ imgError()?.message }}<span class=\"nt\"\/><\/span>\n  } @else if (bufferedImage()) {\n    <span class=\"nt\"><label\/><\/span>Pikachu:<span class=\"nt\"\/>\n    <span class=\"nt\"><img\/> <span class=\"na\">[src]=<\/span><span class=\"s\">\"bufferedImage()\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n  }\n<span class=\"nt\"\/><\/span><\/div><\/span>\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<ul>\n<li>httpresourcearraybuffercomponent: \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0627\u0632 httpresource.arraybuffer \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u06cc\u06a9 \u0641\u0627\u06cc\u0644 png \u0627\u0632 URL \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0646\u062a\u06cc\u062c\u0647 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f. \u0645\u0627 \u0639\u0645\u062f\u0627\u064b \u06cc\u06a9 \u062e\u0627\u0635\u06cc\u062a \u0628\u062f\u0646 \u0631\u0627 \u0628\u0647 <code>HttpResourceRequest<\/code> \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 \u060c \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u0627\u062f\u0631\u0633\u062a \u0627\u0633\u062a. \u062f\u0631 \u0635\u0648\u0631\u062a \u0639\u062f\u0645 \u062d\u0636\u0648\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0646\u0646\u062f\u0647 \u060c \u0627\u06cc\u0646 \u062e\u0637\u0627\u06cc\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0647\u0645\u0686\u0646\u06cc\u0646 \u067e\u06cc\u0634\u0631\u0641\u062a \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0648 \u0647\u0631\u06af\u0648\u0646\u0647 \u062e\u0637\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0631\u062e \u0645\u06cc \u062f\u0647\u062f \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.\n<ul>\n<li>BufferedImage \u06cc\u06a9 \u0633\u06cc\u06af\u0646\u0627\u0644 \u0645\u062d\u0627\u0633\u0628\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0634\u06cc\u0621 URL \u0631\u0627 \u0627\u0632 Arraybuffer \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u060c \u0633\u067e\u0633 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0635\u0631 IMG \u0627\u062e\u062a\u0635\u0627\u0635 \u0645\u06cc \u062f\u0647\u062f <code>src<\/code> \u0648\u06cc\u0698\u06af\u06cc<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>4) \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0639\u0645\u0644 \u062f\u0631 AppComponent \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f<br \/>\u062f\u0631 <code>AppComponent<\/code> \u0627\u06cc\u0646 \u062f\u0648 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u0628\u0647 \u0647\u0645 \u067e\u06cc\u0648\u0646\u062f \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0639\u0645\u0644 \u0646\u0634\u0627\u0646 \u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-root<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">HttpResourceBlobComponent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">HttpResourceArrayBufferComponent<\/span><span class=\"p\">],<\/span>\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">changeDetection<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ChangeDetectionStrategy<\/span><span class=\"p\">.<\/span><span class=\"nx\">OnPush<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">AppComponent<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>\/\/ app.component.html\n<span class=\"nt\"\/>\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<ul>\n<li>\u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0627\u0635\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 httpresourceblobcomponent \u0648 httpresourcearraybuffercomponent \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u06cc\u06a9 \u0642\u0627\u0646\u0648\u0646 \u0627\u0641\u0642\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f (<br \/>\n<hr\/>\n<p>) \u062c\u062f\u0627 \u06a9\u0631\u062f\u0646 \u0622\u0646\u0647\u0627.<\/li>\n<\/ul>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 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 ' ><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%af%d8%ba%d8%a7%d9%85-httpresource-angular-%d8%a8%d8%a7-httpinterceptors-%d8%ac%d8%a7%d9%85%d8%b9%d9%87-dev\/#%D9%81%D9%88%D8%A7%DB%8C%D8%AF\" >\u0641\u0648\u0627\u06cc\u062f<\/a><\/li><\/ul><\/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\/%d8%a7%d8%af%d8%ba%d8%a7%d9%85-httpresource-angular-%d8%a8%d8%a7-httpinterceptors-%d8%ac%d8%a7%d9%85%d8%b9%d9%87-dev\/#%D9%85%D9%86%D8%A7%D8%A8%D8%B9\" >\u0645\u0646\u0627\u0628\u0639<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D9%81%D9%88%D8%A7%DB%8C%D8%AF\"><\/span>\n<p>  \u0641\u0648\u0627\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u062a\u0645\u0631\u06a9\u0632: httpinterceptors \u06cc\u06a9 \u0631\u0648\u0634 \u0645\u062a\u0645\u0631\u06a9\u0632 \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0646\u06af\u0631\u0627\u0646\u06cc \u0647\u0627\u06cc \u0645\u062a\u0642\u0627\u0628\u0644 \u0645\u0627\u0646\u0646\u062f \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u060c \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627 \u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f. \u0627\u06cc\u0646 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u06a9\u062f \u0645\u0624\u0644\u0641\u0647 \u0634\u0645\u0627 \u062a\u0645\u06cc\u0632 \u0648 \u0645\u062a\u0645\u0631\u06a9\u0632 \u0628\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0627\u0634\u062f.<\/li>\n<li>\u0645\u062f\u0648\u0644\u0627\u0631: \u0631\u0647\u06af\u06cc\u0631\u0647\u0627 \u0645\u062f\u0648\u0644\u0627\u0631 \u0647\u0633\u062a\u0646\u062f \u0648 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646 \u0627\u0632 \u062e\u0637 \u0644\u0648\u0644\u0647 HTTP \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u06cc\u0627 \u062d\u0630\u0641 \u0634\u062f.<\/li>\n<li>\u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f: \u0631\u0647\u06af\u06cc\u0631\u0647\u0627 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u062f\u0631 \u0686\u0646\u062f\u06cc\u0646 \u0633\u0631\u0648\u06cc\u0633 \u0648 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f \u0648 \u0628\u0627\u0639\u062b \u06a9\u0627\u0647\u0634 \u062a\u06a9\u062b\u06cc\u0631 \u06a9\u062f \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 HTTPRESource \u0633\u0627\u062f\u0647: \u0631\u0647\u06af\u06cc\u0631\u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0635\u0644\u0627\u062d \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u0646\u062f \u0627\u0632 HTTPRESOURCE \u0628\u0627 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u062a\u0645\u06cc\u0632\u062a\u0631 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u067e\u0627\u06cc\u0627\u0646<\/li>\n<li>\u0627\u062f\u063a\u0627\u0645 httpinterceptors \u0628\u0627 \u0633\u0627\u062e\u062a\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0633\u0627\u0632\u0647 httpresource \u0631\u0648\u0634\u06cc \u0642\u0648\u06cc \u0648 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc HTTP \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0631\u0647\u06af\u06cc\u0631\u0627\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u062a\u0627 \u0646\u06af\u0631\u0627\u0646\u06cc \u0647\u0627\u06cc \u0645\u062a\u0642\u0627\u0628\u0644 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0624\u062b\u0631 \u0628\u0631\u0637\u0631\u0641 \u06a9\u0646\u06cc\u062f \u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 httpresource \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639 \u0645\u0646\u0627\u0628\u0639 \u062e\u0627\u0635 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0627 \u062a\u0631\u06a9\u06cc\u0628 \u0627\u06cc\u0646 \u062f\u0648 \u0648\u06cc\u0698\u06af\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0622\u0645\u062f \u060c \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648 \u0645\u0642\u0627\u0648\u0645 \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 \u062e\u0637\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D9%86%D8%A7%D8%A8%D8%B9\"><\/span>\n<p>  \u0645\u0646\u0627\u0628\u0639<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0632\u0627\u0648\u06cc\u0647 \u062f\u0627\u0631 httpResource \u0631\u0648\u0634\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0631\u0627\u062d\u062a \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc HTTP \u060c \u0628\u0647 \u0648\u06cc\u0698\u0647 \u0647\u0646\u06af\u0627\u0645 \u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627 \u0645\u0646\u0627\u0628\u0639\u06cc \u0645\u0627\u0646\u0646\u062f \u062d\u0628\u0627\u0628 \u0648 \u0628\u0627\u0641\u0631 \u0622\u0631\u0627\u06cc\u0647 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0627\u063a\u0644\u0628 \u0628\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0627\u0633\u0627\u0633\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f. \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0644\u0627\u0632\u0645 \u0628\u0627\u0634\u062f \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a &hellip;<\/p>\n","protected":false},"author":2,"featured_media":105526,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv21aba7fve0soqhb6fhw.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-105525","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\/105525","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=105525"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/105525\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/105526"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=105525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=105525"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=105525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}