{"id":22062,"date":"2026-04-07T13:57:17","date_gmt":"2026-04-07T13:57:17","guid":{"rendered":"https:\/\/umang.pk\/2026\/04\/07\/toy-api-%da%a9%d8%a7%d9%84%d8%b2-%da%a9%d9%88-javascript-%da%a9%db%92-%d8%b3%d8%a7%d8%aa%da%be-%d9%be%d8%b1%d9%88%da%88%da%a9%d8%b4%d9%86-%da%a9%db%92-%d9%84%db%8c%db%92-%d8%aa%db%8c%d8%a7%d8%b1\/"},"modified":"2026-04-07T13:57:17","modified_gmt":"2026-04-07T13:57:17","slug":"toy-api-%da%a9%d8%a7%d9%84%d8%b2-%da%a9%d9%88-javascript-%da%a9%db%92-%d8%b3%d8%a7%d8%aa%da%be-%d9%be%d8%b1%d9%88%da%88%da%a9%d8%b4%d9%86-%da%a9%db%92-%d9%84%db%8c%db%92-%d8%aa%db%8c%d8%a7%d8%b1","status":"publish","type":"post","link":"https:\/\/umang.pk\/ur\/2026\/04\/07\/toy-api-%da%a9%d8%a7%d9%84%d8%b2-%da%a9%d9%88-javascript-%da%a9%db%92-%d8%b3%d8%a7%d8%aa%da%be-%d9%be%d8%b1%d9%88%da%88%da%a9%d8%b4%d9%86-%da%a9%db%92-%d9%84%db%8c%db%92-%d8%aa%db%8c%d8%a7%d8%b1\/","title":{"rendered":"Toy API \u06a9\u0627\u0644\u0632 \u06a9\u0648 JavaScript \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u0646\u06cc\u0679 \u0648\u0631\u06a9\u0646\u06af \u0645\u06cc\u06ba \u06a9\u06cc\u0633\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4"},"content":{"rendered":"\n<div id=\"\">\n<p>\u0627\u0633 \u0645\u0646\u0638\u0631 \u0646\u0627\u0645\u06d2 \u06a9\u0627 \u062a\u0635\u0648\u0631 \u06a9\u0631\u06cc\u06ba\u06d4 \u06c1\u0645 \u0635\u0628\u062d \u06a9\u06d2 \u0648\u0642\u062a \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0628\u06be\u06cc\u062c\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u062f\u0648\u067e\u06c1\u0631 \u0645\u06cc\u06ba\u060c \u0635\u0627\u0631\u0641 \u0628\u0679\u0646 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 UI \u0628\u06a9\u0648\u0627\u0633 \u062f\u06a9\u06be\u0627\u0646\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631 \u062f\u06cc\u062a\u0627 \u06c1\u06d2: \u063a\u0644\u0637 \u0646\u062a\u0627\u0626\u062c\u060c \u06af\u0645\u0634\u062f\u06c1 \u0627\u067e \u0688\u06cc\u0679\u0633\u060c \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u063a\u0644\u0637\u06cc\u0627\u06ba \u062c\u0646\u06c1\u06cc\u06ba \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u067e\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u06cc\u0634 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627\u06d4<\/p>\n<p>\u06a9\u06be\u0644\u0648\u0646\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u06cc\u06c1\u06cc \u0641\u0627\u0635\u0644\u06c1 \u06c1\u06d2\u06d4 <code>fetch()<\/code> \u0679\u06a9\u0691\u0648\u06ba \u0627\u0648\u0631 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u0646\u06cc\u0679 \u0648\u0631\u06a9\u0646\u06af\u06d4<\/p>\n<p>\u0627\u0633 \u06af\u0627\u0626\u06cc\u0688 \u0645\u06cc\u06ba\u060c \u0622\u067e \u0627\u0633 \u062e\u0644\u0627 \u06a9\u0648 \u062e\u062a\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1 \u0633\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2\u06d4 \u06c1\u0645 \u0633\u0627\u062f\u06c1 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0634\u0631\u0648\u0639\u0627\u062a \u06a9\u0631\u06cc\u06ba \u06af\u06d2 \u0627\u0648\u0631 \u0628\u062a\u062f\u0631\u06cc\u062c \u0627\u0635\u0644\u06cc \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0631\u06a9\u0627\u0631 \u067e\u06cc\u0679\u0631\u0646 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u060c \u062c\u06cc\u0633\u06d2 \u0622\u0631\u0688\u0631\u0646\u06af \u06a9\u0646\u0679\u0631\u0648\u0644\u060c \u0646\u0627\u06a9\u0627\u0645\u06cc \u0633\u06d2 \u0646\u0645\u0679\u0646\u06d2\u060c \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0645\u0646\u0633\u0648\u062e\u06cc\u06d4 \u0628\u0639\u062f \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u0627\u067e\u0646\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06d2 \u0645\u0639\u0627\u0645\u0644\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0635\u062d\u06cc\u062d \u0679\u0648\u0644 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u0622\u067e \u06a9\u06cc \u0645\u062f\u062f \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0631\u06cc\u0679 \u06a9\u0648 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u0646\u06d2\u060c \u0633\u0631\u06a9\u0679 \u0628\u0631\u06cc\u06a9\u0631\u0632\u060c \u0627\u0646\u0636\u0645\u0627\u0645 \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u060c \u0627\u0648\u0631 \u06a9\u06cc\u0634\u0646\u06af \u062c\u06cc\u0633\u06d2 \u0645\u0632\u06cc\u062f \u062c\u062f\u06cc\u062f \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<h2 id=\"heading-what-well-cover\">\u062c\u0633 \u06a9\u0627 \u06c1\u0645 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/h2>\n<h2 id=\"heading-prerequisites\">\u0634\u0631\u0637\u06cc\u06ba<\/h2>\n<p>\u0622\u067e \u06a9\u0648 \u0645\u0627\u06c1\u0631 \u0628\u0646\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0622\u067e \u06a9\u0648 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u062f\u0631\u062c \u0630\u06cc\u0644 \u062c\u0627\u0646\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2:<\/p>\n<ul>\n<li>\n<p>\u06a9\u0648\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0627\u0648\u0631 <code>async\/await<\/code><\/p>\n<\/li>\n<li>\n<p>\u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u0627 \u0688\u06cc\u0641\u0627\u0644\u0679 DOM \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>npm \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 Node.js \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u0648 \u06a9\u06cc\u0633\u06d2 \u0686\u0644\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0628\u0631\u0627\u0624\u0632\u0631 DevTools \u0645\u06cc\u06ba \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u0627 \u0645\u0639\u0627\u0626\u0646\u06c1 \u06a9\u06cc\u0633\u06d2 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-what-this-repo-does\">\u0627\u0633 \u0630\u062e\u06cc\u0631\u06c1 \u06a9\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a<\/h2>\n<p>\u0627\u0633 \u0645\u0636\u0645\u0648\u0646 \u06a9\u0627 \u0633\u0627\u062a\u06be\u06cc \u06a9\u0648\u0688 GitHub repository js-fetch-production-demo \u0645\u06cc\u06ba \u062f\u0633\u062a\u06cc\u0627\u0628 \u06c1\u06d2\u06d4 \u0627\u0633 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0686\u06be\u0648\u0679\u0627 \u0627\u06cc\u06a9\u0633\u067e\u0631\u06cc\u0633 \u0628\u06cc\u06a9 \u0627\u06cc\u0646\u0688 \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0686\u06be\u0648\u0679\u0627 \u0648\u0646\u06cc\u0644\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u0634\u0627\u0645\u0644 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06cc\u067e \u0679\u06a9\u0679\u0648\u06ba \u06a9\u06cc \u0642\u0637\u0627\u0631 \u0645\u06cc\u06ba \u0644\u06af\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0646\u0638\u0627\u0645 \u06a9\u06cc \u062a\u0642\u0644\u06cc\u062f \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u062c\u06c1\u0627\u06ba \u0628\u06cc\u06a9 \u0627\u06cc\u0646\u0688 \u06a9\u06cc \u06c1\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0648 \u062f\u06cc \u06af\u0626\u06cc \u0642\u0637\u0627\u0631 ID \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06af\u0644\u0627 \u0679\u06a9\u0679 \u0646\u0645\u0628\u0631 \u062a\u0641\u0648\u06cc\u0636 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06c1\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06c1\u0631 \u0642\u0637\u0627\u0631 ID \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u06a9\u0627\u0624\u0646\u0679\u0631 \u06a9\u0648 \u0628\u0691\u06be\u0627\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u06c1\u0631 \u0648\u0627\u067e\u0633\u06cc \u0679\u06a9\u0679 \u0646\u0645\u0628\u0631 \u06a9\u0648 DOM \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u067e\u0633\u062f\u06cc\u062f \u0628\u06d2 \u0646\u0642\u0627\u0628 \u06c1\u06d2\u06d4 <code>\/tickets\/:id\/nextNumber<\/code>\u06c1\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u06af\u0644\u0627 \u0646\u0645\u0628\u0631 \u0648\u0627\u067e\u0633 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u0633 \u0679\u06a9\u0679 ID \u06a9\u06d2 \u06a9\u0627\u0624\u0646\u0679\u0631 \u0645\u06cc\u06ba \u0627\u0636\u0627\u0641\u06c1 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u0622\u067e \u06a9\u0648 \u0679\u06a9\u0679 \u06a9\u06cc ID \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u0646\u06d2\u060c \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u06be\u06cc\u062c\u0646\u06d2\u060c \u0627\u0648\u0631 \u0648\u0627\u067e\u0633 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u06c1\u0631 \u0646\u0645\u0628\u0631 \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u0635\u0641\u062d\u06c1 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2 \u062a\u0627\u06a9\u06c1 \u0622\u067e \u0648\u0627\u0636\u062d \u0637\u0648\u0631 \u067e\u0631 \u062f\u06cc\u06a9\u06be \u0633\u06a9\u06cc\u06ba \u06a9\u06c1 \u0648\u0642\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062c\u0648\u0627\u0628\u0627\u062a \u06a9\u06cc\u0633\u06d2 \u0622\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u062c\u06cc\u0633\u0627 \u06a9\u06c1 \u0645\u0636\u0645\u0648\u0646 \u06c1\u0631 \u0633\u0637\u062d \u067e\u0631 \u0622\u06af\u06d2 \u0628\u0691\u06be\u062a\u0627 \u06c1\u06d2\u060c \u06c1\u0645 \u062d\u0642\u06cc\u0642\u06cc \u062f\u0646\u06cc\u0627 \u06a9\u06d2 \u0646\u06cc\u0679 \u0648\u0631\u06a9\u0646\u06af \u067e\u06cc\u0679\u0631\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0686\u06cc\u0644\u0646\u062c\u0632 \u0627\u0648\u0631 \u062d\u0644 \u062f\u06a9\u06be\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u06cc \u0627\u06cc\u067e \u067e\u0631 \u062a\u0648\u0633\u06cc\u0639 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<h2 id=\"heading-how-to-install\">\u062a\u0646\u0635\u06cc\u0628 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1<\/h2>\n<p>\u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0631\u0648\u0679 \u0645\u06cc\u06ba \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0645\u0627\u0646\u0688 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u06cc\u06ba:<\/p>\n<pre><code class=\"language-bash\">npm run install:all\n<\/code><\/pre>\n<h2 id=\"heading-how-to-run\">\u06a9\u06cc\u0633\u06d2 \u0686\u0644\u0627\u0626\u06cc\u06ba<\/h2>\n<p>\u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0631\u0648\u0679 \u0633\u06d2 \u062f\u0648\u0646\u0648\u06ba \u0633\u0631\u0648\u0631\u0632 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">npm run dev\n<\/code><\/pre>\n<p>\u067e\u06be\u0631 \u0627\u067e\u0646\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba http:\/\/localhost:5173 \u06a9\u06be\u0648\u0644\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-basic-fetch\">\u0628\u0646\u06cc\u0627\u062f\u06cc <code>fetch<\/code><\/h2>\n<p>\u0622\u0626\u06cc\u06d2 \u0633\u0628 \u0633\u06d2 \u0622\u0633\u0627\u0646 \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0628\u0679\u0646 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0627\u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 UI \u0648\u0627\u067e\u0633 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u0679\u06a9\u0679 \u0646\u0645\u0628\u0631 \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0688\u06cc\u0645\u0648 \u067e\u0633\u062f\u06cc\u062f \u06a9\u0648 \u0628\u06d2 \u0646\u0642\u0627\u0628 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>GET \/tickets\/:id\/nextNumber<\/code>. \u06c1\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0633 \u0679\u06a9\u0679 ID \u06a9\u06d2 \u06a9\u0627\u0624\u0646\u0679\u0631 \u0645\u06cc\u06ba \u0627\u0636\u0627\u0641\u06c1 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0646\u0626\u06cc \u0642\u06cc\u0645\u062a \u0648\u0627\u067e\u0633 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u06d2 \u0628\u06c1\u0627\u0624 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u062f\u0631\u062c \u0630\u06cc\u0644 \u0628\u0646\u06cc\u0627\u062f\u06cc \u062f\u0631\u0622\u0645\u062f\u06cc \u067e\u06cc\u0679\u0631\u0646 \u06a9\u0627\u0641\u06cc \u06c1\u06d2:<\/p>\n<pre><code class=\"language-js\">const res = await fetch(\"\/tickets\/1\/nextNumber\");\nconst ticket = await res.json();\ndocument.querySelector(\".tickets\").append(ticket.ticketNumber);\n<\/code><\/pre>\n<h2 id=\"heading-handling-slow-networks-and-preventing-out-of-order-responses\">\u0633\u0633\u062a \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u0627\u0648\u0631 \u063a\u0644\u0637 \u062c\u0648\u0627\u0628\u0627\u062a \u0633\u06d2 \u06af\u0631\u06cc\u0632 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u0627\u0633 \u0633\u0637\u062d \u067e\u0631 \u0633\u0628 \u06a9\u0686\u06be \u062f\u0631\u0633\u062a \u0646\u0638\u0631 \u0622\u062a\u0627 \u06c1\u06d2\u06d4 \u0644\u06cc\u06a9\u0646 \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u06c1\u0645\u06cc\u0634\u06c1 \u0627\u0633 \u0637\u0631\u062d \u06a9\u06cc \u067e\u06cc\u0634 \u06af\u0648\u0626\u06cc \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0631\u0641\u062a\u0627\u0631 \u0645\u062e\u062a\u0644\u0641 \u06c1\u0648 \u0633\u06a9\u062a\u06cc \u06c1\u06d2. \u06a9\u0686\u06be \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u0645\u06cc\u06ba \u062f\u0648\u0633\u0631\u0648\u06ba \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0648\u0642\u062a \u0644\u06af \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06cc \u062a\u0642\u0644\u06cc\u062f \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u0626\u06cc\u06d2 \u0628\u06cc\u06a9 \u0627\u06cc\u0646\u0688 \u0645\u06cc\u06ba \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u062a\u0627\u062e\u06cc\u0631 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-js\">\/\/ \/backend\/index.js\napp.get('\/tickets\/:id\/nextNumber', (req, res) => {\n  const ticketId = req.params.id;\n\n  \/\/ Initialize counter if it doesn't exist\n  if (!counters[ticketId]) {\n    counters[ticketId] = 0;\n  }\n\n  counters[ticketId]++;\n  const assignedNumber = counters[ticketId];\n\n  \/\/ Delay the response to simulate slow network\n  const delay = Math.floor(Math.random() * 5000);\n  setTimeout(() => {\n    res.json({\n      ticketId: ticketId,\n      ticketNumber: assignedNumber\n    });\n  }, delay);\n});\n<\/code><\/pre>\n<p>\u0622\u067e \u062c\u0648 \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0645\u062d\u0633\u0648\u0633 \u06a9\u0631\u06cc\u06ba \u06af\u06d2 \u0648\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0633\u0633\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc\u06ba UI \u06a9\u0648 \u063a\u06cc\u0631 \u062c\u0648\u0627\u0628\u062f\u06c1 \u0645\u062d\u0633\u0648\u0633 \u06a9\u0631 \u0633\u06a9\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0644\u0648\u0688 \u0627\u0646\u0688\u06cc\u06a9\u06cc\u0679\u0631 \u0645\u062f\u062f\u06af\u0627\u0631 \u062b\u0627\u0628\u062a \u06c1\u0648 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 \u062a\u0627\u06c1\u0645\u060c \u06cc\u06c1 UI \u0633\u0637\u062d \u06a9\u06cc \u0628\u06c1\u062a\u0631\u06cc \u06c1\u06d2\u060c \u0646\u06cc\u0679 \u0648\u0631\u06a9\u0646\u06af \u067e\u06cc\u0679\u0631\u0646 \u0646\u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u0627\u0648\u0631\u060c \u0632\u06cc\u0627\u062f\u06c1 \u0627\u06c1\u0645 \u0645\u0633\u0626\u0644\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0627\u06af\u0631 \u06a9\u0648\u0626\u06cc \u0635\u0627\u0631\u0641 \u0645\u062a\u0639\u062f\u062f \u0628\u0627\u0631 \u062a\u06cc\u0632\u06cc \u0633\u06d2 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u062c\u0648\u0627\u0628\u0627\u062a \u062a\u0631\u062a\u06cc\u0628 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u06c1\u0648 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img alt=\"UI \u0633\u06d2 \u063a\u0644\u0637 \u062c\u0648\u0627\u0628\" style=\"display:block;margin:0 auto\" width=\"600\" height=\"400\" loading=\"lazy\"\/><\/p>\n<p>\u06cc\u06c1 \u067e\u06cc\u062f\u0627\u0648\u0627\u0631\u06cc \u0645\u0627\u062d\u0648\u0644 \u0645\u06cc\u06ba \u0646\u0627\u0642\u0627\u0628\u0644 \u0642\u0628\u0648\u0644 \u06c1\u06d2\u06d4 \u062a\u0648 \u06c1\u0645 \u06cc\u06c1 \u06a9\u06cc\u0633\u06d2 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 UI \u0679\u06a9\u0679 \u0646\u0645\u0628\u0631\u0648\u06ba \u06a9\u06cc \u0635\u062d\u06cc\u062d \u062a\u0631\u062a\u06cc\u0628 \u06a9\u0648 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0686\u0627\u06c1\u06d2 \u062c\u0648\u0627\u0628\u0627\u062a \u0645\u062e\u062a\u0644\u0641 \u062a\u0631\u062a\u06cc\u0628 \u0645\u06cc\u06ba \u0622\u0626\u06cc\u06ba\u061f<\/p>\n<p>\u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0627 \u0645\u0639\u0627\u0645\u0644\u06c1 \u0622\u0633\u0627\u0646 \u06c1\u06d2\u06d4 \u0686\u0648\u0646\u06a9\u06c1 \u0641\u0648\u0631\u06cc \u06a9\u0644\u06a9 \u06a9\u0631\u0646\u0627 \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u0627\u0631\u0627\u062f\u06d2 \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0622\u067e \u0628\u0679\u0646 \u06a9\u0648 \u0627\u0633 \u0648\u0642\u062a \u062a\u06a9 \u063a\u06cc\u0631 \u0641\u0639\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0628 \u062a\u06a9 \u06a9\u06c1 \u067e\u06c1\u0644\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u06a9\u0645\u0644 \u0646\u06c1 \u06c1\u0648 \u062c\u0627\u0626\u06d2 (\u062f\u0648\u0633\u0631\u06cc UI \u0633\u0637\u062d \u06a9\u06cc \u0628\u06c1\u062a\u0631\u06cc)\u06d4<\/p>\n<p>\u0644\u06cc\u06a9\u0646 \u06c1\u0645 \u0645\u0632\u06cc\u062f \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <strong>\u062c\u0628 \u0646\u0626\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc\u06ba \u06c1\u0648\u06ba \u062a\u0648 \u0632\u06cc\u0631 \u0627\u0644\u062a\u0648\u0627\u0621 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u0648 \u0645\u0646\u0633\u0648\u062e \u06a9\u0631\u06cc\u06ba\u06d4<\/strong>. \u06cc\u06c1 \u062c\u06af\u06c1 <code>AbortController<\/code> \u06cc\u06c1 \u0648\u06c1 \u062c\u06af\u06c1 \u06c1\u06d2 \u062c\u06c1\u0627\u06ba API \u0622\u062a\u0627 \u06c1\u06d2\u06d4 <code>AbortController<\/code> \u06c1\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062b\u0627\u0644\u06cc\u06ba \u0627\u0648\u0631 \u06a9\u0627\u0644\u0632 <code>abort()<\/code> \u062c\u0628 \u06a9\u0648\u0626\u06cc \u0646\u0626\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0634\u0631\u0648\u0639 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u060c \u062a\u0648 \u06c1\u0645 \u0627\u0633 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0635\u0631\u0641 \u062d\u0627\u0644\u06cc\u06c1 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0648 \u0686\u0627\u0644\u0648 \u06a9\u0631\u06d2 \u06af\u0627 \u0627\u0648\u0631 \u062a\u0645\u0627\u0645 \u067e\u0631\u0627\u0646\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u0648 \u0645\u0646\u0633\u0648\u062e \u06a9\u0631 \u062f\u06d2 \u06af\u0627\u06d4<\/p>\n<p>UI \u0645\u06cc\u06ba \u0628\u06c1\u062a\u0631\u06cc \u0627\u0648\u0631 \u0645\u0646\u0633\u0648\u062e\u06cc \u06a9\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u0627\u0628 \u0622\u067e \u063a\u0644\u0637 \u062c\u0648\u0627\u0628\u0627\u062a \u06a9\u06cc \u0641\u06a9\u0631 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u0641\u0648\u0631\u06cc \u06a9\u0644\u06a9\u0633 \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u06a9\u0648\u0688:<\/p>\n<pre><code class=\"language-js\">\/\/ frontend\/main.js\nconst ticketIdInput = document.getElementById('ticketId');\nconst fetchBtn = document.getElementById('fetchBtn');\nconst ticketList = document.getElementById('ticketList');\nconst loading = document.getElementById('loading');\n\nlet currentController = null;\n\nfunction setLoadingState(isLoading) {\n  fetchBtn.disabled = isLoading;\n  loading.classList.toggle('hidden', !isLoading);\n}\n\nfetchBtn.addEventListener('click', async () => {\n  const ticketId = ticketIdInput.value.trim();\n  \n  if (!ticketId) {\n    alert('Please enter a ticket ID');\n    return;\n  }\n\n  \/\/ Abort any in-flight request for this queue before starting a new one\n  if (currentController) {\n    currentController.abort();\n  }\n  currentController = new AbortController();\n  setLoadingState(true);\n\n  try {\n    const res = await fetch(`\/tickets\/${ticketId}\/nextNumber`, { signal: currentController.signal });\n    const data = await res.json();\n    \n    \/\/ Append to DOM\n    const ticketElement = document.createElement('div');\n    ticketElement.className=\"ticket-item\";\n    ticketElement.textContent = `Queue \\({data.ticketId}: #\\){data.ticketNumber}`;\n    ticketList.appendChild(ticketElement);\n    \n    \/\/ Scroll to latest item\n    ticketElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  } catch (error) {\n    if (error.name === 'AbortError') return;\n    console.error('Error fetching ticket:', error);\n    alert('Error fetching ticket');\n  } finally {\n    setLoadingState(false);\n  }\n});\n<\/code><\/pre>\n<p>\u06a9\u0648\u0688 \u06cc\u06c1\u0627\u06ba \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2: <code>01-abortController<\/code> \u0622\u067e \u0631\u06cc\u067e\u0648\u0632\u0679\u0631\u06cc \u0645\u06cc\u06ba \u0628\u0631\u0627\u0646\u0686 \u067e\u0631 \u062c\u0627 \u06a9\u0631 \u0645\u06a9\u0645\u0644 \u0639\u0645\u0644 \u062f\u0631\u0622\u0645\u062f \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">git checkout 01-abortController\n<\/code><\/pre>\n<h2 id=\"heading-handling-http-errors-and-unreliable-responses\">HTTP \u063a\u0644\u0637\u06cc\u0648\u06ba \u0627\u0648\u0631 \u0646\u0627\u0642\u0627\u0628\u0644 \u0627\u0639\u062a\u0645\u0627\u062f \u062c\u0648\u0627\u0628\u0627\u062a \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u0646\u0627<\/h2>\n<p>\u0646\u06cc\u0679 \u0648\u0631\u06a9 \u062f\u0648\u0633\u0631\u06d2 \u0637\u0631\u06cc\u0642\u0648\u06ba \u0633\u06d2 \u0628\u06be\u06cc \u063a\u06cc\u0631 \u0645\u062a\u0648\u0642\u0639 \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc \u06a9\u06cc \u0648\u062c\u06c1 \u0633\u06d2 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0646\u0627\u06a9\u0627\u0645 \u06c1\u0648 \u062c\u0627\u062a\u06cc \u06c1\u06d2 \u06cc\u0627 \u0633\u0631\u0648\u0631 500 \u063a\u0644\u0637\u06cc \u0648\u0627\u067e\u0633 \u06a9\u0631 \u062f\u06cc\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u06a9\u06cc\u0627 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u061f \u06a9\u06c1 <code>fetch()<\/code> \u0686\u0648\u0646\u06a9\u06c1 API HTTP \u06a9\u06cc \u063a\u0644\u0637\u06cc\u0627\u06ba \u0646\u06c1\u06cc\u06ba \u067e\u06be\u06cc\u0646\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0622\u067e \u06a9\u0648 \u0631\u062f\u0639\u0645\u0644 \u06a9\u06cc \u062d\u06cc\u062b\u06cc\u062a \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u0626\u06cc\u06d2 \u0627\u067e\u0646\u06d2 \u067e\u0633\u062f\u06cc\u062f \u0645\u06cc\u06ba \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u0646\u0627\u06a9\u0627\u0645\u06cc\u0648\u06ba \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-js\">app.get('\/tickets\/:id\/nextNumber', (req, res) => {\n  const ticketId = req.params.id;\n\n  \/\/ Initialize counter if it doesn't exist\n  if (!counters[ticketId]) {\n    counters[ticketId] = 0;\n  }\n\n  counters[ticketId]++;\n  const assignedNumber = counters[ticketId];\n  const shouldFail = Math.random() < 0.3; \/\/ 30% chance to fail with a 500 error\n\n  const delay = Math.floor(Math.random() * 5000);\n  setTimeout(() => {\n    if (shouldFail) {\n      res.status(500).json({\n        error: 'Random backend failure',\n        ticketId: ticketId\n      });\n      return;\n    }\n\n    res.json({\n      ticketId: ticketId,\n      ticketNumber: assignedNumber\n    });\n  }, delay);\n});\n<\/code><\/pre>\n<p>\u062c\u0628 \u0622\u067e \u0627\u06cc\u067e \u0686\u0644\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0622\u067e \u06a9\u0648 \u06a9\u0686\u06be \u0627\u0633 \u0637\u0631\u062d \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u0627:<\/p>\n<p><img alt=\"UI \u0645\u06cc\u06ba \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u063a\u0644\u0637\u06cc\u0627\u06ba\" style=\"display:block;margin:0 auto\" width=\"600\" height=\"400\" loading=\"lazy\"\/><\/p>\n<p>\u06a9\u06cc\u0627 \u0639\u062c\u06cc\u0628 \u0628\u0627\u062a \u06c1\u06d2 \u06a9\u06c1 \u0645\u06cc\u06ba \u0646\u06d2 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u06a9\u0648 \u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u0627 \u06c1\u06d2\u06d4 <code>fetch()<\/code> \u06a9\u0648 <code>try\/catch<\/code> \u0686\u0648\u0646\u06a9\u06c1 \u06cc\u06c1 \u0628\u0644\u0627\u06a9 \u06c1\u0648\u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0645\u06cc\u06ba \u062a\u0648\u0642\u0639 \u06a9\u0631\u062a\u0627 \u06c1\u0648\u06ba \u06a9\u06c1 \u06a9\u0648\u0626\u06cc \u062e\u0631\u0627\u0628\u06cc \u0648\u0627\u0642\u0639 \u06c1\u0648\u06af\u06cc\u06d4 \u0644\u06cc\u06a9\u0646 <code>fetch()<\/code> \u0635\u0631\u0641 <strong>\u0627\u0633 \u0648\u0642\u062a \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u0628 HTTP \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4<\/strong>. \u0644\u06c1\u0630\u0627 \u0627\u06af\u0631 \u0633\u0631\u0648\u0631 500 \u063a\u0644\u0637\u06cc \u0648\u0627\u067e\u0633 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c <code>fetch()<\/code> \u06cc\u06c1 \u06a9\u0627\u0645\u06cc\u0627\u0628\u06cc \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062d\u0644 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627\u060c \u0622\u067e \u06a9\u0648 \u062c\u0648\u0627\u0628 \u06a9\u06cc \u062d\u06cc\u062b\u06cc\u062a \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2 \u06a9\u06c1 \u0622\u06cc\u0627 \u06cc\u06c1 \u06a9\u0648\u0626\u06cc \u063a\u0644\u0637\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u067e \u0686\u06cc\u06a9 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <code>res.ok<\/code> \u062f\u0631\u0622\u0645\u062f \u06a9\u0627\u0644 \u06a9\u06d2 \u0628\u0639\u062f:<\/p>\n<pre><code class=\"language-js\">try {\n  const res = await fetch(`\/tickets\/${ticketId}\/nextNumber`, { signal: currentController.signal });\n  \n  if (!res.ok) {\n    throw new Error(`HTTP error! status: ${res.status}`);\n  }\n\n  const data = await res.json();\n  \n  \/\/ Append to DOM\n  const ticketElement = document.createElement('div');\n  ticketElement.className=\"ticket-item\";\n  ticketElement.textContent = `Queue \\({data.ticketId}: #\\){data.ticketNumber}`;\n  ticketList.appendChild(ticketElement);\n  \n  \/\/ Scroll to latest item\n  ticketElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n} catch (error) {\n  if (error.name === 'AbortError') return;\n  console.error('Error fetching ticket:', error);\n  alert('Error fetching ticket');\n} finally {\n  setLoadingState(false);\n}\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u06a9\u06cc \u063a\u0644\u0637\u06cc\u0648\u06ba \u0627\u0648\u0631 HTTP \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc\u0648\u06ba \u06a9\u0648 \u067e\u06a9\u0691 \u0644\u06d2 \u06af\u0627\u06d4 \u0645\u0632\u06cc\u062f \u0628\u0631\u0622\u06ba\u060c \u06cc\u06c1\u0627\u06ba \u062a\u06a9 \u06a9\u06c1 \u0627\u06af\u0631 \u0628\u06cc\u06a9 \u0627\u06cc\u0646\u0688 500 \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc \u067e\u06be\u06cc\u0646\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0628 \u0628\u06be\u06cc \u06cc\u06c1 \u06a9\u0627\u0624\u0646\u0679\u0631 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0627\u06af\u0644\u06cc \u06a9\u0627\u0645\u06cc\u0627\u0628 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u06cc\u06a9 \u0627\u0636\u0627\u0641\u06c1 \u0634\u062f\u06c1 \u0679\u06a9\u0679 \u0646\u0645\u0628\u0631 \u0648\u0627\u067e\u0633 \u06a9\u0631 \u062f\u06d2 \u06af\u06cc\u06d4<\/p>\n<p>\u06af\u0632\u0627\u0631\u0634 \u06c1\u06d2 \u06d4 <strong>\u0628\u06d2 \u062d\u0633\u06cc<\/strong>\u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u06c1 \u0628\u0627\u0631 \u0628\u0627\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u06d2 \u0645\u062e\u062a\u0644\u0641 \u0627\u062b\u0631\u0627\u062a \u06c1\u0648 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06cc\u06a9 API \u06a9\u0648 \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a\u060c \u0627\u0633 \u0628\u0627\u062a \u067e\u0631 \u063a\u0648\u0631 \u06a9\u0631\u0646\u0627 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2 \u06a9\u06c1 \u0622\u06cc\u0627 \u0627\u062e\u062a\u062a\u0627\u0645\u06cc \u0646\u0642\u0637\u0648\u06ba \u06a9\u0648 \u063a\u06cc\u0631\u0645\u0639\u0645\u0648\u0644\u06cc \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2 \u0627\u0648\u0631 \u06cc\u06c1 \u06a9\u0633 \u0637\u0631\u062d \u063a\u0644\u0637\u06cc \u0633\u06d2 \u0646\u0645\u0679\u0646\u06d2 \u0627\u0648\u0631 \u06a9\u0644\u0627\u0626\u0646\u0679 \u06a9\u06cc \u062c\u0627\u0646\u0628 \u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634\u0648\u06ba \u06a9\u0648 \u0645\u062a\u0627\u062b\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u062e\u0631\u0627\u0628\u06cc \u0633\u06d2 \u0646\u0645\u0679\u0646\u06d2 \u06a9\u0627 \u06a9\u0648\u0688 \u06c1\u06d2\u06d4 <code>02-errorHandling<\/code> \u0622\u067e \u0631\u06cc\u067e\u0648\u0632\u0679\u0631\u06cc \u0645\u06cc\u06ba \u0628\u0631\u0627\u0646\u0686 \u067e\u0631 \u062c\u0627 \u06a9\u0631 \u0645\u06a9\u0645\u0644 \u0639\u0645\u0644 \u062f\u0631\u0622\u0645\u062f \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">git checkout 02-errorHandling\n<\/code><\/pre>\n<h2 id=\"heading-adding-automatic-retries-for-transient-failures\">\u0639\u0627\u0631\u0636\u06cc \u063a\u0644\u0637\u06cc\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u0634\u0627\u0645\u0644 \u06a9\u06cc \u06af\u0626\u06cc\u06d4<\/h2>\n<p>\u0627\u0633 \u0645\u0642\u0627\u0645 \u067e\u0631 \u06c1\u0645 \u0646\u06d2 \u062e\u0627\u0645 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0628\u0646\u06cc\u0627\u062f\u06cc \u063a\u0644\u0637\u06cc \u0633\u06d2 \u0646\u0645\u0679\u0646\u06d2 \u0627\u0648\u0631 \u0645\u0646\u0633\u0648\u062e\u06cc \u06a9\u0648 \u0646\u0627\u0641\u0630 \u06a9\u06cc\u0627 \u06c1\u06d2\u06d4 <code>fetch()<\/code>. \u062a\u0627\u06c1\u0645\u060c \u0641\u06cc \u0627\u0644\u062d\u0627\u0644\u060c \u0627\u06af\u0631 \u06a9\u0648\u0626\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0646\u0627\u06a9\u0627\u0645 \u06c1\u0648\u062c\u0627\u062a\u06cc \u06c1\u06d2\u060c \u062a\u0648 \u0635\u0627\u0631\u0641 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0633\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0628\u0679\u0646 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u0646\u0627 \u06c1\u0648\u06af\u0627\u06d4 \u062a\u0627\u06c1\u0645\u060c \u06a9\u0686\u06be \u063a\u0644\u0637\u06cc\u0627\u06ba \u0639\u0627\u0631\u0636\u06cc \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0622\u067e \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u067e\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631 \u06a9\u06d2 \u0627\u0633\u06d2 \u062d\u0644 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0637\u0631\u06cc\u0642\u06c1 \u06a9\u0627\u0631 \u06a9\u0648 \u0644\u0627\u06af\u0648 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06c1\u0627\u0631 \u0645\u0627\u0646\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u06cc\u06a9 \u0646\u0627\u06a9\u0627\u0645 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0648 \u0627\u06cc\u06a9 \u062e\u0627\u0635 \u062a\u0639\u062f\u0627\u062f \u0645\u06cc\u06ba \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631\u0646\u0627\u06d4 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0633\u0627\u062f\u06c1 \u0644\u0648\u067e \u0627\u0648\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062a\u06be\u0648\u0691\u06cc \u062a\u0627\u062e\u06cc\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u0648\u0631\u0627 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u062d\u06a9\u0645\u062a \u0639\u0645\u0644\u06cc \u0632\u06cc\u0627\u062f\u06c1 \u067e\u06cc\u0686\u06cc\u062f\u06c1 \u06c1\u0648 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u0645\u062e\u062a\u0635\u0631 \u0648\u0642\u062a \u0645\u06cc\u06ba \u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u067e\u0646\u06d2 \u0633\u0631\u0648\u0631 \u06a9\u0648 \u0627\u0648\u0648\u0631 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0628\u0686\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u0645\u0645\u06a9\u0646\u06c1 \u0628\u06cc\u06a9 \u0622\u0641 \u06a9\u0648 \u0644\u0627\u06af\u0648 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06ba \u06af\u06d2\u060c \u062c\u06c1\u0627\u06ba \u06c1\u0631 \u06a9\u0648\u0634\u0634 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062a\u0627\u062e\u06cc\u0631 \u062a\u06cc\u0632\u06cc \u0633\u06d2 \u0628\u0691\u06be \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0645\u0646\u0637\u0642 \u06a9\u0648 \u0627\u0646 \u063a\u0644\u0637\u06cc\u0648\u06ba \u06a9\u0648 \u0628\u06be\u06cc \u0645\u062f\u0646\u0638\u0631 \u0631\u06a9\u06be\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2 \u062c\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u06cc\u06ba (\u062c\u06cc\u0633\u06d2 \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc\u0627\u06ba\u060c 500 \u063a\u0644\u0637\u06cc\u0627\u06ba) \u0627\u0648\u0631 \u062c\u0648 \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba (\u062c\u06cc\u0633\u06d2 400 \u063a\u0644\u0637\u06cc\u0627\u06ba)\u06d4<\/p>\n<p>\u062e\u0627\u0645 \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u0644\u0627\u06af\u0648 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u0631\u0646\u0627 \u0628\u06c1\u062a \u062c\u0644\u062f \u0628\u06be\u0627\u0631\u06cc \u067e\u0691 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 <code>fetch()<\/code>\u06cc\u06c1\u06cc \u0648\u062c\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0645\u062c\u06be\u06d2 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0627\u06ba \u067e\u0633\u0646\u062f \u06c1\u06cc\u06ba\u06d4 <code>ky<\/code> \u06cc\u06c1 \u0648\u0627\u0642\u0639\u06cc \u0645\u0641\u06cc\u062f \u06c1\u06d2\u06d4 \u06a9\u06d2 \u0633\u0627\u062a\u06be <code>ky<\/code>\u0622\u067e \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634\u0648\u06ba \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f \u0628\u062a\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u06cc\u06c1 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0645\u0646\u0637\u0642 \u06a9\u0648 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0633\u0646\u0628\u06be\u0627\u0644 \u0644\u06d2 \u06af\u0627\u060c \u0628\u0634\u0645\u0648\u0644 \u0627\u06cc\u06a9\u0633\u067e\u0648\u0646\u06cc\u0646\u0634\u0644 \u0628\u06cc\u06a9 \u0622\u0641 \u0627\u0648\u0631 \u0645\u062e\u0635\u0648\u0635 \u0642\u0633\u0645 \u06a9\u06cc \u063a\u0644\u0637\u06cc\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631\u0646\u0627\u06d4 \u0627\u0633 \u0645\u06cc\u06ba \u0628\u0644\u0679 \u0627\u0646 \u06a9\u06cc\u0646\u0633\u0644 \u0641\u0646\u06a9\u0634\u0646 \u0628\u06be\u06cc \u06c1\u06d2\u06d4 <code>AbortController<\/code>\u06cc\u06c1 \u0622\u067e \u06a9\u06cc \u0645\u0648\u062c\u0648\u062f\u06c1 \u0645\u0646\u0633\u0648\u062e\u06cc \u0645\u0646\u0637\u0642 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0636\u0645 \u06a9\u0631\u0646\u0627 \u0622\u0633\u0627\u0646 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0686\u0644\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba <code>ky<\/code> \u06c1\u0645\u0627\u0631\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u067e\u0631 \u062c\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06a9\u06c1 \u06c1\u0645\u0627\u0631\u06d2 \u06a9\u0648\u0688 \u06a9\u0648 \u06a9\u0633 \u0637\u0631\u062d \u0622\u0633\u0627\u0646 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-bash\">cd frontend\nnpm install ky\n<\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u06d2 \u0628\u0639\u062f \u0622\u067e \u0627\u0633\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u067e\u0646\u06d2 \u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u06a9\u0648\u0688 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>ky<\/code> \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 <code>fetch()<\/code>:<\/p>\n<pre><code class=\"language-js\">import ky from 'ky';\n\n...\n\nfetchBtn.addEventListener('click', async () => {\n  const ticketId = ticketIdInput.value.trim();\n  \n  if (!ticketId) {\n    alert('Please enter a ticket ID');\n    return;\n  }\n\n  \/\/ Abort any in-flight request for this queue before starting a new one\n  if (currentController) {\n    currentController.abort();\n  }\n  currentController = new AbortController();\n  setLoadingState(true);\n\n  try {\n    const data = await ky\n      .get(`\/tickets\/${ticketId}\/nextNumber`, { signal: currentController.signal })\n      .json();\n    \n    \/\/ Append to DOM\n    ...\n  } catch (error) {\n    if (error.name === 'AbortError') return;\n    console.error('Error fetching ticket:', error);\n  } finally {\n    setLoadingState(false);\n  }\n});\n<\/code><\/pre>\n<p>\u06a9\u06d2 \u0633\u0627\u062a\u06be <code>ky<\/code>\u0622\u067e \u0622\u0633\u0627\u0646 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634\u06cc\u06ba \u0628\u06be\u06cc \u0634\u0627\u0645\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-js\">const data = await ky\n  .get(`\/tickets\/${ticketId}\/nextNumber`, { \n    signal: currentController.signal,\n    retry: {\n      limit: 3, \/\/ Retry up to 3 times\n      methods: ['get'], \/\/ Only retry GET requests\n      statusCodes: [500], \/\/ Only retry on 500 errors\n      backoffLimit: 10000 \/\/ Maximum delay of 10 seconds between retries\n    }\n  })\n  .json();\n<\/code><\/pre>\n<p>\u0628\u06c1\u062a \u0635\u0627\u0641\u060c \u0679\u06be\u06cc\u06a9 \u06c1\u06d2\u061f \u06cc\u06c1 \u0622\u067e \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u062a\u0645\u0627\u0645 \u0645\u0646\u0637\u0642 \u062e\u0648\u062f \u0644\u06a9\u06be\u06d2 \u0628\u063a\u06cc\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634\u0648\u06ba \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0622\u067e \u06a9\u0648 \u0645\u062e\u062a\u0644\u0641 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0631\u0648\u06cc\u06d2 \u06a9\u0648 \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0688\u0648\u0631\u06cc <code>ky<\/code> \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631\u06cc\u06ba <code>03-retries<\/code> \u0622\u067e \u0631\u06cc\u067e\u0648\u0632\u0679\u0631\u06cc \u0645\u06cc\u06ba \u0628\u0631\u0627\u0646\u0686 \u067e\u0631 \u062c\u0627 \u06a9\u0631 \u0645\u06a9\u0645\u0644 \u0639\u0645\u0644 \u062f\u0631\u0622\u0645\u062f \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">git checkout 03-retries\nnpm install\nnpm run dev\n<\/code><\/pre>\n<p>\u0627\u0633 \u0646\u06d2 \u06c1\u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0633\u0627\u062f\u06c1 \u0641\u0639\u0627\u0644\u06cc\u062a \u062a\u06cc\u0627\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u06d4 <code>fetch()<\/code> \u06cc\u06c1 \u0632\u06cc\u0627\u062f\u06c1 \u0645\u0636\u0628\u0648\u0637 \u0646\u06cc\u0679 \u0648\u0631\u06a9\u0646\u06af \u067e\u06cc\u0679\u0631\u0646 \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0633\u0633\u062a \u0646\u06cc\u0679 \u0648\u0631\u06a9\u0633\u060c \u062e\u0631\u0627\u0628 \u0631\u062f\u0639\u0645\u0644\u060c \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u0646\u0627\u06a9\u0627\u0645\u06cc\u0648\u06ba\u060c \u0627\u0648\u0631 \u06a9\u0645 \u0633\u06d2 \u06a9\u0645 \u06a9\u0648\u0688 \u0627\u0648\u0631 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u0642\u06cc\u0646\u0627 <code>ky<\/code> \u0628\u06c1\u062a \u0633\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u06c1\u06d2 \u062c\u0648 \u0627\u0646 \u0646\u0645\u0648\u0646\u0648\u06ba \u0645\u06cc\u06ba \u0645\u062f\u062f \u06a9\u0631 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u06d4 \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 <code>axios<\/code> \u06cc\u06c1 \u0627\u06cc\u06a9 \u0627\u0648\u0631 \u0645\u0642\u0628\u0648\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-production-ready-patterns\">\u067e\u06cc\u062f\u0627\u0648\u0627\u0631 \u06a9\u06d2 \u0644\u0626\u06d2 \u062a\u06cc\u0627\u0631 \u067e\u06cc\u0679\u0631\u0646<\/h2>\n<p>\u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0645\u0639\u0627\u0645\u0644\u0627\u062a \u0645\u06cc\u06ba\u060c \u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06cc \u0627\u06cc\u067e \u06a9\u06d2 \u0646\u06cc\u0679 \u0648\u0631\u06a9\u0646\u06af \u06a9\u0648 \u0645\u0632\u06cc\u062f \u0644\u0686\u06a9\u062f\u0627\u0631 \u0627\u0648\u0631 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u0633 \u06cc\u06c1\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u062a\u0627\u06c1\u0645\u060c \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06af\u0631\u06cc\u0688 APIs \u06a9\u0648 \u0627\u06a9\u062b\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0645\u0646\u0633\u0648\u062e \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0639\u0644\u0627\u0648\u06c1 \u0627\u0636\u0627\u0641\u06cc \u0646\u0645\u0648\u0646\u0648\u06ba \u0627\u0648\u0631 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u0622\u067e \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u06a9\u06cc \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u0648 \u0631\u0648\u06a9\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06cc\u0634\u0646\u06af \u06a9\u0648 \u0644\u0627\u06af\u0648 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u0627\u060c \u0686\u0648\u0646\u06a9\u06c1 \u0622\u067e \u06a9\u0627 \u0628\u06cc\u06a9 \u0627\u06cc\u0646\u0688 \u0631\u06cc\u0679 \u0644\u0645\u06cc\u0679\u0688 \u06c1\u06d2\u060c \u0622\u067e \u06a9\u0648 \u0633\u0631\u0648\u0631 \u06a9\u0648 \u0627\u0648\u0648\u0631 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0628\u0686\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0644\u0627\u0626\u0646\u0679 \u0633\u0627\u0626\u06cc\u0688 \u0631\u06cc\u0679 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u0646\u06d2 \u06cc\u0627 \u0633\u0631\u06a9\u0679 \u0628\u0631\u06cc\u06a9\u0631\u0632 \u06a9\u0648 \u0644\u0627\u06af\u0648 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u062a\u0642\u0633\u06cc\u0645 \u0634\u062f\u06c1 \u0628\u06cc\u06a9 \u0627\u06cc\u0646\u0688 \u06c1\u06d2\u060c \u062a\u0648 \u0622\u067e \u06a9\u0648 \u0645\u062a\u0639\u062f\u062f \u0633\u0631\u0648\u0633\u0632 \u0645\u06cc\u06ba \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u0648 \u0679\u0631\u06cc\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u06cc \u0679\u0631\u06cc\u06a9\u0646\u06af \u0627\u0648\u0631 \u0627\u0631\u062a\u0628\u0627\u0637\u06cc IDs \u06a9\u0648 \u0644\u0627\u06af\u0648 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u067e\u0691 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0646 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u06a9\u0627 \u0645\u062e\u062a\u0635\u0631\u0627\u064b \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0645\u06cc\u06ba \u062f\u0631\u062c \u0630\u06cc\u0644 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u06a9\u0627 \u062a\u0639\u0627\u0631\u0641 \u06a9\u0631\u0627\u0624\u06ba \u06af\u0627\u06d4 <code>ffetch<\/code>. <code>ffetch<\/code> \u06cc\u06c1 \u0627\u06cc\u06a9 \u062c\u062f\u06cc\u062f \u062f\u0631\u0622\u0645\u062f\u06cc \u0631\u06cc\u067e\u0631 \u06c1\u06d2 \u062c\u0648 \u0627\u0646 \u0645\u06cc\u06ba \u0633\u06d2 \u0628\u06c1\u062a \u0633\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u0648 \u0645\u0642\u0627\u0645\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0628\u0634\u0645\u0648\u0644 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634\u06cc\u06ba\u060c \u0645\u0646\u0633\u0648\u062e\u06cc\u060c \u06a9\u06cc\u0634\u0646\u06af\u060c \u0627\u0648\u0631 \u0628\u06c1\u062a \u06a9\u0686\u06be\u06d4 \u0627\u0633 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0628\u06c1\u062a \u0644\u0686\u06a9\u062f\u0627\u0631 API \u0628\u06be\u06cc \u06c1\u06d2 \u062c\u0648 \u0622\u067e \u06a9\u0648 \u067e\u0644\u06af \u0627\u0646 \u0627\u0648\u0631 \u0645\u0688\u0644 \u0648\u06cc\u0626\u0631 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u0633 \u06a9\u06d2 \u0631\u0648\u06cc\u06d2 \u06a9\u0648 \u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u06a9\u0648\u0688 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u06a9\u06be\u06cc\u06ba \u062c\u0633\u06d2 \u0622\u067e \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>ffetch<\/code> \u0627\u0633\u06d2 \u06a9\u0686\u06be \u0627\u0633 \u0637\u0631\u062d \u0646\u0638\u0631 \u0622\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2:<\/p>\n<pre><code class=\"language-js\">\/\/ frontend\/main.js\nimport { createClient } from '@fetchkit\/ffetch';\n\n...\n\nconst api = createClient({\n  timeout: 10000,\n  retries: 3,\n  throwOnHttpError: true, \/\/ Automatically throw for HTTP errors\n  shouldRetry: ({ response }) => response?.status === 500 \/\/ Only retry on 500 errors\n});\n\n...\n<\/code><\/pre>\n<p>\u067e\u06be\u0631 \u0622\u067e \u06a9\u06d2 \u06a9\u0644\u06a9 \u06c1\u06cc\u0646\u0688\u0644\u0631 \u0645\u06cc\u06ba:<\/p>\n<pre><code class=\"language-js\">const response = await api(`\/tickets\/${ticketId}\/nextNumber`, {\n      signal: currentController.signal\n    });\n    const data = await response.json();\n<\/code><\/pre>\n<p>\u06a9\u0648\u0688 \u06cc\u06c1\u0627\u06ba \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2: <code>04-ffetch<\/code> \u0622\u067e \u0631\u06cc\u067e\u0648\u0632\u0679\u0631\u06cc \u0645\u06cc\u06ba \u0628\u0631\u0627\u0646\u0686 \u067e\u0631 \u062c\u0627 \u06a9\u0631 \u0645\u06a9\u0645\u0644 \u0639\u0645\u0644 \u062f\u0631\u0622\u0645\u062f \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">git checkout 04-ffetch\nnpm install\nnpm run dev\n<\/code><\/pre>\n<h3 id=\"heading-rate-limiting\">\u0634\u0631\u062d \u06a9\u06cc \u062d\u062f<\/h3>\n<p>\u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 API \u0645\u06cc\u06ba \u0634\u0631\u062d \u06a9\u0648 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06a9\u0686\u06be \u0634\u06a9\u0644 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u06c1 \u0627\u06af\u0631 \u0622\u067e \u0645\u062e\u062a\u0635\u0631 \u0648\u0642\u062a \u0645\u06cc\u06ba \u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc\u06ba \u0628\u06be\u06cc\u062c\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0633\u0631\u0648\u0631 \u0627\u0646\u06c1\u06cc\u06ba \u0627\u0633 \u0637\u0631\u062d \u0645\u0633\u062a\u0631\u062f \u06a9\u0631\u0646\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631 \u062f\u06d2 \u06af\u0627: <code>429 Too Many Requests<\/code> \u063a\u0644\u0637\u06cc \u0627\u0633 \u0633\u06d2 \u0646\u0645\u0679\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u0627\u0633 \u0628\u0627\u062a \u06a9\u0648 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0644\u0627\u0626\u0646\u0679 \u0633\u0627\u0626\u0688 \u0631\u06cc\u0679 \u06a9\u0648 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0633\u0631\u0648\u0631 \u06a9\u06cc \u062d\u062f \u0633\u06d2 \u062a\u062c\u0627\u0648\u0632 \u0646\u06c1 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/p>\n<p>\u06a9\u06d2 \u0633\u0627\u062a\u06be <code>ffetch<\/code>\u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0622\u067e \u062c\u0648\u0627\u0628\u0627\u062a \u06a9\u06cc \u0634\u0631\u062d \u06a9\u0648 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u06cc \u067e\u0627\u0644\u06cc\u0633\u06cc \u06a9\u0648 \u0645\u0631\u06a9\u0632\u06cc \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>429<\/code> \u06c1\u0631 \u06a9\u0627\u0644 \u0633\u0627\u0626\u0679 \u067e\u0631 \u0639\u0627\u0631\u0636\u06cc \u0637\u0648\u0631 \u067e\u0631\u06d4 \u0627\u06cc\u06a9 \u0639\u0645\u0644\u06cc \u0646\u0642\u0637\u06c1 \u0646\u0638\u0631 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0635\u0631\u0641 \u0686\u0646\u062f \u0628\u0627\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u06cc \u062c\u0627\u0626\u06d2 \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u06a9\u0641\u0627\u06cc\u062a\u06cc \u0628\u06cc\u06a9 \u0622\u0641 \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u062a\u0627\u06a9\u06c1 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u06cc \u06af\u0626\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u0648 \u0641\u0627\u0635\u0644\u06c1 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/p>\n<pre><code class=\"language-js\">import { createClient } from '@fetchkit\/ffetch';\n\nconst api = createClient({\n  timeout: 10000,\n  retries: 2,\n  throwOnHttpError: true,\n  shouldRetry: ({ response }) => response?.status === 429, \/\/ Only retry on 429 errors\n  retryDelay: ({ attempt }) => 2 ** attempt * 200 \/\/ Exponential backoff: 200ms, 400ms\n});\n<\/code><\/pre>\n<h3 id=\"heading-circuit-breakers\">\u0633\u0631\u06a9\u0679 \u0628\u0631\u06cc\u06a9\u0631<\/h3>\n<p>\u0634\u0631\u062d \u06a9\u0648 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u0646\u0627 \u0627\u0648\u0631 \u0628\u06cc\u06a9 \u0627\u06cc\u0646\u0688 \u06a9\u06cc \u0628\u0646\u062f\u0634 \u06a9\u0627 \u062a\u0639\u0644\u0642 \u06c1\u06d2 \u0644\u06cc\u06a9\u0646 \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u0627 \u0646\u06c1\u06cc\u06ba\u06d4 \u0633\u0631\u06a9\u0679 \u0628\u0631\u06cc\u06a9\u0631 \u0627\u06cc\u06a9 \u062d\u062f \u062a\u06a9 \u067e\u06c1\u0646\u0686\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u0622\u0624\u0679 \u0628\u0627\u0624\u0646\u0688 \u06a9\u0627\u0644\u0648\u06ba \u06a9\u0648 \u0639\u0627\u0631\u0636\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0631\u0648\u06a9 \u06a9\u0631 \u0627\u0648\u0631 \u067e\u06be\u0631 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0631\u06cc\u06a9\u0648\u0631\u06cc \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06d2 \u06a9\u0631 \u0628\u0627\u0631 \u0628\u0627\u0631 \u0622\u0646\u06d2 \u0648\u0627\u0644\u06cc \u063a\u0644\u0637\u06cc\u0648\u06ba \u06a9\u0627 \u0627\u0632\u0627\u0644\u06c1 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u06cc\u06ba <code>ffetch<\/code>\u06cc\u06c1 \u0633\u0631\u06a9\u0679 \u067e\u0644\u06af \u0627\u0646 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0633\u0646\u0628\u06be\u0627\u0644\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2.<\/p>\n<pre><code class=\"language-js\">import { createClient } from '@fetchkit\/ffetch';\nimport { circuitPlugin } from '@fetchkit\/ffetch\/plugins\/circuit';\n\nconst api = createClient({\n  timeout: 10000,\n  retries: 2,\n  throwOnHttpError: true,\n  shouldRetry: ({ response }) =>\n    [500, 502, 503, 504].includes(response?.status ?? 0),\n  plugins: [\n    circuitPlugin({\n      threshold: 5,\n      reset: 30000\n    })\n  ]\n});\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u06a9\u0633\u06cc \u0648\u0627\u0642\u0639\u06d2 \u06a9\u06cc \u0635\u0648\u0631\u062a \u0645\u06cc\u06ba \u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u06a9\u0648 \u062a\u06cc\u0632\u06cc \u0633\u06d2 \u0646\u0627\u06a9\u0627\u0645 \u06c1\u0648\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u062f\u062f \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u063a\u06cc\u0631 \u0635\u062d\u062a \u0645\u0646\u062f \u062e\u062f\u0645\u0627\u062a \u067e\u0631 \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u0628\u0648\u062c\u06be \u06a9\u0648 \u06a9\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0631\u06cc \u0633\u06cc\u0679 \u0648\u0646\u0688\u0648 \u06a9\u06d2 \u0628\u0639\u062f \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0679\u06be\u06cc\u06a9 \u06c1\u0648\u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-request-coalescing\">\u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u0648 \u0636\u0645 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u06a9\u0686\u06be \u0645\u0639\u0627\u0645\u0644\u0627\u062a \u0645\u06cc\u06ba\u060c \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0622\u067e \u06a9\u06cc \u0627\u06cc\u067e \u06a9\u06d2 \u0645\u062a\u0639\u062f\u062f \u0627\u062c\u0632\u0627\u0621 \u06cc\u0627 \u062d\u0635\u06d2 \u06c1\u0648 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0646 \u06a9\u0648 \u0627\u06cc\u06a9 \u06c1\u06cc \u0688\u06cc\u0679\u0627 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 (\u067e\u0686\u06be\u0644\u06d2 \u0645\u0636\u0645\u0648\u0646 \u06a9\u06d2 \u0628\u0631\u0639\u06a9\u0633 \u062c\u06c1\u0627\u06ba \u0635\u0627\u0631\u0641 \u0646\u06d2 \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0628\u0679\u0646 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u06cc\u0627\u060c \u06cc\u06c1\u0627\u06ba \u0622\u067e \u06a9\u0648 \u062d\u0642\u06cc\u0642\u062a \u0645\u06cc\u06ba \u0645\u06a9\u0645\u0644 \u062c\u0648\u0627\u0628 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u06d4)<\/p>\n<p>\u0645\u062a\u0639\u062f\u062f \u06cc\u06a9\u0633\u0627\u06ba \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc\u06ba \u0628\u06be\u06cc\u062c\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0622\u067e \u0644\u0627\u06af\u0648 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <em>\u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u0648 \u0636\u0645 \u06a9\u0631\u06cc\u06ba\u06d4<\/em> \u0627\u0646 \u06a9\u0648 \u0627\u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u06cc\u06ba \u06cc\u06a9\u062c\u0627 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u062c\u0648\u0627\u0628 \u06a9\u0627 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4 <code>ffetch<\/code> \u0627\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u0644\u0679 \u0627\u0646 \u0633\u067e\u0648\u0631\u0679 \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2\u06d4 <code>dedupe<\/code> \u067e\u0644\u06af \u0627\u0646\u0632:<\/p>\n<pre><code class=\"language-js\">import { createClient } from '@fetchkit\/ffetch';\nimport { dedupePlugin } from '@fetchkit\/ffetch\/plugins\/dedupe';\n\nconst api = createClient({\n  timeout: 10000,\n  retries: 2,\n  throwOnHttpError: true,\n  plugins: [dedupePlugin({ ttl: 1000 })]\n});\n\n\/\/ Same request fired twice -> one in-flight request, shared result\nconst [r1, r2] = await Promise.all([\n  api('\/tickets\/1\/nextNumber'),\n  api('\/tickets\/1\/nextNumber')\n]);\n<\/code><\/pre>\n<h3 id=\"heading-caching\">\u06a9\u06cc\u0634\u0646\u06af<\/h3>\n<p>\u06a9\u06cc\u0634\u0646\u06af \u062c\u0648\u0627\u0628 \u06a9\u0648 \u0630\u062e\u06cc\u0631\u06c1 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u062a\u0627\u06a9\u06c1 \u0627\u0633\u06cc \u0648\u0633\u0627\u0626\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0633\u062a\u0642\u0628\u0644 \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u067e\u0631 \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u062a\u06a9 \u067e\u06c1\u0646\u0686\u06d2 \u0628\u063a\u06cc\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u06cc \u062c\u0627 \u0633\u06a9\u06d2\u06d4 \u06cc\u06c1 \u0628\u06cc\u0646\u0688\u0648\u062a\u06be \u06a9\u0648 \u0628\u0686\u0627\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0627\u062e\u06cc\u0631 \u06a9\u0648 \u06a9\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0622\u067e \u06a9\u06d2 \u067e\u0633\u062f\u06cc\u062f \u06a9\u0648 \u0628\u06d2 \u06a9\u0627\u0631 \u0628\u0648\u062c\u06be \u0633\u06d2 \u0628\u0686\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0646\u06cc\u0686\u06d2 \u062f\u06cc \u06af\u0626\u06cc \u062a\u06a9\u0646\u06cc\u06a9\u0648\u06ba \u0645\u06cc\u06ba \u0633\u06d2 \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u0645\u062e\u0635\u0648\u0635 \u062f\u0631\u0622\u0645\u062f\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062e\u0635\u0648\u0635 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0628\u0627\u0642\u0627\u0639\u062f\u06c1 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>fetch<\/code>, <code>ky<\/code>, <code>axios<\/code>\u06cc\u0627 \u06a9\u0686\u06be \u0627\u0648\u0631\u06d4<\/p>\n<p>\u0627\u0633 \u06a9\u06cc \u0622\u0633\u0627\u0646 \u062a\u0631\u06cc\u0646 \u0634\u06a9\u0644 \u0645\u06cc\u06ba\u060c \u06a9\u06cc\u0634\u0646\u06af \u06a9\u06cc \u06a9\u0644\u0627\u0626\u0646\u0679 \u06a9\u06cc \u0637\u0631\u0641 \u0633\u06d2 \u06a9\u0648\u0626\u06cc \u0642\u06cc\u0645\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062c\u0628 \u0633\u0631\u0648\u0631 \u062f\u0631\u0633\u062a \u062c\u0648\u0627\u0628\u06cc \u06c1\u06cc\u0688\u0631\u0632 \u0633\u06cc\u0679 \u06a9\u0631 \u0644\u06cc\u062a\u0627 \u06c1\u06d2\u060c \u0628\u0631\u0627\u0624\u0632\u0631 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644 \u0644\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-plaintext\">Cache-Control: max-age=60, stale-while-revalidate=30\n<\/code><\/pre>\n<p><code>max-age=60<\/code>    \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u06c1 \u0628\u0631\u0627\u0624\u0632\u0631 \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u06a9\u0648 \u0686\u06be\u0648\u0626\u06d2 \u0628\u063a\u06cc\u0631 60 \u0633\u06cc\u06a9\u0646\u0688 \u062a\u06a9 \u06a9\u06cc\u0634\u0688 \u062c\u0648\u0627\u0628\u0627\u062a \u067e\u06cc\u0634 \u06a9\u0631\u06d2 \u06af\u0627\u06d4 <code>stale-while-revalidate=30<\/code> \u0627\u0633 \u0648\u0646\u0688\u0648 \u06a9\u0648 \u067e\u06be\u06cc\u0644\u0627\u0626\u06cc\u06ba\u06d4 \u06a9\u06cc\u0634\u06d2 \u06a9\u06cc \u0645\u06cc\u0639\u0627\u062f \u062e\u062a\u0645 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u0627\u0636\u0627\u0641\u06cc 30 \u0633\u06cc\u06a9\u0646\u0688 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0628\u0631\u0627\u0624\u0632\u0631 \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u067e\u0631\u0627\u0646\u06cc \u06a9\u0627\u067e\u06cc \u067e\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0628\u06a9\u06c1 \u0628\u06cc\u06a9 \u06af\u0631\u0627\u0624\u0646\u0688 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0646\u0626\u06cc \u06a9\u0627\u067e\u06cc \u062d\u0627\u0635\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0635\u062d\u06cc\u062d \u067e\u06c1\u0644\u0627 \u0627\u0642\u062f\u0627\u0645 \u06c1\u06d2\u06d4 \u06a9\u0644\u0627\u0626\u0646\u0679 \u0633\u0627\u0626\u06cc\u0688 \u06a9\u06cc\u0634\u0646\u06af \u06a9\u0648\u0688 \u0644\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u06a9\u0627 API \u0645\u0646\u0627\u0633\u0628 \u0646\u062a\u0627\u0626\u062c \u062f\u06d2 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 <code>Cache-Control<\/code> \u06c1\u06cc\u0688\u0631<\/p>\n<h4 id=\"heading-in-memory-cache\">\u0627\u0646 \u0645\u06cc\u0645\u0648\u0631\u06cc \u06a9\u06cc\u0634<\/h4>\n<p>\u0627\u06af\u0631 \u0622\u067e \u06a9\u0648 \u0645\u0632\u06cc\u062f \u062f\u0627\u0646\u06d2 \u062f\u0627\u0631 \u06a9\u0646\u0679\u0631\u0648\u0644 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2 \u06cc\u0627 \u0622\u067e \u06a9\u0627 API \u06c1\u06cc\u0688\u0631 \u0633\u06cc\u0679 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u0627\u060c \u062a\u0648 \u0622\u067e \u0633\u0627\u062f\u06c1 JavaScript \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062c\u0648\u0627\u0628 \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u06a9\u06cc\u0634 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>Map<\/code>. \u062e\u06cc\u0627\u0644 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06cc\u0648 \u0622\u0631 \u0627\u06cc\u0644 \u0645\u06cc\u06ba \u06a9\u0644\u06cc\u062f \u06a9\u0631\u06cc\u06ba\u060c \u062c\u0648\u0627\u0628 \u06a9\u0648 \u0679\u0627\u0626\u0645 \u0627\u0633\u0679\u06cc\u0645\u067e \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0633\u0679\u0648\u0631 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0627\u06af\u0631 \u0622\u0626\u0679\u0645 \u0627\u0628\u06be\u06cc \u0628\u06be\u06cc \u062a\u0627\u0632\u06c1 \u06c1\u06d2 \u062a\u0648 \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u06a9\u0648 \u0686\u06be\u0648\u0691 \u062f\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-js\">const cache = new Map();\nconst TTL_MS = 60_000; \/\/ 1 minute\n\nasync function cachedFetch(url, options) {\n  const cached = cache.get(url);\n  if (cached && Date.now() - cached.timestamp < TTL_MS) {\n    return cached.data;\n  }\n\n  const response = await fetch(url, options);\n  if (!response.ok) throw new Error(`HTTP ${response.status}`);\n\n  const data = await response.json();\n  cache.set(url, { data, timestamp: Date.now() });\n  return data;\n}\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u062c\u0627\u0646 \u0628\u0648\u062c\u06be \u06a9\u0631 \u0622\u0633\u0627\u0646 \u06c1\u06d2\u06d4 \u0628\u0646\u06cc\u0627\u062f\u06cc \u062d\u062f \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u062c\u0628 \u0622\u067e \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0648\u06c1 \u063a\u0627\u0626\u0628 \u06c1\u0648 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0679\u06cc\u0628\u0632 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0642\u0644\u06cc\u0644 \u0645\u062f\u062a\u06cc UI \u0631\u06cc\u0627\u0633\u062a\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0679\u06be\u06cc\u06a9 \u06c1\u06d2\u06d4<\/p>\n<h4 id=\"heading-storage-backed-cache\">\u0627\u0633\u0679\u0648\u0631\u06cc\u062c \u0633\u067e\u0648\u0631\u0679 \u06a9\u06cc\u0634\u06d2<\/h4>\n<p>\u0627\u06af\u0631 \u0622\u067e \u06a9\u0648 \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u06a9\u06cc\u0634 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 \u062a\u0648\u060c \u0627\u0633 \u067e\u0631 \u0644\u06a9\u06be\u06cc\u06ba: <code>localStorage<\/code> \u06cc\u0627 <code>sessionStorage<\/code> \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2:<\/p>\n<pre><code class=\"language-js\">function getCached(key) {\n  try {\n    const raw = localStorage.getItem(key);\n    if (!raw) return null;\n    const { data, expiresAt } = JSON.parse(raw);\n    if (Date.now() > expiresAt) {\n      localStorage.removeItem(key);\n      return null;\n    }\n    return data;\n  } catch {\n    return null;\n  }\n}\n\nfunction setCached(key, data, ttlMs = 60_000) {\n  localStorage.setItem(key, JSON.stringify({ data, expiresAt: Date.now() + ttlMs }));\n}\n\nasync function fetchWithStorage(url) {\n  const key = `cache:${url}`;\n  const cached = getCached(key);\n  if (cached) return cached;\n\n  const response = await fetch(url);\n  if (!response.ok) throw new Error(`HTTP ${response.status}`);\n\n  const data = await response.json();\n  setCached(key, data);\n  return data;\n}\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u0630\u06c1\u0646 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u06cc\u06ba <code>localStorage<\/code> \u06cc\u06c1 \u06c1\u0645 \u0648\u0642\u062a \u0633\u0627\u0632 \u06c1\u06d2\u060c \u0632\u06cc\u0627\u062f\u06c1 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 5 MB \u062a\u06a9 \u0645\u062d\u062f\u0648\u062f \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0635\u0631\u0641 \u062a\u0627\u0631\u0648\u06ba \u06a9\u0648 \u0627\u0633\u0679\u0648\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0686\u06be\u0648\u0679\u06d2\u060c \u06a9\u0628\u06be\u06cc \u06a9\u0628\u06be\u0627\u0631 \u062a\u0628\u062f\u06cc\u0644 \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0688\u06cc\u0679\u0627 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0648\u0632\u0648\u06ba \u06c1\u06d2\u060c \u062c\u06cc\u0633\u06d2 \u0635\u0627\u0631\u0641 \u06a9\u06cc \u062a\u0631\u062c\u06cc\u062d\u0627\u062a \u06cc\u0627 \u062d\u0648\u0627\u0644\u06c1 \u062a\u0644\u0627\u0634 \u06a9\u0631\u0646\u0627\u06d4 \u0628\u0691\u06d2 \u0688\u06cc\u0679\u0627\u0633\u06cc\u0679\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u062f\u0631\u062c \u0630\u06cc\u0644 \u067e\u0631 \u063a\u0648\u0631 \u06a9\u0631\u06cc\u06ba: <code>IndexedDB<\/code>\u06cc\u0627 idb-keyval \u062c\u06cc\u0633\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u062c\u0648 \u0627\u0633\u06d2 \u0627\u06cc\u06a9 \u0622\u0633\u0627\u0646 API \u0645\u06cc\u06ba \u0644\u067e\u06cc\u0679\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<h4 id=\"heading-cache-invalidation\">\u06a9\u06cc\u0634\u06d2 \u06a9\u0648 \u0628\u0627\u0637\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h4>\n<p>\u06a9\u06cc\u0634\u0646\u06af \u0627\u06cc\u06a9 \u06a9\u0644\u0627\u0633\u06a9 \u0645\u0633\u0626\u0644\u06c1 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0644\u0627\u062a\u0627 \u06c1\u06d2: \u0628\u0627\u0633\u06cc \u0688\u06cc\u0679\u0627\u06d4 \u0686\u0646\u062f \u0639\u0645\u0648\u0645\u06cc \u062d\u06a9\u0645\u062a \u0639\u0645\u0644\u06cc \u0627\u0633 \u0645\u0633\u0626\u0644\u06d2 \u06a9\u0648 \u062d\u0644 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u0622\u067e \u06a9\u06cc \u0645\u062f\u062f \u06a9\u0631 \u0633\u06a9\u062a\u06cc \u06c1\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><strong>\u0648\u0642\u062a \u067e\u0631 \u0645\u0628\u0646\u06cc \u0645\u06cc\u0639\u0627\u062f \u062e\u062a\u0645 \u06c1\u0648\u0646\u06d2 (TTL)<\/strong>: \u0627\u0648\u067e\u0631 \u06a9\u06cc \u0645\u062b\u0627\u0644 \u0645\u06cc\u06ba \u06a9\u06cc\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u0627 \u06c1\u06d2\u061f \u06cc\u06c1 \u0622\u0633\u0627\u0646 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0622\u067e \u06a9\u0627 \u06a9\u06cc\u0634 \u0627\u06cc\u06a9 \u0633\u0627\u0644 \u062a\u06a9 \u062f\u0631\u0633\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u0648 \u0633\u06a9\u062a\u0627\u06d4 <code>TTL_MS<\/code> \u0645\u0644\u06cc \u0633\u06cc\u06a9\u0646\u0688<\/p>\n<\/li>\n<li>\n<p><strong>\u062f\u0633\u062a\u06cc \u0628\u0627\u0637\u0644<\/strong>: \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u06d2 \u0628\u0639\u062f (POST\/PUT\/DELETE)\u060c \u0627\u06af\u0644\u06d2 \u067e\u0691\u06be\u0646\u06d2 \u067e\u0631 \u0646\u06cc\u0627 \u0688\u06cc\u0679\u0627 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062a\u0639\u0644\u0642\u06c1 \u06a9\u06cc\u0634 \u06a9\u0644\u06cc\u062f \u06a9\u0648 \u0648\u0627\u0636\u062d \u0637\u0648\u0631 \u067e\u0631 \u062d\u0630\u0641 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0628\u0627\u0637\u0644 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u062f\u0648\u0628\u0627\u0631\u06c1 \u062a\u0635\u062f\u06cc\u0642<\/strong>: \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u06a9\u06cc\u0634 \u0634\u062f\u06c1 \u06a9\u0627\u067e\u06cc \u067e\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u067e\u06be\u0631 \u0627\u0633\u06d2 \u067e\u0633 \u0645\u0646\u0638\u0631 \u0645\u06cc\u06ba \u062a\u0627\u0632\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0628\u0631\u0627\u0624\u0632\u0631 <code>Cache-Control<\/code> \u06c1\u06cc\u0688\u0631\u0632 \u0645\u0642\u0627\u0645\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633 \u06a9\u06cc \u062d\u0645\u0627\u06cc\u062a \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0622\u067e \u06a9\u06cc\u0634 \u0634\u062f\u06c1 \u0627\u0642\u062f\u0627\u0631 \u06a9\u0648 \u0648\u0627\u067e\u0633 \u06a9\u0631\u06a9\u06d2 \u0627\u0648\u0631 \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u0648 \u0645\u062a\u062d\u0631\u06a9 \u06a9\u0631\u06a9\u06d2 \u0627\u0633\u06d2 \u062f\u0633\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0646\u0642\u0644 \u06a9\u0631\u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>fetch<\/code> \u0627\u06cc\u06a9 \u06c1\u06cc \u0648\u0642\u062a \u0645\u06cc\u06ba.<\/p>\n<\/li>\n<\/ul>\n<p>\u0635\u062d\u06cc\u062d \u0627\u0646\u062a\u062e\u0627\u0628 \u0627\u0633 \u0628\u0627\u062a \u067e\u0631 \u0645\u0646\u062d\u0635\u0631 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u06a9\u0627 \u0688\u06cc\u0679\u0627 \u06a9\u062a\u0646\u06cc \u0628\u0627\u0631 \u062a\u0628\u062f\u06cc\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0622\u067e \u06a9\u062a\u0646\u06cc \u0628\u0627\u0633\u06cc \u0628\u0631\u062f\u0627\u0634\u062a \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-conclusion\">\u0646\u062a\u06cc\u062c\u06c1<\/h2>\n<p>\u0627\u0633 \u0645\u0636\u0645\u0648\u0646 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u0646\u06d2 \u06a9\u0686\u06be \u0622\u0633\u0627\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0634\u0631\u0648\u0639 \u06a9\u06cc\u0627. <code>fetch()<\/code> \u062d\u0642\u06cc\u0642\u06cc \u062f\u0646\u06cc\u0627 \u06a9\u06d2 \u0646\u06cc\u0679 \u0648\u0631\u06a9\u0646\u06af \u06a9\u06d2 \u0645\u0633\u0627\u0626\u0644 \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u0628\u0631\u06d2 \u062c\u0648\u0627\u0628\u0627\u062a\u060c \u0633\u0633\u062a \u0646\u06cc\u0679 \u0648\u0631\u06a9\u0633\u060c \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u0646\u0627\u06a9\u0627\u0645\u06cc\u0627\u06ba\u060c \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634\u06cc\u06ba\u060c \u0645\u0646\u0633\u0648\u062e\u06cc\u060c \u0634\u0631\u062d \u06a9\u0648 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u0646\u0627\u060c \u0633\u0631\u06a9\u0679 \u0628\u0644\u0627\u06a9 \u06a9\u0631\u0646\u0627\u060c \u0627\u0646\u0636\u0645\u0627\u0645 \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u060c \u0627\u0648\u0631 \u06a9\u06cc\u0634\u0646\u06af \u062c\u06cc\u0633\u06d2 \u0646\u0645\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0628\u0644\u0627\u06cc\u0627 \u0627\u0648\u0631 \u0628\u062a\u062f\u0631\u06cc\u062c \u0634\u0627\u0645\u0644 \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u06d4<\/p>\n<p>\u06c1\u0645 \u0646\u06d2 \u062f\u0631\u062c \u0630\u06cc\u0644 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0627\u06ba \u0628\u06be\u06cc \u0645\u062a\u0639\u0627\u0631\u0641 \u06a9\u0631\u0648\u0627\u0626\u06cc \u06c1\u06cc\u06ba\u06d4 <code>ky<\/code> \u0627\u0648\u0631 <code>ffetch<\/code> \u06cc\u06c1 \u0627\u0646 \u0645\u06cc\u06ba \u0633\u06d2 \u0628\u06c1\u062a \u0633\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u0648 \u0645\u0642\u0627\u0645\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0633 \u0633\u06d2 \u067e\u06c1\u06cc\u06d2 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u06cc\u062c\u0627\u062f \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u0646\u06cc\u0679 \u0648\u0631\u06a9\u0646\u06af \u06a9\u0648\u0688 \u0644\u06a9\u06be\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u067e\u06c1\u0644\u06d2 \u062f\u0646 \u0627\u0646 \u0633\u0628 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0633\u06d2 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4 <code>res.ok<\/code> \u0627\u0648\u0631 <code>AbortController<\/code>. \u0627\u06af\u0631 \u0622\u067e \u06a9\u0648 \u0627\u06cc\u0631\u0631 \u0644\u0627\u06af \u0645\u06cc\u06ba \u0639\u0627\u0631\u0636\u06cc \u062e\u0631\u0627\u0628\u06cc\u0627\u06ba \u0646\u0638\u0631 \u0622\u0646\u06d2 \u0644\u06af\u06cc\u06ba \u062a\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0688\u0627\u0648\u0646 \u0627\u0633\u0679\u0631\u06cc\u0645 \u0627\u0646\u062d\u0635\u0627\u0631 \u0645\u06cc\u06ba \u0627\u0633\u062a\u062d\u06a9\u0627\u0645 \u06a9\u06d2 \u0645\u0633\u0627\u0626\u0644 \u06c1\u0648\u06ba \u062a\u0648 \u0633\u0631\u06a9\u0679 \u0628\u0631\u06cc\u06a9\u0631\u0632 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u0633\u0626\u0644\u06c1 \u06a9\u0648 \u0633\u0637\u062d \u067e\u0631 \u0622\u0646\u06d2 \u062f\u06cc\u06ba \u0627\u0648\u0631 \u067e\u06be\u0631 \u067e\u06cc\u0679\u0631\u0646 \u06a9\u0627 \u0627\u0637\u0644\u0627\u0642 \u06a9\u0631\u06cc\u06ba\u06d4 \u06a9\u0644\u06cc\u062f \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0641\u0648\u0627\u0626\u062f \u0627\u0648\u0631 \u0646\u0642\u0635\u0627\u0646\u0627\u062a \u06a9\u0648 \u0633\u0645\u062c\u06be\u06cc\u06ba \u0627\u0648\u0631 \u0627\u067e\u0646\u06d2 \u0645\u062e\u0635\u0648\u0635 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06d2 \u0645\u0639\u0627\u0645\u0644\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0635\u062d\u06cc\u062d \u0679\u0648\u0644 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u067e \u06a9\u06d2 \u0679\u0648\u0644 \u06a9\u0679 \u0645\u06cc\u06ba \u0627\u0646 \u0646\u0645\u0648\u0646\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u0622\u067e \u0644\u0686\u06a9\u062f\u0627\u0631\u060c \u0635\u0627\u0631\u0641 \u062f\u0648\u0633\u062a \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646\u0632 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u06c1\u062a\u0631 \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0644\u06cc\u0633 \u06c1\u0648\u06ba \u06af\u06d2 \u062c\u0648 \u062d\u0642\u06cc\u0642\u06cc \u062f\u0646\u06cc\u0627 \u06a9\u06d2 \u0646\u06cc\u0679 \u0648\u0631\u06a9\u0633 \u06a9\u06cc \u063a\u06cc\u0631 \u0645\u062a\u0648\u0642\u0639 \u0635\u0644\u0627\u062d\u06cc\u062a \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0633 \u0645\u0646\u0638\u0631 \u0646\u0627\u0645\u06d2 \u06a9\u0627 \u062a\u0635\u0648\u0631 \u06a9\u0631\u06cc\u06ba\u06d4 \u06c1\u0645 \u0635\u0628\u062d \u06a9\u06d2 \u0648\u0642\u062a \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0628\u06be\u06cc\u062c\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u062f\u0648\u067e\u06c1\u0631 \u0645\u06cc\u06ba\u060c \u0635\u0627\u0631\u0641 \u0628\u0679\u0646 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 UI \u0628\u06a9\u0648\u0627\u0633 \u062f\u06a9\u06be\u0627\u0646\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631 \u062f\u06cc\u062a\u0627 \u06c1\u06d2: \u063a\u0644\u0637 \u0646\u062a\u0627\u0626\u062c\u060c \u06af\u0645\u0634\u062f\u06c1 \u0627\u067e \u0688\u06cc\u0679\u0633\u060c \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u063a\u0644\u0637\u06cc\u0627\u06ba \u062c\u0646\u06c1\u06cc\u06ba \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u067e\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u06cc\u0634 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627\u06d4 \u06a9\u06be\u0644\u0648\u0646\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u06cc\u06c1\u06cc \u0641\u0627\u0635\u0644\u06c1 \u06c1\u06d2\u06d4 fetch() \u0679\u06a9\u0691\u0648\u06ba \u0627\u0648\u0631 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-22062","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/22062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/comments?post=22062"}],"version-history":[{"count":0,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/22062\/revisions"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media?parent=22062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/categories?post=22062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/tags?post=22062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}