{"id":7046,"date":"2026-09-19T11:00:42","date_gmt":"2026-09-19T07:30:42","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=7046"},"modified":"2026-09-19T11:00:42","modified_gmt":"2026-09-19T07:30:42","slug":"%d9%86%d8%ad%d9%88%d9%87-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-axios-%d8%a8%d8%a7-react","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-axios-%d8%a8%d8%a7-react\/","title":{"rendered":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Axios \u0628\u0627 React"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u0645\u0642\u062f\u0645\u0647<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Axios \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc API \u062f\u0631 React \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u0648 \u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 API \u0628\u0648\u0645\u06cc Fetch\u060c \u0633\u06cc\u0646\u062a\u06a9\u0633 \u0628\u0647\u062a\u0631\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0648 Interceptor\u0647\u0627\u06cc\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0627\u06cc\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0645\u062d\u0628\u0648\u0628 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 Fetch \u06a9\u0631\u062f\u0646 \u062f\u0627\u062f\u0647 \u0628\u0627 Axios \u062f\u0631 React \u0647\u0633\u062a\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 Axios \u062f\u0631 React\u060c \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc \u0627\u0632 \u0646\u062d\u0648\u0647 Fetch \u06a9\u0631\u062f\u0646 \u062f\u0627\u062f\u0647 \u0628\u0627 Axios \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc React \u0631\u0627 \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Axios \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Promise \u0627\u0633\u062a\u061b \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0628\u0647\u0631\u0647\u200c\u06af\u06cc\u0631\u06cc \u0627\u0632 async \u0648 await \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u06a9\u062f \u063a\u06cc\u0631\u0647\u0645\u06af\u0627\u0645\u0650 \u062e\u0648\u0627\u0646\u0627\u062a\u0631 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0647\u0645\u200c\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627 \u0631\u0627 Intercept \u0648 Cancel \u06a9\u0646\u06cc\u062f\u061b \u0648 \u0645\u062d\u0627\u0641\u0638\u062a \u062f\u0627\u062e\u0644\u06cc \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 \u062c\u0639\u0644 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u06cc\u0646-\u0633\u0627\u06cc\u062a\u06cc (CSRF) \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc\u06cc \u0627\u0632 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Axios \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 API \u0645\u062d\u0628\u0648\u0628 JSONPlaceholder \u062f\u0631\u0648\u0646 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 React \u0631\u0627 \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Axios \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 Fetch: \u0645\u0642\u0627\u06cc\u0633\u0647 \u0633\u0631\u06cc\u0639<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u06cc\u0646 Axios \u0648 API \u0628\u0648\u0645\u06cc Fetch\u060c \u0646\u0642\u0637\u0647 \u062a\u0635\u0645\u06cc\u0645 \u0631\u0627\u06cc\u062c\u06cc \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 React \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0645\u0642\u0627\u06cc\u0633\u0647 \u06a9\u0646\u0627\u0631-\u0647\u0645\u06cc \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u0631\u0648\u0634\u0646 \u06a9\u0646\u062f \u0686\u0631\u0627 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u062a\u06cc\u0645\u200c\u0647\u0627 Axios \u0631\u0627 \u062f\u0631 \u0645\u062d\u06cc\u0637\u200c\u0647\u0627\u06cc \u067e\u0631\u0648\u062f\u0627\u06a9\u0634\u0646 \u062a\u0631\u062c\u06cc\u062d \u0645\u06cc\u200c\u062f\u0647\u0646\u062f\u061b \u0648 \u0647\u0645\u200c\u0632\u0645\u0627\u0646 \u0645\u0648\u0627\u0631\u062f\u06cc \u0631\u0627 \u06a9\u0647 Fetch \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a \u0628\u06cc\u0627\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u0648\u06cc\u0698\u06af\u06cc<\/th><th>Axios<\/th><th>API \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 Fetch<\/th><\/tr><\/thead><tbody><tr><td>\u0633\u06cc\u0646\u062a\u06a9\u0633<\/td><td>Axios \u0633\u06cc\u0646\u062a\u06a9\u0633 \u062a\u0645\u06cc\u0632 \u0648 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Promise\u0627\u06cc \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647\u200c\u0637\u0648\u0631 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u06a9\u062f Boilerplate \u0631\u0627 \u06a9\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0633\u0631\u06cc\u0639\u0627\u064b \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627 \u0631\u0627 \u0632\u0646\u062c\u06cc\u0631 \u06a9\u0646\u0646\u062f\u060c \u067e\u0627\u0633\u062e\u200c\u0647\u0627 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u0633\u0631\u0627\u0633\u0631\u06cc \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0633\u0627\u062f\u0647\u200c\u0634\u062f\u0647 \u0646\u06af\u0647\u200c\u062f\u0627\u0634\u062a\u0646 \u0645\u062f\u06cc\u0631\u06cc\u062a API \u0633\u0627\u0632\u06af\u0627\u0631 \u0628\u06cc\u0646 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc React \u0645\u062a\u0648\u0633\u0637 \u0648 \u0628\u0632\u0631\u06af \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u06cc\u0645\u200c\u0647\u0627 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/td><td>Fetch \u0631\u0627\u0628\u0637 \u0633\u0637\u062d-\u067e\u0627\u06cc\u06cc\u0646\u06cc \u0628\u0627 \u0633\u06cc\u0646\u062a\u06a9\u0633 \u067e\u0631\u062d\u0631\u0641\u200c\u062a\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f. \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0627\u06cc\u062f \u0647\u062f\u0631\u0647\u0627 \u0631\u0627 \u062f\u0633\u062a\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc\u060c JSON \u0631\u0627 \u067e\u0627\u0631\u0633 \u0648 \u06a9\u062f\u0647\u0627\u06cc \u0648\u0636\u0639\u06cc\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0686\u06a9 \u06a9\u0646\u0646\u062f. \u0647\u0631\u0686\u0646\u062f \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u062f\u0627\u062e\u0644\u06cc \u0627\u0633\u062a \u0648 \u0646\u0635\u0628\u06cc \u0644\u0627\u0632\u0645 \u0646\u062f\u0627\u0631\u062f\u060c \u0627\u063a\u0644\u0628 \u0628\u0647 \u06a9\u062f \u062a\u06a9\u0631\u0627\u0631\u06cc \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc React \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u0645\u0646\u062c\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/td><\/tr><tr><td>\u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627<\/td><td>Axios \u0628\u0647\u200c\u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0631\u0627\u06cc \u06a9\u062f\u0647\u0627\u06cc \u067e\u0627\u0633\u062e HTTP \u062e\u0627\u0631\u062c \u0627\u0632 \u0628\u0627\u0632\u0647 2xx \u062e\u0637\u0627 \u067e\u0631\u062a\u0627\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u0634\u06cc\u0627\u0621 \u062e\u0637\u0627\u06cc \u062a\u0641\u0635\u06cc\u0644\u06cc \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc response\u060c request \u0648 message \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u06a9\u0647 \u062f\u06cc\u0628\u0627\u06af \u0631\u0627 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f. \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0633\u0631\u06cc\u0639 \u0645\u0633\u0627\u0626\u0644 \u0631\u0627 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0648 \u0631\u0641\u0639 \u06a9\u0646\u0646\u062f \u0628\u062f\u0648\u0646 \u0646\u0648\u0634\u062a\u0646 \u0686\u06a9\u200c\u0647\u0627\u06cc \u0634\u0631\u0637\u06cc \u062a\u06a9\u0631\u0627\u0631\u06cc.<\/td><td>Fetch \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u062e\u0631\u0627\u0628\u06cc\u200c\u0647\u0627\u06cc \u0633\u0637\u062d-\u0634\u0628\u06a9\u0647 Promise \u0631\u0627 Reject \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062e\u0637\u0627\u0647\u0627\u06cc HTTP \u0645\u062b\u0644 404 \u06cc\u0627 500 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 Promise\u0647\u0627\u06cc Resolve-\u0634\u062f\u0647 \u0631\u0641\u062a\u0627\u0631 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0648 \u0686\u06a9\u200c\u0647\u0627\u06cc \u0648\u0636\u0639\u06cc\u062a \u062f\u0633\u062a\u06cc \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u0646\u062f. \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0627\u06cc\u062f \u0635\u0631\u06cc\u062d\u0627\u064b \u0628\u0631 \u0627\u0633\u0627\u0633 response.ok \u062e\u0637\u0627 \u067e\u0631\u062a\u0627\u0628 \u06a9\u0646\u0646\u062f\u061b \u06a9\u0647 \u0628\u0647 Boilerplate \u0628\u06cc\u0634\u062a\u0631 \u0648 \u0634\u0627\u0646\u0633 \u0627\u0641\u0632\u0627\u06cc\u0634\u200c\u06cc\u0627\u0641\u062a\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u0646\u0627\u0633\u0627\u0632\u06af\u0627\u0631 \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627 \u0645\u0646\u062c\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/td><\/tr><tr><td>Interceptor\u0647\u0627<\/td><td>Axios \u0634\u0627\u0645\u0644 Interceptor\u0647\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0648 \u067e\u0627\u0633\u062e \u0627\u0633\u062a\u061b \u06a9\u0647 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u062a\u0632\u0631\u06cc\u0642 Token\u0647\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\u060c \u062b\u0628\u062a \u0644\u0627\u06af \u0641\u0639\u0627\u0644\u06cc\u062a \u06cc\u0627 \u062a\u0628\u062f\u06cc\u0644 \u062f\u0627\u062f\u0647 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0633\u0631\u0627\u0633\u0631\u06cc \u0642\u0628\u0644 \u0627\u0632 \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0647\u200c\u0648\u06cc\u0698\u0647 \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u06cc \u0627\u0631\u0632\u0634\u0645\u0646\u062f \u0627\u0633\u062a\u061b \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062a\u0645\u0631\u06a9\u0632 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u060c \u0627\u0645\u0646\u06cc\u062a\u060c \u0645\u0642\u06cc\u0627\u0633\u200c\u067e\u0630\u06cc\u0631\u06cc \u0648 \u0628\u0647\u0631\u0647\u200c\u0648\u0631\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0631\u0627 \u0628\u06cc\u0646 \u062a\u06cc\u0645\u200c\u0647\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc\u200c\u0628\u062e\u0634\u062f.<\/td><td>Fetch \u0642\u0627\u0628\u0644\u06cc\u062a Interceptor \u062f\u0627\u062e\u0644\u06cc \u0641\u0631\u0627\u0647\u0645 \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 \u0646\u062a\u0627\u06cc\u062c \u0645\u0634\u0627\u0628\u0647\u060c \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0627\u06cc\u062f Fetch \u0631\u0627 \u062f\u0631 \u062a\u0648\u0627\u0628\u0639 Utility \u0633\u0641\u0627\u0631\u0634\u06cc \u06cc\u0627 Middleware \u0628\u067e\u06cc\u0686\u0646\u062f. \u0627\u06cc\u0646 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0631\u0627 \u0632\u06cc\u0627\u062f\u060c \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u200c\u067e\u0630\u06cc\u0631\u06cc \u0631\u0627 \u06a9\u0645 \u0648 \u062a\u0628\u062f\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u062a\u0645\u0631\u06a9\u0632 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06cc\u0627 \u062a\u0632\u0631\u06cc\u0642 Token \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0631\u0627 \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc React \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u0686\u0627\u0644\u0634\u200c\u0628\u0631\u0627\u0646\u06af\u06cc\u0632\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/td><\/tr><tr><td>\u0645\u062f\u06cc\u0631\u06cc\u062a JSON<\/td><td>Axios \u067e\u0627\u0633\u062e\u200c\u0647\u0627\u06cc JSON \u0631\u0627 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u0648 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u067e\u0627\u0631\u0633 \u062f\u0633\u062a\u06cc <code>.json()<\/code> \u0631\u0627 \u062d\u0630\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0627\u062f\u0647 \u0631\u0627 \u0633\u0627\u062f\u0647 \u0648 \u062e\u0637\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0631\u0627 \u06a9\u0645\u06cc\u0646\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u06a9\u0647 \u0628\u0647 \u062a\u06cc\u0645\u200c\u0647\u0627 \u0627\u062c\u0627\u0632\u0647 \u062a\u0645\u0631\u06a9\u0632 \u0631\u0648\u06cc \u0645\u0646\u0637\u0642 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0628\u0647\u200c\u062c\u0627\u06cc \u067e\u0627\u0631\u0633 \u062a\u06a9\u0631\u0627\u0631\u06cc \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 JSON\u060c Axios \u0631\u0627 \u0628\u0647\u200c\u0648\u06cc\u0698\u0647 \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc React \u067e\u064f\u0631-\u062f\u0627\u062f\u0647 \u062c\u0630\u0627\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/td><td>Fetch \u0646\u06cc\u0627\u0632\u0645\u0646\u062f \u067e\u0627\u0631\u0633 \u062f\u0633\u062a\u06cc JSON \u0628\u0627 <code>.json()<\/code> \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0642\u062f\u0645 \u0627\u0636\u0627\u0641\u0647\u060c Boilerplate \u0631\u0627 \u0632\u06cc\u0627\u062f \u0648 \u0631\u06cc\u0633\u06a9 \u062e\u0637\u0627 \u0631\u0627 \u0645\u0639\u0631\u0641\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u0627\u06af\u0631 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u067e\u0627\u0631\u0633 \u06a9\u0631\u062f\u0646 \u06cc\u0627 \u0632\u0646\u062c\u06cc\u0631 \u06a9\u0631\u062f\u0646 \u062f\u0631\u0633\u062a Promise\u0647\u0627 \u0631\u0627 \u0641\u0631\u0627\u0645\u0648\u0634 \u06a9\u0646\u0646\u062f. \u0647\u0631\u0686\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u067e\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0633\u0631\u0631\u0627\u0633\u062a \u0627\u0633\u062a\u060c \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc React \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u062a\u06a9\u0631\u0627\u0631\u06cc \u0648 \u0645\u0633\u062a\u0639\u062f \u062e\u0637\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/td><\/tr><tr><td>\u0644\u063a\u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a<\/td><td>Axios \u0644\u063a\u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0646\u06cc\u062a\u06cc\u0648 \u0627\u0632 \u0637\u0631\u06cc\u0642 API \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 CancelToken \u0648 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc \u062c\u062f\u06cc\u062f\u062a\u0631 AbortController \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0627\u067e\u200c\u0647\u0627\u06cc React\u06cc \u0628\u0627 \u0648\u0636\u0639\u06cc\u062a\u200c\u0647\u0627\u06cc UI \u062f\u0627\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a\u061b \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0644\u0627\u0632\u0645 \u0628\u0627\u0634\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627 Abort \u0634\u0648\u0646\u062f\u2014\u0645\u0627\u0646\u0646\u062f \u062c\u0633\u062a\u062c\u0648\u06cc \u0632\u0646\u062f\u0647 \u06cc\u0627 Unmount \u0634\u062f\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u061b \u06a9\u0647 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0648 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc\u200c\u0628\u062e\u0634\u062f.<\/td><td>Fetch \u0644\u063a\u0648 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 API \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 AbortController \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u0645\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc \u062f\u0633\u062a\u06cc \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u062f\u061b \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u06a9\u0645\u062a\u0631 \u0634\u0647\u0648\u062f\u06cc \u0627\u0632 Axios \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u063a\u0644\u0628 \u0628\u0627\u06cc\u062f \u06a9\u062f \u0627\u0636\u0627\u0641\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0624\u062b\u0631 \u0644\u063a\u0648\u0647\u0627 \u0628\u0646\u0648\u06cc\u0633\u0646\u062f\u061b \u06a9\u0647 \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc React \u067e\u06cc\u0686\u06cc\u062f\u0647\u0654 \u0645\u062f\u06cc\u0631\u06cc\u062a\u200c\u06a9\u0646\u0646\u062f\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc \u0645\u0648\u0627\u0632\u06cc \u0645\u062a\u0639\u062f\u062f \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062f\u0634\u0648\u0627\u0631 \u0628\u0627\u0634\u062f.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u0646\u06a9\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Axios \u062a\u062c\u0631\u0628\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0628\u0631\u062a\u0631\u06cc \u0646\u0633\u0628\u062a \u0628\u0647 Fetch \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f:<\/strong> Axios \u0633\u06cc\u0646\u062a\u06a9\u0633 \u062a\u0645\u06cc\u0632\u062a\u0631 \u0648 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Promise\u0627\u06cc \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 Boilerplate \u0631\u0627 \u06a9\u0645\u060c \u067e\u0627\u0633\u062e\u200c\u0647\u0627\u06cc JSON \u0631\u0627 \u062e\u0648\u062f\u06a9\u0627\u0631 \u067e\u0627\u0631\u0633 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0628\u0631\u0627\u06cc \u06a9\u062f\u0647\u0627\u06cc \u0648\u0636\u0639\u06cc\u062a HTTP \u0634\u0627\u0645\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u06cc\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc React \u0645\u062a\u0648\u0633\u0637 \u0648 \u0628\u0632\u0631\u06af \u0627\u06cc\u062f\u0647\u200c\u0622\u0644 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f. \u062f\u0631 \u0645\u0642\u0627\u0628\u0644\u060c API \u0628\u0648\u0645\u06cc Fetch \u0633\u0628\u06a9 \u0648 \u062f\u0627\u062e\u0644\u06cc \u0627\u0633\u062a\u061b \u0627\u0645\u0627 \u0686\u06a9\u200c\u0647\u0627\u06cc \u0648\u0636\u0639\u06cc\u062a \u062f\u0633\u062a\u06cc\u060c \u067e\u0627\u0631\u0633 JSON \u0648 \u0641\u0642\u062f\u0627\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u0645\u062b\u0644 Interceptor\u0647\u0627 \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u062f\u061b \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u06cc\u0627 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0633\u0627\u062f\u0647 \u0645\u0646\u0627\u0633\u0628\u200c\u062a\u0631 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f.<\/li>\n\n\n\n<li><strong>\u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u062c\u0627\u0645\u0639 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0627 \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc:<\/strong> \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u0633\u0627\u062e\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc GET\u060c POST \u0648 DELETE \u0628\u0627 \u0647\u0631 \u062f\u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0644\u0627\u0633\u06cc React \u0648 Hook\u0647\u0627 \u0631\u0627 \u0645\u0631\u0648\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0647\u0631 \u0645\u062b\u0627\u0644 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0686\u0637\u0648\u0631 \u0648\u0636\u0639\u06cc\u062a\u200c\u0647\u0627\u06cc Loading \u0648 Error \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a\u060c UI \u0631\u0627 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc \u062f\u0631-\u062c\u0631\u06cc\u0627\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647 \u06cc\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u0646\u0627\u062e\u0648\u0627\u0633\u062a\u0647 \u0648\u0636\u0639\u06cc\u062a \u0628\u0639\u062f \u0627\u0632 Unmount \u0644\u063a\u0648 \u06a9\u0646\u06cc\u062f.<\/li>\n\n\n\n<li><strong>\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u062a\u0645\u0631\u06a9\u0632 \u0648 Interceptor\u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0648 \u062a\u0644\u0647\u200c\u0645\u062a\u0631\u06cc:<\/strong> \u0628\u0627 \u0633\u0627\u062e\u062a Instance \u0645\u0634\u062a\u0631\u06a9 Axios \u0648 \u062b\u0628\u062a Interceptor\u0647\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0648 \u067e\u0627\u0633\u062e\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f Token\u0647\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a (\u0645\u062b\u0644 <code>Authorization: Bearer &lt;token><\/code>) \u0631\u0627 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u0644\u0635\u0627\u0642\u060c ID\u0647\u0627\u06cc \u0647\u0645\u0628\u0633\u062a\u06af\u06cc \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u0627\u0636\u0627\u0641\u0647 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627 \u0631\u0627 \u062f\u0631 \u06a9\u0644 \u0627\u067e\u200c\u062a\u0627\u0646 \u0646\u0631\u0645\u0627\u0644 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0627\u0645\u0646\u06cc\u062a\u060c \u0642\u0627\u0628\u0644\u06cc\u062a \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u06af\u0632\u0627\u0631\u0634 \u062e\u0637\u0627\u06cc \u0633\u0627\u0632\u06af\u0627\u0631 \u062a\u0636\u0645\u06cc\u0646 \u0648 \u062c\u0631\u06cc\u0627\u0646\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\u200c\u0627\u06cc \u0645\u062b\u0644 Refresh \u062e\u0648\u062f\u06a9\u0627\u0631 Token \u0648 Retry \u0631\u0648\u06cc \u062e\u0637\u0627\u0647\u0627\u06cc 401 \u0631\u0627 \u0645\u0645\u06a9\u0646 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f.<\/li>\n\n\n\n<li><strong>async\/await \u0628\u0631\u0627\u06cc \u06a9\u062f \u062e\u0648\u0627\u0646\u0627 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc:<\/strong> \u0628\u0647\u0631\u0647\u200c\u06af\u06cc\u0631\u06cc \u0627\u0632 async\/await \u0628\u0627 Axios\u060c \u0645\u0646\u0637\u0642 \u063a\u06cc\u0631\u0647\u0645\u06af\u0627\u0645 \u0631\u0627 \u0627\u0632-\u0628\u0627\u0644\u0627-\u0628\u0647-\u067e\u0627\u06cc\u06cc\u0646 \u0646\u06af\u0647 \u0645\u06cc\u200c\u062f\u0627\u0631\u062f \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627 \u0631\u0627 \u0628\u0627 \u0628\u0644\u0627\u06a9\u200c\u0647\u0627\u06cc try\/catch \u0635\u0631\u06cc\u062d \u0645\u06cc\u200c\u0633\u0627\u0632\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0647\u200c\u0637\u0648\u0631 \u0637\u0628\u06cc\u0639\u06cc \u0628\u0627 Hook\u0647\u0627\u06cc React \u0645\u062b\u0644 useEffect \u0648 useState \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u061b \u0648 \u0628\u0647 \u06a9\u062f Fetch \u06a9\u0631\u062f\u0646 \u062f\u0627\u062f\u0647 \u062e\u0648\u0627\u0646\u0627\u062a\u0631\u060c \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u200c\u062a\u0631 \u0648 \u0645\u0642\u0627\u0648\u0645\u200c\u062a\u0631 \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 \u0628\u0627\u06af \u0645\u0646\u062c\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n<li><strong>\u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u0645\u0642\u0627\u0648\u0645 \u0628\u0631\u0627\u06cc \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631:<\/strong> \u0645\u0642\u0627\u0644\u0647 \u062a\u0634\u0631\u06cc\u062d \u0645\u06cc\u200c\u06a9\u0646\u062f \u0686\u0637\u0648\u0631 \u0628\u0631 \u0627\u0633\u0627\u0633 err.response (\u062e\u0637\u0627\u0647\u0627\u06cc HTTP)\u060c err.request (\u062e\u0637\u0627\u0647\u0627\u06cc \u0634\u0628\u06a9\u0647) \u0648 err.message (\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc\/\u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a) \u0634\u0627\u062e\u0647 \u0628\u0628\u0646\u062f\u06cc\u062f \u062a\u0627 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc UI \u06a9\u0627\u0631\u0628\u0631\u067e\u0633\u0646\u062f \u0641\u0631\u0627\u0647\u0645\u060c \u062c\u0632\u0626\u06cc\u0627\u062a \u062a\u0634\u062e\u06cc\u0635\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0644\u0627\u06af \u0648 Retry\u0647\u0627 \u06cc\u0627 \u062c\u0631\u06cc\u0627\u0646\u200c\u0647\u0627\u06cc \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0645\u062a\u0645\u0631\u06a9\u0632 \u06a9\u0631\u062f\u0646 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0634\u0641\u0627\u0641 \u0648 \u0642\u0627\u0628\u0644-\u0627\u0642\u062f\u0627\u0645 \u0628\u0628\u06cc\u0646\u0646\u062f \u0648 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062d\u0633\u0627\u0633 \u0647\u0631\u06af\u0632 \u062f\u0631 UI \u0627\u0641\u0634\u0627 \u0646\u0634\u0648\u0646\u062f.<\/li>\n\n\n\n<li><strong>\u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 Axios \u0628\u0631\u0627\u06cc \u0627\u0644\u0632\u0627\u0645\u0627\u062a \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc:<\/strong> \u0641\u0631\u0627\u062a\u0631 \u0627\u0632 CRUD \u067e\u0627\u06cc\u0647\u060c Axios \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\u200c\u0627\u06cc \u0645\u062b\u0644 Fetch \u06a9\u0631\u062f\u0646 \u062f\u0627\u062f\u0647 \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc\u200c\u0634\u062f\u0647 \u0628\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc Query\u060c \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc \u0647\u0645\u200c\u0632\u0645\u0627\u0646 \u0628\u0627 Promise.all\u060c \u0622\u067e\u0644\u0648\u062f \u0641\u0627\u06cc\u0644 \u0628\u0627 \u0631\u062f\u06cc\u0627\u0628\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a \u0627\u0632 \u0637\u0631\u06cc\u0642 onUploadProgress \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a Timeout \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc React \u062f\u0631-\u0633\u0637\u062d-\u0633\u0627\u0632\u0645\u0627\u0646\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0645\u0642\u06cc\u0627\u0633\u200c\u067e\u0630\u06cc\u0631\u060c \u06a9\u0627\u0631\u0622\u0645\u062f \u0648 \u06a9\u0627\u0631\u0628\u0631\u067e\u0633\u0646\u062f\u0646\u062f.<\/li>\n\n\n\n<li><strong>\u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u067e\u200c\u0647\u0627\u06cc React \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc:<\/strong> \u0631\u0627\u0647\u0646\u0645\u0627 \u0628\u0631 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u0645\u0646\u0637\u0642 API \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc UI\u060c \u0633\u0627\u062e\u062a Hook\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f (\u0645\u062b\u0644 useAxios) \u0648 \u0647\u0645\u06cc\u0634\u0647 \u0644\u063a\u0648 \u06a9\u0631\u062f\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627 \u0647\u0646\u06af\u0627\u0645 Unmount \u062a\u0623\u06a9\u06cc\u062f \u062f\u0627\u0631\u062f. \u0647\u0645\u200c\u0686\u0646\u06cc\u0646 \u067e\u0648\u0634\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0650\u06cc Axios \u0631\u0627 \u0628\u0647\u200c\u062c\u0627\u06cc Fetch \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u0645\u060c \u0686\u0637\u0648\u0631 \u067e\u0627\u0633\u062e\u200c\u0647\u0627 \u0648 \u062e\u0637\u0627\u0647\u0627 \u0631\u0627 \u062f\u0631 TypeScript \u062a\u0627\u06cc\u067e \u06a9\u0646\u06cc\u0645 \u0648 \u0686\u0637\u0648\u0631 \u0627\u0632 \u062f\u0627\u0645\u200c\u0647\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a\u06cc \u0631\u0627\u06cc\u062c \u0645\u062b\u0644 \u0627\u0641\u0634\u0627\u06cc Token\u0647\u0627 \u06cc\u0627 Stack Trace\u0647\u0627 \u062f\u0631 UI \u0627\u062c\u062a\u0646\u0627\u0628 \u06a9\u0646\u06cc\u0645.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u0646\u06cc\u0627\u0632 \u0628\u0647 \u062f\u06cc\u067e\u0644\u0648\u06cc \u067e\u0631\u0648\u0698\u0647 React \u0648 \u0632\u0646\u062f\u0647 \u062f\u0627\u0634\u062a\u0646\u0634 \u062f\u0627\u0631\u06cc\u062f\u061f \u067e\u0644\u062a\u0641\u0631\u0645 \u0627\u067e \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f \u0648 \u067e\u0631\u0648\u0698\u0647 React \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0627\u0632 \u06af\u06cc\u062a\u200c\u0647\u0627\u0628 \u062f\u0631 \u0686\u0646\u062f \u062f\u0642\u06cc\u0642\u0647 \u062f\u06cc\u067e\u0644\u0648\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0631\u0627\u06cc \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Node.js \u0646\u0633\u062e\u0647 20.x (\u0622\u062e\u0631\u06cc\u0646 LTS)<\/strong> \u0646\u0635\u0628\u200c\u0634\u062f\u0647 \u0631\u0648\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631\u062a\u0627\u0646. \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u0631\u0648\u06cc macOS \u06cc\u0627 \u0627\u0648\u0628\u0648\u0646\u062a\u0648\u060c \u0645\u0631\u0627\u062d\u0644 \u0631\u0627\u0647\u0646\u0645\u0627\u0647\u0627\u06cc \u00ab\u0646\u0635\u0628 Node.js \u0631\u0648\u06cc macOS\u00bb \u06cc\u0627 \u00ab\u0646\u0635\u0628 Node.js \u0631\u0648\u06cc \u0627\u0648\u0628\u0648\u0646\u062a\u0648\u00bb \u062f\u0631 \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/li>\n\n\n\n<li><strong>\u067e\u0631\u0648\u0698\u0647 React \u062c\u062f\u06cc\u062f<\/strong> \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc\u200c\u0634\u062f\u0647 \u0628\u0627 Create React App \u06cc\u0627 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0631\u0633\u0645\u06cc React \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627. \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0627\u0632 React \u0646\u0633\u062e\u0647 18.x\u2014\u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u067e\u0627\u06cc\u062f\u0627\u0631\u2014\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li><strong>Axios \u0646\u0635\u0628\u200c\u0634\u062f\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 npm<\/strong> (<code>npm install axios<\/code>)\u2014\u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0646\u062d\u0648\u0647 \u0646\u0635\u0628 \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc React \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u0627\u06cc\u0646\u200c\u062c\u0627 \u0628\u0627 Axios \u0646\u0633\u062e\u0647 1.x \u062a\u0633\u062a \u0634\u062f\u0647\u200c\u0627\u0646\u062f. \u0628\u0631\u0627\u06cc \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0648 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627 \u0645\u062e\u0632\u0646 \u06af\u06cc\u062a\u200c\u0647\u0627\u0628 Axios \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/li>\n\n\n\n<li><strong>npm \u0646\u0633\u062e\u0647 v10.x<\/strong> (\u0647\u0645\u0631\u0627\u0647 Node.js 20.x \u0639\u0631\u0636\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f) \u06cc\u0627 Yarn \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0645\u062f\u06cc\u0631 \u067e\u06a9\u06cc\u062c\u200c\u062a\u0627\u0646.<\/li>\n\n\n\n<li><strong>\u062f\u0631\u06a9 \u067e\u0627\u06cc\u0647\u200c\u0627\u06cc \u0627\u0632 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/strong>\u2014\u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0633\u0631\u06cc \u00ab\u0646\u062d\u0648\u0647 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u062f\u0631 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u00bb \u062f\u0631 \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f \u0628\u0633\u0627\u0632\u06cc\u062f\u2014\u0628\u0647\u200c\u0647\u0645\u0631\u0627\u0647 \u062f\u0627\u0646\u0634 \u067e\u0627\u06cc\u0647 HTML \u0648 CSS.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0627 Node.js v20.11.1\u060c npm v10.2.4\u060c react v18.2.0 \u0648 axios v1.6.x \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u06af\u0627\u0645 \u06f1 \u2014 \u0627\u0641\u0632\u0648\u062f\u0646 Axios \u0628\u0647 \u067e\u0631\u0648\u0698\u0647<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u062d\u0627\u0644\u0627 \u06cc\u0627\u062f \u0645\u06cc\u200c\u06af\u06cc\u0631\u06cc\u062f \u0686\u0637\u0648\u0631 Axios \u0631\u0627 \u062f\u0631 React \u0646\u0635\u0628 \u0648 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0627\u06cc \u06a9\u0647 \u0628\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u00ab\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 React \u0628\u0627 Create React App\u00bb \u0633\u0627\u062e\u062a\u0647\u200c\u0627\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app react-axios-example<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 Axios \u0628\u0647 \u067e\u0631\u0648\u0698\u0647\u060c \u062a\u0631\u0645\u06cc\u0646\u0627\u0644\u200c\u062a\u0627\u0646 \u0631\u0627 \u0628\u0627\u0632 \u0648 \u0628\u0647 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u0648\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd react-axios-example<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0633\u067e\u0633 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 Axios \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install axios<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>yarn add axios<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0647\u0631 \u062f\u0648 npm \u0648 Yarn \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u067e\u0627\u06cc\u062f\u0627\u0631 Axios \u0631\u0627 \u0646\u0635\u0628 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u061b \u0648 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u067e\u0631\u0648\u0698\u0647\u200c\u062a\u0627\u0646 \u0627\u0632 \u0628\u0647\u200c\u0631\u0648\u0632\u062a\u0631\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627 \u0648 \u0648\u0635\u0644\u0647\u200c\u0647\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u062f.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u062f\u0631 \u06cc\u06a9 \u0646\u06af\u0627\u0647 \u2014 \u06af\u0627\u0645 \u06f1 (\u0646\u0635\u0628 Axios)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0647\u062f\u0641:<\/strong> \u0646\u0635\u0628 Axios \u0648 \u062a\u0623\u06cc\u06cc\u062f \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0628\u0648\u062f\u0646\u0634 \u0628\u0631\u0627\u06cc \u0627\u067e\u200c\u062a\u0627\u0646.<\/li>\n\n\n\n<li><strong>\u0627\u062c\u0631\u0627:<\/strong> <code>npm install axios<\/code> (\u06cc\u0627 <code>yarn add axios<\/code>).<\/li>\n\n\n\n<li><strong>\u062a\u0623\u06cc\u06cc\u062f:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>npm list axios<\/code> \u2190 \u0646\u0633\u062e\u0647\u200c\u0627\u06cc \u0645\u062b\u0644 <a href=\"mailto:axios@1.x\">axios@1.x<\/a> \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n\n\n\n<li><code>cat package.json<\/code> \u2190 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u200c\u0647\u0627 \u0634\u0627\u0645\u0644 <code>\"axios\": \"^1.x\"<\/code>.<\/li>\n\n\n\n<li>\u0627\u0641\u0632\u0648\u062f\u0646 <code>import axios from 'axios'<\/code> \u0628\u0647 \u0641\u0627\u06cc\u0644\u06cc\u061b \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627\u06cc\u062f \u0628\u062f\u0648\u0646 \u062e\u0637\u0627 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0634\u0648\u062f.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062e\u0631\u0648\u062c\u06cc \u0645\u0648\u0631\u062f \u0627\u0646\u062a\u0638\u0627\u0631:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$ npm list axios\nproject@1.0.0 \/path\/to\/project\n\u2514\u2500\u2500 axios@1.6.x<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0686\u06a9\u200c\u0644\u06cc\u0633\u062a \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc (\u062f\u0631\u062e\u0648\u0627\u0633\u062a GET):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91; ] Axios \u0628\u0627 npm\/yarn \u0646\u0635\u0628 \u0634\u062f\n&#91; ] \u062f\u0631 package.json \u062a\u0623\u06cc\u06cc\u062f \u0634\u062f\n&#91; ] \u0642\u0627\u062f\u0631 \u0628\u0647 import \u06a9\u0631\u062f\u0646 axios \u0628\u062f\u0648\u0646 \u062e\u0637\u0627\u06cc \u0628\u06cc\u0644\u062f<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u06af\u0627\u0645 \u06f2 \u2014 \u0645\u062b\u0627\u0644 \u062f\u0631\u062e\u0648\u0627\u0633\u062a GET \u0628\u0627 Axios \u062f\u0631 React<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u06cc\u062f\u06cc \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u062f \u0648 Axios \u0631\u0627 \u062f\u0631\u0648\u0646\u0634 Import \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u062a\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a GET\u0627\u06cc \u0628\u0641\u0631\u0633\u062a\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0631\u0648\u0646 \u067e\u0631\u0648\u0698\u0647 React \u062e\u0648\u062f\u062a\u0627\u0646\u060c \u0628\u0627\u06cc\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u06cc\u062f\u06cc \u0628\u0647 \u0646\u0627\u0645 PersonList \u0628\u0633\u0627\u0632\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0648\u0644\u060c \u0632\u06cc\u0631\u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062c\u062f\u06cc\u062f components \u0631\u0627 \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc src \u0628\u0633\u0627\u0632\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>mkdir src\/components<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0631 \u0627\u06cc\u0646 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\u060c PersonList.js \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>src\/components\/PersonList.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport axios from 'axios';\n\nexport default class PersonList extends React.Component {\n  state = {\n    persons: &#91;]\n  }\n\n  componentDidMount() {\n    axios.get(`https:\/\/jsonplaceholder.typicode.com\/users`)\n      .then(res =&gt; {\n        const persons = res.data;\n        this.setState({ persons });\n      })\n      .catch(err =&gt; {\n        console.error('Error fetching data:', err);\n      });\n  }\n\n  render() {\n    return (\n      &lt;ul&gt;\n        {\n          this.state.persons\n            .map(person =&gt;\n              &lt;li key={person.id}&gt;{person.name}&lt;\/li&gt;\n            )\n        }\n      &lt;\/ul&gt;\n    )\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0648\u0644\u060c React \u0648 Axios \u0631\u0627 Import \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u062a\u0627 \u0647\u0631 \u062f\u0648 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0627\u0634\u0646\u062f. \u0633\u067e\u0633 \u0628\u0647 Hook \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a componentDidMount \u0642\u0644\u0627\u0628 \u0645\u06cc\u200c\u0632\u0646\u06cc\u062f \u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a GET\u0627\u06cc \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0632 <code>axios.get(url)<\/code> \u0628\u0627 URL\u0627\u06cc \u0627\u0632 Endpoint \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 API \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u062a\u0627 Promise\u0627\u06cc \u0628\u06af\u06cc\u0631\u06cc\u062f \u06a9\u0647 \u0634\u06cc\u0621 \u067e\u0627\u0633\u062e\u06cc \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f. \u062f\u0631\u0648\u0646 \u0634\u06cc\u0621 \u067e\u0627\u0633\u062e\u060c \u062f\u0627\u062f\u0647\u200c\u0627\u06cc \u0647\u0633\u062a \u06a9\u0647 \u0633\u067e\u0633 \u0645\u0642\u062f\u0627\u0631 person \u0628\u0647 \u0622\u0646 \u062a\u062e\u0635\u06cc\u0635 \u0645\u06cc\u200c\u06cc\u0627\u0628\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Axios \u0647\u0645 \u0633\u0628\u06a9 Promise \u06cc\u0639\u0646\u06cc <code>.then()<\/code> \u0648 \u0647\u0645 \u0633\u06cc\u0646\u062a\u06a9\u0633 \u0645\u062f\u0631\u0646 async\/await \u0631\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0647\u0631\u0686\u0646\u062f <code>.then()<\/code> \u0633\u0631\u0631\u0627\u0633\u062a \u0627\u0633\u062a \u0648 \u062f\u0631 \u0645\u062a\u062f\u0647\u0627\u06cc \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u062e\u0648\u0628 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 async\/await \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u06a9\u062f \u0631\u0627 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc \u0628\u0627 Hook\u0647\u0627 \u062e\u0648\u0627\u0646\u0627\u062a\u0631 \u06a9\u0646\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0647\u0645\u200c\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u06cc\u06af\u0631 \u062f\u0631\u0628\u0627\u0631\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u2014\u0645\u062b\u0644 \u06a9\u062f \u0648\u0636\u0639\u06cc\u062a \u0632\u06cc\u0631 res.status \u06cc\u0627 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631\u0648\u0646 res.request\u2014\u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062a\u0627\u0628\u0639\u06cc \u0628\u0627 Hook\u0647\u0627 (Async\/Await)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u067e\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 React \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc \u0648 Hook\u0647\u0627 \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u0645\u06cc\u200c\u062f\u0647\u0646\u062f. \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0627\u0644\u06af\u0648\u06cc \u0622\u0645\u0627\u062f\u0647-\u067e\u0631\u0648\u062f\u0627\u06a9\u0634\u0646\u06cc \u0628\u0627 \u0648\u0636\u0639\u06cc\u062a\u200c\u0647\u0627\u06cc Loading \u0648 Error\u060c \u0644\u063a\u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0632 \u0637\u0631\u06cc\u0642 AbortController (\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc\u200c\u0634\u062f\u0647 \u062a\u0648\u0633\u0637 Axios) \u0648 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u0648\u0627\u0636\u062d \u062f\u063a\u062f\u063a\u0647\u200c\u0647\u0627 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f UX \u0631\u0627 \u0628\u0647\u0628\u0648\u062f\u060c \u0627\u0632 \u062a\u0646\u0638\u06cc\u0645 \u0648\u0636\u0639\u06cc\u062a \u0631\u0648\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc Unmount-\u0634\u062f\u0647 \u0627\u062c\u062a\u0646\u0627\u0628 \u0648 \u0628\u0627 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u06cc \u0647\u0645\u200c\u0631\u0627\u0633\u062a\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>src\/components\/PersonListHooks.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useEffect, useState } from 'react';\nimport axios from 'axios';\n\nfunction PersonListHooks() {\n  const &#91;persons, setPersons] = useState(&#91;]);\n  const &#91;loading, setLoading] = useState(false);\n  const &#91;error, setError] = useState(null);\n\n  useEffect(() =&gt; {\n    const controller = new AbortController(); \/\/ Axios \u0627\u0632 AbortController \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f\n    const fetchData = async () =&gt; {\n      setLoading(true);\n      setError(null);\n      try {\n        const res = await axios.get('https:\/\/jsonplaceholder.typicode.com\/users', {\n          signal: controller.signal,\n          \/\/ headers: { Authorization: `Bearer ${token}` }, \/\/ \u0646\u0645\u0648\u0646\u0647 \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\n        });\n        setPersons(res.data);\n      } catch (err) {\n        \/\/ \u062a\u0641\u06a9\u06cc\u06a9 \u0628\u06cc\u0646 \u0644\u063a\u0648\u060c \u062e\u0637\u0627\u0647\u0627\u06cc \u0634\u0628\u06a9\u0647 \u0648 \u062e\u0637\u0627\u0647\u0627\u06cc HTTP\n        if (axios.isCancel?.(err) || err.name === 'CanceledError') return;\n        if (err.response) {\n          \/\/ \u0633\u0631\u0648\u0631 \u0628\u0627 \u0648\u0636\u0639\u06cc\u062a \u063a\u06cc\u0631-2xx \u067e\u0627\u0633\u062e \u062f\u0627\u062f\n          setError(`Server error: ${err.response.status} ${err.response.statusText}`);\n        } else if (err.request) {\n          \/\/ \u0647\u06cc\u0686 \u067e\u0627\u0633\u062e\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u0634\u062f\n          setError('Network error: no response from server');\n        } else {\n          \/\/ \u0686\u06cc\u0632 \u062f\u06cc\u06af\u0631\u06cc \u062d\u06cc\u0646 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u062e \u062f\u0627\u062f\n          setError(`Request error: ${err.message}`);\n        }\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchData();\n    return () =&gt; controller.abort(); \/\/ \u067e\u0627\u06a9\u200c\u0633\u0627\u0632\u06cc: \u0644\u063a\u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062f\u0631-\u062c\u0631\u06cc\u0627\u0646 \u0647\u0646\u06af\u0627\u0645 unmount\n  }, &#91;]); \/\/ \u0622\u0631\u0627\u06cc\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u062e\u0627\u0644\u06cc: \u06cc\u06a9\u200c\u0628\u0627\u0631 \u0647\u0646\u06af\u0627\u0645 mount \u0627\u062c\u0631\u0627 \u0634\u0648\u062f\n\n  if (loading) return &lt;p&gt;Loading users\u2026&lt;\/p&gt;;\n  if (error) return &lt;p role=\"alert\"&gt;{error}&lt;\/p&gt;;\n\n  return (\n    &lt;ul&gt;\n      {persons.map((person) =&gt; (\n        &lt;li key={person.id}&gt;{person.name}&lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}\n\nexport default PersonListHooks;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0686\u0631\u0627 \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f (EAT \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u062e\u0648\u0627\u0646\u0627\u06cc\u06cc async\/await:<\/strong> \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0632\u0646\u062c\u06cc\u0631 \u06a9\u0631\u062f\u0646 Promise \u0631\u0627 \u06a9\u0645 \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u200c\u067e\u0630\u06cc\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u06cc\u0645\u200c\u0647\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc\u200c\u0628\u062e\u0634\u062f.<\/li>\n\n\n\n<li><strong>\u0648\u0636\u0639\u06cc\u062a\u200c\u0647\u0627\u06cc \u0635\u0631\u06cc\u062d:<\/strong> loading \u0648 error\u060c UX \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633 \u0648 \u0645\u0646\u0637\u0642 \u0634\u0641\u0627\u0641\u200c\u062a\u0631\u06cc \u0628\u0631\u0627\u06cc Retry\u0647\u0627 \u0648 UI\u0647\u0627\u06cc \u0627\u0633\u06a9\u0644\u062a \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/li>\n\n\n\n<li><strong>\u0644\u063a\u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a:<\/strong> AbortController \u0627\u0632 \u0634\u0631\u0627\u06cc\u0637 Race \u0648 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647 \u0648\u0642\u062a\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc Unmount \u0645\u06cc\u200c\u0634\u0648\u062f \u06cc\u0627 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u200c\u0647\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li><strong>\u062a\u0631\u06cc\u0627\u0698 \u0645\u0642\u0627\u0648\u0645 \u062e\u0637\u0627:<\/strong> \u062a\u0641\u06a9\u06cc\u06a9 err.response \u0648 err.request \u0648 \u062e\u0637\u0627\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0628\u0647 \u0644\u0627\u06af\u200c\u0647\u0627\u06cc \u0642\u0627\u0628\u0644-\u0627\u0642\u062f\u0627\u0645 \u0648 \u067e\u06cc\u0627\u0645\u200c\u0631\u0633\u0627\u0646\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0645\u0646\u200c\u062a\u0631 \u0645\u0646\u062c\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n\n\n\n<li><strong>\u0645\u0642\u06cc\u0627\u0633\u200c\u067e\u0630\u06cc\u0631\u06cc:<\/strong> \u0627\u06cc\u0646 \u06a9\u062f \u062f\u0631 \u0627\u067e\u200c\u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u200c\u062a\u0631\u06cc \u06a9\u0647 \u0628\u0639\u062f\u0627\u064b Instance \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 Axios\u060c Interceptor\u0647\u0627 (\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\/\u062a\u0644\u0647\u200c\u0645\u062a\u0631\u06cc) \u0648 Retry \u0628\u0627 Backoff \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u062c\u0627 \u0645\u06cc\u200c\u0627\u0641\u062a\u062f.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Hook\u0647\u0627 \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633\u06cc \u2014 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u06a9\u062f\u0627\u0645 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u0645:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0628\u0631\u0627\u06cc \u06a9\u062f \u062c\u062f\u06cc\u062f Hook\u0647\u0627 \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u06cc\u062f: \u0645\u062f\u0644 state\/effect \u0633\u0627\u062f\u0647\u200c\u062a\u0631\u060c \u062a\u0631\u06a9\u06cc\u0628 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0627\u0632 \u0637\u0631\u06cc\u0642 Hook\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0648 \u0628\u062f\u0648\u0646 \u062f\u0627\u0645\u200c\u0647\u0627\u06cc this\/\u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a.<\/li>\n\n\n\n<li>\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633\u06cc \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u06a9\u062f\u0628\u06cc\u0633\u200c\u0647\u0627\u06cc \u0642\u062f\u06cc\u0645\u06cc \u06cc\u0627 \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0641\u0642\u0637-\u06a9\u0644\u0627\u0633\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f (\u0645\u062b\u0644\u0627\u064b Error Boundary\u0647\u0627\u06cc \u0645\u0633\u062a\u0642\u0631) \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f \u062a\u0627 refactor \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0631\u06cc\u0632\u06cc\u200c\u0634\u062f\u0647.<\/li>\n\n\n\n<li>\u0627\u067e\u200c\u0647\u0627\u06cc \u0645\u062e\u0644\u0648\u0637 \u0627\u0634\u06a9\u0627\u0644\u06cc \u0646\u062f\u0627\u0631\u0646\u062f: Hook\u0647\u0627 \u0631\u0627 \u0628\u0647\u200c\u062a\u062f\u0631\u06cc\u062c \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0628\u0631\u06af \u0628\u067e\u0630\u06cc\u0631\u06cc\u062f\u061b \u0633\u067e\u0633 \u0645\u0646\u0637\u0642 \u0645\u0634\u062a\u0631\u06a9 \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a Hook\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0628\u0627\u0644\u0627 \u0628\u0628\u0631\u06cc\u062f \u0647\u0646\u06af\u0627\u0645 \u0645\u062f\u0631\u0646\u200c\u0633\u0627\u0632\u06cc.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0628\u0647 app.js \u062e\u0648\u062f\u062a\u0627\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>src\/app.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import PersonList from '.\/components\/PersonList.js';\n\nfunction App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;PersonList\/&gt;\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 (Hook\u0647\u0627):<\/strong> \u0627\u0632 \u0646\u0633\u062e\u0647 Hook \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0644\u06cc\u0633\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>src\/app.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import PersonListHooks from '.\/components\/PersonListHooks';\n\nfunction App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;PersonListHooks \/&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0633\u067e\u0633 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u062a\u0627\u0646 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm start<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0628\u06cc\u0646\u06cc\u062f. \u0641\u0647\u0631\u0633\u062a\u06cc \u0627\u0632 \u06f1\u06f0 \u0646\u0627\u0645 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u062f\u0631 \u06cc\u06a9 \u0646\u06af\u0627\u0647 \u2014 \u06af\u0627\u0645 \u06f2 (GET \/users)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0647\u062f\u0641:<\/strong> \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0632 JSONPlaceholder.<\/li>\n\n\n\n<li><strong>\u067e\u06cc\u0633\u062a \u06a9\u0646\u06cc\u062f:<\/strong> src\/components\/PersonListHooks.js\u060c Import \u062f\u0631 App.<\/li>\n\n\n\n<li><strong>\u0627\u062c\u0631\u0627:<\/strong> <code>npm start<\/code>.<\/li>\n\n\n\n<li><strong>\u0628\u0627\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f:<\/strong> \u0644\u06cc\u0633\u062a \u0646\u0627\u0645\u0631\u062a\u0628 \u0627\u0632 \u06f1\u06f0 \u0646\u0627\u0645 \u062f\u0631 DOM.<\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062e\u0631\u0648\u062c\u06cc \u0645\u0648\u0631\u062f \u0627\u0646\u062a\u0638\u0627\u0631 (\u0628\u062e\u0634\u06cc \u0627\u0632 DOM):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul&gt;\n  &lt;li&gt;Leanne Graham&lt;\/li&gt;\n  &lt;li&gt;Ervin Howell&lt;\/li&gt;\n  &lt;li&gt;Clementine Bauch&lt;\/li&gt;\n  &lt;!-- \u2026 \u06f7 \u0645\u0648\u0631\u062f \u062f\u06cc\u06af\u0631 \u2026 --&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0686\u06a9\u200c\u0644\u06cc\u0633\u062a \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc (\u062f\u0631\u062e\u0648\u0627\u0633\u062a POST):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91; ] \u0641\u0627\u06cc\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0633\u0627\u062e\u062a\u0647 \u0648 export \u0634\u062f\n&#91; ] \u062f\u0631 App import \u0648 \u0631\u0646\u062f\u0631 \u0634\u062f\n&#91; ] \u0628\u062f\u0648\u0646 \u062e\u0637\u0627\u06cc \u06a9\u0646\u0633\u0648\u0644\u061b \u0641\u0647\u0631\u0633\u062a \u06f1\u06f0 \u0646\u0627\u0645 \u0638\u0627\u0647\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u06af\u0627\u0645 \u06f3 \u2014 \u0645\u062b\u0627\u0644 \u062f\u0631\u062e\u0648\u0627\u0633\u062a POST \u0628\u0627 Axios \u062f\u0631 React<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0631 \u0627\u06cc\u0646 \u06af\u0627\u0645\u060c \u0627\u0632 Axios \u0628\u0627 \u0645\u062a\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a HTTP \u062f\u06cc\u06af\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 POST \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0632\u06cc\u0631 \u0646\u0633\u062e\u0647 \u0628\u0647\u200c\u0631\u0648\u0632\u0634\u062f\u0647\u200c\u0627\u06cc \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a PersonAdd \u0627\u0633\u062a\u061b \u06a9\u0647 \u0627\u0644\u0627\u0646 \u0627\u0632 async\/await \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647\u060c \u0648\u0636\u0639\u06cc\u062a HTTP \u0631\u0627 \u0644\u0627\u06af \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u0645\u0642\u0627\u0648\u0645\u06cc \u062f\u0627\u0631\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>src\/components\/PersonAdd.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport axios from 'axios';\n\nexport default class PersonAdd extends React.Component {\n  state = {\n    name: ''\n  }\n\n  handleChange = event =&gt; {\n    this.setState({ name: event.target.value });\n  }\n\n  handleSubmit = async event =&gt; {\n    event.preventDefault();\n\n    const user = { name: this.state.name };\n\n    try {\n      const res = await axios.post('https:\/\/jsonplaceholder.typicode.com\/users', user);\n      console.log('Status:', res.status);\n      console.log('Response data:', res.data);\n    } catch (err) {\n      if (err.response) {\n        console.error('POST failed with status:', err.response.status, err.response.statusText);\n      } else if (err.request) {\n        console.error('Network error: no response from server');\n      } else {\n        console.error('Request setup error:', err.message);\n      }\n    }\n  }\n\n  render() {\n    return (\n      &lt;div&gt;\n        &lt;form onSubmit={this.handleSubmit}&gt;\n          &lt;label&gt;\n            Person Name:\n            &lt;input type=\"text\" name=\"name\" onChange={this.handleChange} \/&gt;\n          &lt;\/label&gt;\n          &lt;button type=\"submit\"&gt;Add&lt;\/button&gt;\n        &lt;\/form&gt;\n      &lt;\/div&gt;\n    )\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0627\u0632 async\/await \u0628\u0631\u0627\u06cc \u0634\u0641\u0627\u0641\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647\u060c res.status \u0631\u0627 \u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u0646\u062a\u06cc\u062c\u0647 HTTP \u0644\u0627\u06af \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0634\u0627\u0645\u0644 \u0634\u0627\u062e\u0647\u200c\u0647\u0627\u06cc try\/catch \u0627\u0633\u062a \u06a9\u0647 \u0628\u06cc\u0646 \u062e\u0637\u0627\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 (err.response)\u060c \u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a\u200c\u0647\u0627\u06cc \u0634\u0628\u06a9\u0647 (err.request) \u0648 \u0645\u0633\u0627\u0626\u0644 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a (err.message) \u062a\u0641\u06a9\u06cc\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0631\u0648\u0646 \u062a\u0627\u0628\u0639 handleSubmit\u060c \u0627\u0642\u062f\u0627\u0645 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0641\u0631\u0645 \u0631\u0627 \u0645\u062a\u0648\u0642\u0641 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 \u0648\u0636\u0639\u06cc\u062a \u0631\u0627 \u0628\u0647 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 POST \u0647\u0645\u0627\u0646 \u0634\u06cc\u0621 \u067e\u0627\u0633\u062e \u0628\u0627 \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631\u0648\u0646 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc then \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0631\u0627\u06cc \u062a\u06a9\u0645\u06cc\u0644 \u062f\u0631\u062e\u0648\u0627\u0633\u062a POST\u060c \u0627\u0648\u0644 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062b\u0628\u062a \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 \u0648\u0631\u0648\u062f\u06cc \u0631\u0627 \u0647\u0645\u0631\u0627\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a POST \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u061b \u06a9\u0647 \u067e\u0627\u0633\u062e\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0633\u067e\u0633 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u067e\u0627\u0633\u062e \u0631\u0627 console.log \u06a9\u0646\u06cc\u062f\u061b \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0631\u0645 \u0646\u0634\u0627\u0646 \u0628\u062f\u0647\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0628\u0647 app.js \u062e\u0648\u062f\u062a\u0627\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>src\/app.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import PersonList from '.\/components\/PersonList';\nimport PersonAdd from '.\/components\/PersonAdd';\n\nfunction App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;PersonAdd\/&gt;\n      &lt;PersonList\/&gt;\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 (Hook\u0647\u0627):<\/strong> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a POST \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Hook \u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>src\/app.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import PersonAddHooks from '.\/components\/PersonAddHooks';\n\nfunction App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;PersonAddHooks \/&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0633\u067e\u0633 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u062a\u0627\u0646 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm start<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0628\u06cc\u0646\u06cc\u062f. \u0641\u0631\u0645\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0634\u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0628\u0639\u062f \u0627\u0632 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0627\u0631\u0628\u0631 \u062c\u062f\u06cc\u062f\u060c \u06a9\u0646\u0633\u0648\u0644 \u0631\u0627 \u0686\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u062f\u0631 \u06cc\u06a9 \u0646\u06af\u0627\u0647 \u2014 \u06af\u0627\u0645 \u06f3 (POST \/users)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0647\u062f\u0641:<\/strong> \u0627\u0631\u0633\u0627\u0644 \u06a9\u0627\u0631\u0628\u0631 \u062c\u062f\u06cc\u062f \u0648 \u0644\u0627\u06af \u0646\u062a\u06cc\u062c\u0647.<\/li>\n\n\n\n<li><strong>\u067e\u06cc\u0633\u062a \u06a9\u0646\u06cc\u062f:<\/strong> src\/components\/PersonAddHooks.js\u060c Import \u062f\u0631 App.<\/li>\n\n\n\n<li><strong>\u0627\u062c\u0631\u0627:<\/strong> \u0646\u0627\u0645\u06cc \u062a\u0627\u06cc\u067e \u06a9\u0646\u06cc\u062f \u2190 Add.<\/li>\n\n\n\n<li><strong>\u0628\u0627\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f:<\/strong> \u0648\u0636\u0639\u06cc\u062a 201 \u06cc\u0627 200 \u062f\u0631 \u06a9\u0646\u0633\u0648\u0644 (JSONPlaceholder \u0633\u0627\u062e\u062a \u0631\u0627 \u0634\u0628\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f).<\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062e\u0631\u0648\u062c\u06cc \u0645\u0648\u0631\u062f \u0627\u0646\u062a\u0638\u0627\u0631 \u0628\u0631\u0627\u06cc \u0628\u062e\u0634\u06cc \u0627\u0632 Console:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Status: 201\nResponse data: { id: 101, name: \"Ada Lovelace\" }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0686\u06a9\u200c\u0644\u06cc\u0633\u062a \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc (\u062f\u0631\u062e\u0648\u0627\u0633\u062a DELETE):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91; ] \u0648\u0631\u0648\u062f\u06cc\u060c \u0648\u0636\u0639\u06cc\u062a \u0645\u062d\u0644\u06cc \u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f\n&#91; ] \u0627\u0631\u0633\u0627\u0644\u060c axios.post \u0631\u0627 trigger \u0645\u06cc\u200c\u06a9\u0646\u062f\n&#91; ] \u06a9\u0646\u0633\u0648\u0644\u060c \u0648\u0636\u0639\u06cc\u062a HTTP \u0648 JSON \u067e\u0627\u0633\u062e \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f\n&#91; ] \u062e\u0637\u0627\u0647\u0627 \u067e\u06cc\u0627\u0645 \u062f\u0648\u0633\u062a\u0627\u0646\u0647\u200c\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f (\u062f\u0631 \u0635\u0648\u0631\u062a \u0648\u062c\u0648\u062f)<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062a\u0627\u0628\u0639\u06cc POST \u0628\u0627 Hook\u0647\u0627 (Async\/Await)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0646\u0633\u062e\u0647 Hook \u0632\u06cc\u0631\u060c \u0645\u062b\u0627\u0644 \u06a9\u0644\u0627\u0633\u06cc \u0631\u0627 \u0628\u0627\u0632\u062a\u0627\u0628 \u0627\u0645\u0627 \u062c\u0632\u0626\u06cc\u0627\u062a \u062f\u0648\u0633\u062a\u062f\u0627\u0631-\u067e\u0631\u0648\u062f\u0627\u06a9\u0634\u0646 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f: \u0648\u0636\u0639\u06cc\u062a Loading\u060c \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc \u062e\u0637\u0627\u060c \u0644\u0627\u06af \u0648\u0636\u0639\u06cc\u062a HTTP \u0648 \u0644\u063a\u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0627 AbortController. \u0627\u06cc\u0646 UI \u0631\u0627 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0646\u06af\u0647 \u0645\u06cc\u200c\u062f\u0627\u0631\u062f \u0648 \u0627\u0632 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0648\u0636\u0639\u06cc\u062a \u0628\u0639\u062f \u0627\u0632 Unmount \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>src\/components\/PersonAddHooks.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState, useEffect, useRef } from 'react';\nimport axios from 'axios';\n\nfunction PersonAddHooks() {\n  const &#91;name, setName] = useState('');\n  const &#91;loading, setLoading] = useState(false);\n  const &#91;error, setError] = useState(null);\n  const lastStatus = useRef(null);\n\n  useEffect(() =&gt; {\n    \/\/ \u0627\u06cc\u0646\u200c\u062c\u0627 POST \u0627\u0648\u0644\u06cc\u0647\u200c\u0627\u06cc \u0646\u06cc\u0633\u062a\u061b controller \u0628\u0647 \u0627\u0632\u0627\u06cc \u0647\u0631 \u0627\u0631\u0633\u0627\u0644 \u0633\u0627\u062e\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\n    return () =&gt; {\n      \/\/ \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u067e\u0627\u06a9\u200c\u0633\u0627\u0632\u06cc\n    };\n  }, &#91;]);\n\n  const handleSubmit = async (e) =&gt; {\n    e.preventDefault();\n    setLoading(true);\n    setError(null);\n    const controller = new AbortController();\n\n    try {\n      const res = await axios.post(\n        'https:\/\/jsonplaceholder.typicode.com\/users',\n        { name },\n        { signal: controller.signal }\n      );\n      lastStatus.current = res.status;\n      console.log('Status:', res.status);\n      console.log('Response data:', res.data);\n      setName(''); \/\/ \u062f\u0631 \u0635\u0648\u0631\u062a \u0645\u0648\u0641\u0642\u06cc\u062a reset \u06a9\u0646\n    } catch (err) {\n      if (axios.isCancel?.(err) || err.name === 'CanceledError') return;\n      if (err.response) {\n        setError(`POST failed: ${err.response.status} ${err.response.statusText}`);\n      } else if (err.request) {\n        setError('Network error: no response from server');\n      } else {\n        setError(`Request setup error: ${err.message}`);\n      }\n    } finally {\n      setLoading(false);\n    }\n\n    \/\/ \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc: \u062a\u0627\u0628\u0639\u06cc \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u0644\u063a\u0648 \u0627\u06af\u0631 \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0645\u0644\u06cc\u0627\u062a \u0637\u0648\u0644\u0627\u0646\u06cc-\u0645\u062f\u062a \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0646\u06cc\u062f\n    \/\/ return () =&gt; controller.abort();\n  };\n\n  return (\n    &lt;form onSubmit={handleSubmit}&gt;\n      &lt;label&gt;\n        Person Name:\n        &lt;input\n          type=\"text\"\n          name=\"name\"\n          value={name}\n          onChange={(e) =&gt; setName(e.target.value)}\n          disabled={loading}\n        \/&gt;\n      &lt;\/label&gt;\n      &lt;button type=\"submit\" disabled={loading || !name.trim()}&gt;\n        {loading ? 'Adding\u2026' : 'Add'}\n      &lt;\/button&gt;\n      {error &amp;&amp; &lt;p role=\"alert\"&gt;{error}&lt;\/p&gt;}\n      {lastStatus.current &amp;&amp; &lt;p&gt;Last status: {lastStatus.current}&lt;\/p&gt;}\n    &lt;\/form&gt;\n  );\n}\n\nexport default PersonAddHooks;<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u0646\u06a9\u062a\u0647:<\/strong> \u062f\u06a9\u0645\u0647 submit \u0631\u0627 \u062d\u06cc\u0646 Loading \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u0632 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0634\u0648\u062f. \u0628\u0631\u0627\u06cc API\u0647\u0627\u06cc \u0627\u062d\u0631\u0627\u0632-\u0647\u0648\u06cc\u062a\u200c\u0634\u062f\u0647\u060c \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc POST \u0631\u0627 \u0628\u0647 Instance \u0645\u0634\u062a\u0631\u06a9 Axios \u0628\u0627 Interceptor\u0647\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0631\u0627\u06cc Token\u0647\u0627 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">\u06af\u0627\u0645 \u06f4 \u2014 \u0645\u062b\u0627\u0644 \u062f\u0631\u062e\u0648\u0627\u0633\u062a DELETE \u0628\u0627 Axios \u062f\u0631 React<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f \u0686\u0637\u0648\u0631 \u0622\u06cc\u062a\u0645\u200c\u0647\u0627 \u0631\u0627 \u0627\u0632 API \u0628\u0627 <code>axios.delete<\/code> \u0648 \u067e\u0627\u0633 \u062f\u0627\u062f\u0646 URL \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0631\u0648\u0646 \u067e\u0631\u0648\u0698\u0647 React \u062e\u0648\u062f\u062a\u0627\u0646\u060c \u0628\u0627\u06cc\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u06cc\u062f\u06cc \u0628\u0647 \u0646\u0627\u0645 PersonRemove \u0628\u0633\u0627\u0632\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0641\u0627\u06cc\u0644 PersonRemove.js \u0631\u0627 \u0628\u0627 \u0646\u0633\u062e\u0647 \u0632\u06cc\u0631 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f\u061b \u06a9\u0647 \u0627\u0632 async\/await \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u0645\u0642\u0627\u0648\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>src\/PersonRemove.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport axios from 'axios';\n\nexport default class PersonRemove extends React.Component {\n  state = {\n    id: ''\n  }\n\n  handleChange = event =&gt; {\n    this.setState({ id: event.target.value });\n  }\n\n  handleSubmit = async event =&gt; {\n    event.preventDefault();\n    const { id } = this.state;\n    if (!id) return;\n\n    try {\n      \/\/ \u0646\u06a9\u062a\u0647: \u0628\u0631\u062e\u06cc API\u0647\u0627\u06cc \u067e\u0631\u0648\u062f\u0627\u06a9\u0634\u0646 \u0647\u062f\u0631\u0647\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u0646\u062f\u061b \u0646\u06a9\u062a\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f\n      const res = await axios.delete(`https:\/\/jsonplaceholder.typicode.com\/users\/${id}` \/*, {\n        headers: { Authorization: `Bearer &lt;token&gt;` }\n      }*\/);\n      console.log('Status:', res.status);\n      console.log('Response data:', res.data);\n    } catch (err) {\n      if (err.response) {\n        console.error('DELETE failed with status:', err.response.status, err.response.statusText);\n      } else if (err.request) {\n        console.error('Network error: no response from server');\n      } else {\n        console.error('Request setup error:', err.message);\n      }\n    }\n  }\n\n  render() {\n    return (\n      &lt;div&gt;\n        &lt;form onSubmit={this.handleSubmit}&gt;\n          &lt;label&gt;\n            Person ID:\n            &lt;input type=\"number\" name=\"id\" onChange={this.handleChange} \/&gt;\n          &lt;\/label&gt;\n          &lt;button type=\"submit\"&gt;Delete&lt;\/button&gt;\n        &lt;\/form&gt;\n      &lt;\/div&gt;\n    )\n  }\n}<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u0646\u06a9\u062a\u0647:<\/strong> \u067e\u0627\u0633\u062e\u200c\u0647\u0627\u06cc API \u0645\u062a\u0641\u0627\u0648\u062a\u200c\u0627\u0646\u062f. \u062f\u0631 \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u067e\u0631\u0648\u062f\u0627\u06a9\u0634\u0646\u060c Endpoint\u0647\u0627\u06cc DELETE \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0647\u062f\u0631\u0647\u0627 (\u0645\u062b\u0644\u0627\u064b Token\u0647\u0627\u06cc Bearer \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06cc\u0627 Token\u0647\u0627\u06cc CSRF) \u06cc\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0644\u0627\u0632\u0645 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u067e\u200c\u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u200c\u062a\u0631\u060c Instance \u0645\u0634\u062a\u0631\u06a9 Axios \u0628\u0627 Interceptor\u0647\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\/\u067e\u0627\u0633\u062e (\u0628\u062e\u0634 Interceptor\u0647\u0627 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f) \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0632\u0631\u06cc\u0642 \u0633\u0627\u0632\u06af\u0627\u0631\u0650 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0648 \u062a\u0644\u0647\u200c\u0645\u062a\u0631\u06cc \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u06cc\u062f.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062a\u0627\u0628\u0639\u06cc DELETE \u0628\u0627 Hook\u0647\u0627 (Async\/Await)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0646\u0633\u062e\u0647 Hook \u0645\u062b\u0627\u0644 \u06a9\u0644\u0627\u0633\u06cc \u0631\u0627 \u0628\u0627\u0632\u062a\u0627\u0628 \u0648 \u0648\u0636\u0639\u06cc\u062a\u200c\u0647\u0627\u06cc Loading\/Error\u060c \u0644\u0627\u06af \u0648\u0636\u0639\u06cc\u062a \u0648 \u0644\u063a\u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0627\u0632 \u0634\u0631\u0627\u06cc\u0637 Race \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0648 \u0628\u0627\u0632\u062e\u0648\u0631\u062f UI \u0631\u0627 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0646\u06af\u0647 \u0645\u06cc\u200c\u062f\u0627\u0631\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>src\/components\/PersonRemoveHooks.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState, useRef } from 'react';\nimport axios from 'axios';\n\nfunction PersonRemoveHooks() {\n  const &#91;id, setId] = useState('');\n  const &#91;loading, setLoading] = useState(false);\n  const &#91;error, setError] = useState(null);\n  const lastStatus = useRef(null);\n\n  const handleSubmit = async (e) =&gt; {\n    e.preventDefault();\n    if (!id.trim()) return;\n    setLoading(true);\n    setError(null);\n    const controller = new AbortController();\n\n    try {\n      \/\/ \u0628\u0631\u062e\u06cc API\u0647\u0627 \u0647\u062f\u0631\u0647\u0627 \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u0646\u062f (\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\/CSRF). \u0627\u0632 \u0637\u0631\u06cc\u0642 Instance Axios \u06cc\u0627 \u0627\u06cc\u0646\u200c\u062c\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.\n      const res = await axios.delete(\n        `https:\/\/jsonplaceholder.typicode.com\/users\/${id}`,\n        { signal: controller.signal }\n      );\n      lastStatus.current = res.status;\n      console.log('Status:', res.status);\n      console.log('Response data:', res.data);\n      setId('');\n    } catch (err) {\n      if (axios.isCancel?.(err) || err.name === 'CanceledError') return;\n      if (err.response) {\n        setError(`DELETE failed: ${err.response.status} ${err.response.statusText}`);\n      } else if (err.request) {\n        setError('Network error: no response from server');\n      } else {\n        setError(`Request setup error: ${err.message}`);\n      }\n    } finally {\n      setLoading(false);\n    }\n\n    \/\/ \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc: return () =&gt; controller.abort(); \/\/ \u0627\u06af\u0631 \u0628\u0647 \u062c\u0631\u06cc\u0627\u0646 \u0637\u0648\u0644\u0627\u0646\u06cc-\u0645\u062f\u062a \u062a\u0637\u0628\u06cc\u0642\u0634 \u0628\u062f\u0647\u06cc\u062f\n  };\n\n  return (\n    &lt;form onSubmit={handleSubmit}&gt;\n      &lt;label&gt;\n        Person ID:\n        &lt;input\n          type=\"number\"\n          name=\"id\"\n          value={id}\n          onChange={(e) =&gt; setId(e.target.value)}\n          disabled={loading}\n        \/&gt;\n      &lt;\/label&gt;\n      &lt;button type=\"submit\" disabled={loading || !id.trim()}&gt;\n        {loading ? 'Deleting\u2026' : 'Delete'}\n      &lt;\/button&gt;\n      {error &amp;&amp; &lt;p role=\"alert\"&gt;{error}&lt;\/p&gt;}\n      {lastStatus.current &amp;&amp; &lt;p&gt;Last status: {lastStatus.current}&lt;\/p&gt;}\n    &lt;\/form&gt;\n  );\n}\n\nexport default PersonRemoveHooks;<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u0646\u06a9\u062a\u0647:<\/strong> \u0628\u0631\u0627\u06cc API\u0647\u0627\u06cc \u0627\u062d\u0631\u0627\u0632-\u0647\u0648\u06cc\u062a\u200c\u0634\u062f\u0647\u060c Instance \u0645\u0634\u062a\u0631\u06a9 Axios \u0628\u0627 Interceptor\u0647\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0632\u0631\u06cc\u0642 \u0647\u062f\u0631\u0647\u0627\u06cc Authorization \u0648 Interceptor\u0647\u0627\u06cc \u067e\u0627\u0633\u062e \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062c\u0631\u06cc\u0627\u0646\u200c\u0647\u0627\u06cc Refresh \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 401 \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u06cc\u062f.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>src\/app.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import PersonList from '.\/components\/PersonList';\nimport PersonAdd from '.\/components\/PersonAdd';\nimport PersonRemove from '.\/components\/PersonRemove';\n\nfunction App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;PersonAdd\/&gt;\n      &lt;PersonList\/&gt;\n      &lt;PersonRemove\/&gt;\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 (Hook\u0647\u0627):<\/strong> \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a delete \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Hook \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>src\/app.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import PersonRemoveHooks from '.\/components\/PersonRemoveHooks';\n\nfunction App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;PersonRemoveHooks \/&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0633\u067e\u0633 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u062a\u0627\u0646 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm start<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0628\u06cc\u0646\u06cc\u062f. \u0641\u0631\u0645\u06cc \u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u062f\u0631 \u06cc\u06a9 \u0646\u06af\u0627\u0647 \u2014 \u06af\u0627\u0645 \u06f4 (DELETE \/users\/:id)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0647\u062f\u0641:<\/strong> \u062d\u0630\u0641 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 ID \u0648 \u062a\u0623\u06cc\u06cc\u062f \u0646\u062a\u06cc\u062c\u0647.<\/li>\n\n\n\n<li><strong>\u067e\u06cc\u0633\u062a \u06a9\u0646\u06cc\u062f:<\/strong> src\/components\/PersonRemoveHooks.js\u060c Import \u062f\u0631 App.<\/li>\n\n\n\n<li><strong>\u0627\u062c\u0631\u0627:<\/strong> \u06f1 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u2190 Delete.<\/li>\n\n\n\n<li><strong>\u0628\u0627\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f:<\/strong> Status: 200 \u0648 {} \u062f\u0631 \u06a9\u0646\u0633\u0648\u0644 (JSONPlaceholder \u0634\u06cc\u0621 \u062e\u0627\u0644\u06cc \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f).<\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062e\u0631\u0648\u062c\u06cc \u0645\u0648\u0631\u062f \u0627\u0646\u062a\u0638\u0627\u0631 (\u0628\u062e\u0634\u06cc \u0627\u0632 Console):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Status: 200\nResponse data: {}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0686\u06a9\u200c\u0644\u06cc\u0633\u062a \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc (Instance Axios \u0648 Interceptor\u0647\u0627):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91; ] \u0648\u0631\u0648\u062f\u06cc \u062b\u0628\u062a \u0648 \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0634\u062f (\u063a\u06cc\u0631-\u062e\u0627\u0644\u06cc)\n&#91; ] axios.delete \u0628\u0627 \u0645\u0633\u06cc\u0631 \u062f\u0631\u0633\u062a \u0635\u062f\u0627 \u0632\u062f\u0647 \u0634\u062f\n&#91; ] \u06a9\u0646\u0633\u0648\u0644\u060c \u0648\u0636\u0639\u06cc\u062a HTTP \u0648 \u0628\u062f\u0646\u0647 \u067e\u0627\u0633\u062e \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f\n&#91; ] \u062e\u0637\u0627\u0647\u0627 \u067e\u06cc\u0627\u0645 \u062f\u0648\u0633\u062a\u0627\u0646\u0647\u200c\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f (\u062f\u0631 \u0635\u0648\u0631\u062a \u0648\u062c\u0648\u062f)<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u06af\u0627\u0645 \u06f5 \u2014 \u0633\u0627\u062e\u062a Instance \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 Axios \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Interceptor\u0647\u0627<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Instance \u0645\u0634\u062a\u0631\u06a9 Axios\u060c \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc (URL \u067e\u0627\u06cc\u0647\u060c \u0647\u062f\u0631\u0647\u0627\u060c \u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a\u200c\u0647\u0627) \u0631\u0627 \u0645\u062a\u0645\u0631\u06a9\u0632 \u0648 Interceptor\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0648 \u062a\u0644\u0647\u200c\u0645\u062a\u0631\u06cc \u0645\u0645\u06a9\u0646 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f. \u0627\u06cc\u0646 \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0648 Boilerplate \u0631\u0627 \u06a9\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0633\u0627\u062e\u062a Instance<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ src\/api.js\nimport axios from 'axios';\n\nconst API = axios.create({\n  baseURL: 'https:\/\/jsonplaceholder.typicode.com\/',\n  timeout: 10000,\n  headers: {\n    'Content-Type': 'application\/json',\n  },\n  withCredentials: false, \/\/ \u0641\u0642\u0637 \u0627\u06af\u0631 API\u062a\u0627\u0646 \u0627\u0632 \u06a9\u0648\u06a9\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f true \u0628\u06af\u0630\u0627\u0631\u06cc\u062f\n});\n\nexport default API;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0641\u0632\u0648\u062f\u0646 Interceptor \u062f\u0631\u062e\u0648\u0627\u0633\u062a (\u0647\u062f\u0631\u0647\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\u060c ID\u0647\u0627\u06cc \u0647\u0645\u0628\u0633\u062a\u06af\u06cc)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ src\/api.interceptors.js\nimport API from '.\/api';\n\nAPI.interceptors.request.use(\n  (config) =&gt; {\n    \/\/ \u0646\u0645\u0648\u0646\u0647: \u0627\u0644\u0635\u0627\u0642 token \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u0632 storage\n    const token = localStorage.getItem('access_token');\n    if (token) {\n      config.headers.Authorization = `Bearer ${token}`;\n    }\n    \/\/ \u0646\u0645\u0648\u0646\u0647: \u0627\u0641\u0632\u0648\u062f\u0646 ID \u0647\u0645\u0628\u0633\u062a\u06af\u06cc \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc\n    config.headers&#91;'X-Request-ID'] = crypto.randomUUID?.() || Date.now().toString(36);\n    return config;\n  },\n  (error) =&gt; Promise.reject(error)\n);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0641\u0632\u0648\u062f\u0646 Interceptor \u067e\u0627\u0633\u062e (\u0645\u062f\u06cc\u0631\u06cc\u062a 401\u060c \u062a\u0644\u0647\u200c\u0645\u062a\u0631\u06cc \u067e\u0627\u06cc\u0647)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ src\/api.interceptors.js (\u0627\u062f\u0627\u0645\u0647)\nAPI.interceptors.response.use(\n  (response) =&gt; response,\n  async (error) =&gt; {\n    const { response, config } = error;\n    \/\/ \u062a\u0644\u0647\u200c\u0645\u062a\u0631\u06cc \u067e\u0627\u06cc\u0647\n    console.warn('API error:', {\n      url: config?.url,\n      method: config?.method,\n      status: response?.status,\n    });\n\n    \/\/ \u0646\u0645\u0648\u0646\u0647: \u0645\u062f\u06cc\u0631\u06cc\u062a token \u062f\u0633\u062a\u0631\u0633\u06cc \u0645\u0646\u0642\u0636\u06cc\u200c\u0634\u062f\u0647\n    if (response?.status === 401 &amp;&amp; !config.__isRetry) {\n      config.__isRetry = true;\n      try {\n        \/\/ \u062c\u0631\u06cc\u0627\u0646 refresh \u0634\u0628\u0647\u061b \u0628\u0627 endpoint \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u062e\u0648\u062f\u062a\u0627\u0646 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f\n        const refreshToken = localStorage.getItem('refresh_token');\n        if (refreshToken) {\n          \/\/ await axios.post('\/auth\/refresh', { refreshToken });\n          \/\/ localStorage.setItem('access_token', newAccessToken);\n          \/\/ config.headers.Authorization = `Bearer ${newAccessToken}`;\n          return API(config); \/\/ \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0635\u0644\u06cc \u0631\u0627 retry \u06a9\u0646\n        }\n      } catch (e) {\n        \/\/ \u0628\u0647 reject \u0631\u0633\u06cc\u062f\u0646 \u0631\u0627 \u0627\u062f\u0627\u0645\u0647 \u0628\u062f\u0647\n      }\n    }\n    return Promise.reject(error);\n  }\n);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Instance \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ src\/components\/PersonRemove.js\nimport React from 'react';\nimport API from '..\/api';\nimport '..\/api.interceptors'; \/\/ \u062a\u0636\u0645\u06cc\u0646 \u062b\u0628\u062a \u06cc\u06a9\u200c\u0628\u0627\u0631\u0647 interceptor\u0647\u0627\n\nexport default class PersonRemove extends React.Component {\n  state = { id: '' };\n\n  handleChange = (e) =&gt; this.setState({ id: e.target.value });\n\n  handleSubmit = async (e) =&gt; {\n    e.preventDefault();\n    try {\n      const res = await API.delete(`users\/${this.state.id}`);\n      console.log(res.data);\n    } catch (err) {\n      console.error('Delete failed:', err);\n    }\n  };\n\n  render() {\n    return (\n      &lt;form onSubmit={this.handleSubmit}&gt;\n        &lt;label&gt;\n          Person ID:\n          &lt;input type=\"number\" name=\"id\" onChange={this.handleChange} \/&gt;\n        &lt;\/label&gt;\n        &lt;button type=\"submit\"&gt;Delete&lt;\/button&gt;\n      &lt;\/form&gt;\n    );\n  }\n}<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u0646\u06a9\u062a\u0647 \u0627\u0645\u0646\u06cc\u062a\u06cc:<\/strong> \u0647\u0631\u06af\u0632 Secret\u0647\u0627 \u0631\u0627 \u062f\u0631 \u06a9\u062f \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f Hard-code \u0646\u06a9\u0646\u06cc\u062f. Token\u0647\u0627 \u0631\u0627 \u0627\u0645\u0646 \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a\u200c\u0647\u0627\u06cc \u062d\u0633\u0627\u0633\u060c Proxy \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0628\u06a9\u200c\u0627\u0646\u062f \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u06cc\u062f.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">\u06af\u0627\u0645 \u06f6 \u2014 \u0622\u06cc\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0645 \u0627\u0632 Axios \u0628\u0627 async\/await \u062f\u0631 React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645\u061f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 async\/await \u0628\u0627 Axios \u06a9\u062f \u0631\u0627 \u062a\u0645\u06cc\u0632\u062a\u0631 \u0648 \u0627\u0633\u062a\u062f\u0644\u0627\u0644 \u062f\u0631\u0628\u0627\u0631\u0647\u200c\u0627\u0634 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u0628\u0647\u200c\u0648\u06cc\u0698\u0647 \u062f\u0631 \u0627\u067e\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 React \u06a9\u0647 Hook\u0647\u0627 \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u0645\u06cc\u200c\u062f\u0647\u0646\u062f. \u0628\u0647\u200c\u062c\u0627\u06cc \u0632\u0646\u062c\u06cc\u0631 \u06a9\u0631\u062f\u0646 <code>.then()<\/code>\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 try\/catch \u0628\u067e\u06cc\u0686\u06cc\u062f \u062a\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u0634\u0641\u0627\u0641\u200c\u062a\u0631\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>src\/components\/PersonRemove.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport API from '..\/api';\n\nexport default class PersonRemove extends React.Component {\n  state = { id: '' };\n\n  handleChange = (e) =&gt; this.setState({ id: e.target.value });\n\n  handleSubmit = async (e) =&gt; {\n    e.preventDefault();\n    try {\n      const response = await API.delete(`users\/${this.state.id}`);\n      console.log('Status:', response.status);\n      console.log('Response data:', response.data);\n    } catch (err) {\n      if (err.response) {\n        console.error('Delete failed with status:', err.response.status, err.response.statusText);\n      } else if (err.request) {\n        console.error('Network error: no response from server');\n      } else {\n        console.error('Request setup error:', err.message);\n      }\n    }\n  };\n\n  render() {\n    return (\n      &lt;form onSubmit={this.handleSubmit}&gt;\n        &lt;label&gt;\n          Person ID:\n          &lt;input type=\"number\" name=\"id\" onChange={this.handleChange} \/&gt;\n        &lt;\/label&gt;\n        &lt;button type=\"submit\"&gt;Delete&lt;\/button&gt;\n      &lt;\/form&gt;\n    );\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0686\u0631\u0627 async\/await \u062f\u0631 React\u061f<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 async\/await \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0627 \u0646\u06af\u0647\u200c\u062f\u0627\u0634\u062a\u0646 \u0645\u0646\u0637\u0642 \u0627\u0632-\u0628\u0627\u0644\u0627-\u0628\u0647-\u067e\u0627\u06cc\u06cc\u0646\u2014\u0628\u0647\u200c\u062c\u0627\u06cc \u062a\u0648\u062f\u0631\u062a\u0648\u06cc \u0639\u0645\u06cc\u0642 \u062f\u0631 \u0632\u0646\u062c\u06cc\u0631\u0647\u200c\u0647\u0627\u06cc <code>.then()<\/code>\u2014\u0628\u0647\u0628\u0648\u062f \u0645\u06cc\u200c\u0628\u062e\u0634\u062f. \u0627\u06cc\u0646 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627 \u0631\u0627 \u0628\u0627 try\/catch \u0635\u0631\u06cc\u062d \u0645\u06cc\u200c\u0633\u0627\u0632\u062f \u0648 \u0628\u0647\u200c\u0637\u0648\u0631 \u0637\u0628\u06cc\u0639\u06cc \u0628\u0627 Hook\u0647\u0627 (useEffect \u0648 useState) \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc \u0645\u062f\u0631\u0646 \u062c\u0641\u062a \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0646\u062d\u0648\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u0647\u0627 \u0628\u0627 Axios \u062f\u0631 React<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u0645\u0624\u062b\u0631\u060c \u062a\u0641\u0627\u0648\u062a \u0628\u06cc\u0646 \u0627\u067e React \u0645\u0642\u0627\u0648\u0645 \u0648 \u0634\u06a9\u0646\u0646\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0628\u062e\u0634 \u062a\u0648\u0636\u06cc\u062d \u0645\u06cc\u200c\u062f\u0647\u062f \u0686\u0637\u0648\u0631 \u0628\u0627 Axios \u062f\u0631 React \u062e\u0637\u0627\u0647\u0627 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f\u060c \u0634\u06cc\u0621 \u062e\u0637\u0627\u06cc Axios \u0686\u0647 \u0686\u06cc\u0632\u06cc \u0634\u0627\u0645\u0644 \u0648 \u0686\u0637\u0648\u0631 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u067e\u0633\u0646\u062f \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u06cc\u062f\u2014\u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0644\u0627\u06af\u200c\u0647\u0627\u06cc \u062a\u0641\u0635\u06cc\u0644\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0646\u06af\u0647 \u0645\u06cc\u200c\u062f\u0627\u0631\u06cc\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0634\u06cc\u0621 \u062e\u0637\u0627\u06cc Axios: \u0628\u0631\u0631\u0633\u06cc \u0639\u0645\u06cc\u0642 \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0647\u0646\u06af\u0627\u0645 \u06a9\u0627\u0631 \u0628\u0627 Axios \u062f\u0631 React\u060c \u062f\u0631\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0634\u06cc\u0621 \u062e\u0637\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0645\u0642\u0627\u0648\u0645 \u0648 \u06a9\u0627\u0631\u0628\u0631\u067e\u0633\u0646\u062f \u062d\u06cc\u0627\u062a\u06cc \u0627\u0633\u062a. Axios \u0634\u06cc\u0621 Error \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u062a\u0642\u0648\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0632\u0645\u06cc\u0646\u0647 \u062a\u0641\u0635\u06cc\u0644\u06cc \u062f\u0631\u0628\u0627\u0631\u0647 \u0627\u06cc\u0646\u06a9\u0647 \u062d\u06cc\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a HTTP \u0686\u0647 \u0686\u06cc\u0632\u06cc \u062e\u0631\u0627\u0628 \u0634\u062f\u0647 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u062a\u0641\u06a9\u06cc\u06a9 \u0628\u06cc\u0646 \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc \u0634\u06a9\u0633\u062a \u0645\u062a\u0641\u0627\u0648\u062a\u2014\u0645\u0627\u0646\u0646\u062f \u062e\u0637\u0627\u0647\u0627\u06cc \u0633\u0631\u0648\u0631\u060c \u0645\u0633\u0627\u0626\u0644 \u0634\u0628\u06a9\u0647 \u0648 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u0627\u0634\u062a\u0628\u0627\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u2014\u0648 \u067e\u0627\u0633\u062e \u0645\u0646\u0627\u0633\u0628 \u062f\u0631 UI \u0648 \u0644\u0627\u06af\u200c\u0647\u0627\u06cc\u062a\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u06a9\u0627\u0644\u0628\u062f\u0634\u0646\u0627\u0633\u06cc \u062e\u0637\u0627\u06cc Axios<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u0641\u06cc\u0644\u062f<\/th><th>\u0686\u0647 \u0648\u0642\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f<\/th><th>\u0686\u0647 \u0686\u06cc\u0632\u06cc \u0634\u0627\u0645\u0644<\/th><th>\u0686\u0637\u0648\u0631 \u062f\u0631 \u0627\u067e\u200c\u0647\u0627\u06cc React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f<\/th><\/tr><\/thead><tbody><tr><td>err.response<\/td><td>\u0633\u0631\u0648\u0631 \u067e\u0627\u0633\u062e \u062f\u0627\u062f\u061b \u0627\u0645\u0627 \u0628\u0627 \u0648\u0636\u0639\u06cc\u062a \u063a\u06cc\u0631-2xx<\/td><td>\u0634\u06cc\u0621\u0627\u06cc: { status\u060c statusText\u060c data\u060c headers\u060c config\u060c request }<\/td><td>\u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc \u0622\u06af\u0627\u0647-\u0627\u0632-\u0648\u0636\u0639\u06cc\u062a (\u0645\u062b\u0644\u0627\u064b \u00abUnauthorized\u00bb \u0628\u0631\u0627\u06cc 401\u060c \u00abNot Found\u00bb \u0628\u0631\u0627\u06cc 404\u060c \u00abServer Error\u00bb \u0628\u0631\u0627\u06cc 5xx).<\/td><\/tr><tr><td>err.request<\/td><td>\u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0631\u0633\u0627\u0644 \u0634\u062f \u0627\u0645\u0627 \u067e\u0627\u0633\u062e\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u0634\u062f<\/td><td>\u0634\u06cc\u0621 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0632\u06cc\u0631\u06cc\u0646 (\u0645\u062b\u0644\u0627\u064b XMLHttpRequest \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u060c http.ClientRequest \u062f\u0631 Node.js)<\/td><td>\u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062e\u0637\u0627\u06cc \u0634\u0628\u06a9\u0647 \u0631\u0641\u062a\u0627\u0631 \u06a9\u0646\u06cc\u062f\u061b \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631 \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u062a\u0635\u0627\u0644\u0634 \u0631\u0627 \u0686\u06a9 \u06a9\u0646\u062f \u06cc\u0627 Retry \u06a9\u0646\u062f.<\/td><\/tr><tr><td>err.message<\/td><td>\u0647\u0645\u06cc\u0634\u0647 \u0645\u0648\u062c\u0648\u062f<\/td><td>\u0631\u0634\u062a\u0647 \u0642\u0627\u0628\u0644-\u062e\u0648\u0627\u0646\u062f\u0646-\u0627\u0646\u0633\u0627\u0646\u06cc \u06a9\u0647 \u062e\u0637\u0627 \u0631\u0627 \u062a\u0648\u0635\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f (\u0645\u062b\u0644\u0627\u064b \u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a\u200c\u0647\u0627\u060c \u0644\u063a\u0648\u0647\u0627\u060c \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u0627\u0634\u062a\u0628\u0627\u0647)<\/td><td>\u067e\u06cc\u0627\u0645 \u062e\u0637\u0627\u06cc \u0639\u0645\u0648\u0645\u06cc \u0646\u0645\u0627\u06cc\u0634\u060c \u062c\u0632\u0626\u06cc\u0627\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u062f\u06cc\u0628\u0627\u06af \u0644\u0627\u06af \u0648 \u0627\u06af\u0631 \u062e\u0637\u0627 \u0628\u0647\u200c\u062f\u0644\u06cc\u0644 \u0644\u063a\u0648 \u0628\u0648\u062f \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u062f.<\/td><\/tr><tr><td>err.code<\/td><td>\u06af\u0627\u0647\u06cc (\u0645\u062b\u0644\u0627\u064b \u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a\u200c\u0647\u0627\u060c \u062e\u0637\u0627\u0647\u0627\u06cc \u0634\u0628\u06a9\u0647)<\/td><td>\u0631\u0634\u062a\u0647 \u06a9\u062f \u062e\u0637\u0627\u06cc \u06a9\u0648\u062a\u0627\u0647 (\u0645\u062b\u0644\u0627\u064b &#8216;ECONNABORTED&#8217; \u0628\u0631\u0627\u06cc \u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a\u200c\u0647\u0627)<\/td><td>\u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u061b \u0645\u062b\u0644 Retry \u0631\u0648\u06cc \u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a\u200c\u0647\u0627 \u06cc\u0627 \u0646\u0645\u0627\u06cc\u0634 UI \u062e\u0627\u0635\u06cc \u0628\u0631\u0627\u06cc \u06a9\u062f\u0647\u0627\u06cc \u062e\u0637\u0627\u06cc \u062e\u0627\u0635.<\/td><\/tr><tr><td>err.isAxiosError<\/td><td>\u0647\u0645\u06cc\u0634\u0647 \u0645\u0648\u062c\u0648\u062f (Axios &gt;= 0.19.0)<\/td><td>\u0641\u0644\u06af \u0628\u0648\u0644\u06cc (true \u0627\u06af\u0631 \u062e\u0637\u0627 \u0627\u0632 Axios \u0645\u0646\u0634\u0623 \u06af\u0631\u0641\u062a\u0647)<\/td><td>\u062a\u0641\u06a9\u06cc\u06a9 \u0627\u0645\u0646 \u062e\u0637\u0627\u0647\u0627\u06cc Axios \u0627\u0632 \u0633\u0627\u06cc\u0631 \u062e\u0637\u0627\u0647\u0627\u06cc \u067e\u0631\u062a\u0627\u0628\u200c\u0634\u062f\u0647 \u062f\u0631 \u0627\u067e \u06cc\u0627 Error Boundary\u0647\u0627\u06cc \u0634\u0645\u0627.<\/td><\/tr><tr><td>err.config<\/td><td>\u0647\u0645\u06cc\u0634\u0647 \u0645\u0648\u062c\u0648\u062f<\/td><td>\u0634\u06cc\u0621 config \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 Axios \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u200c\u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a<\/td><td>\u0628\u0631\u0627\u06cc \u062f\u06cc\u0628\u0627\u06af \u06cc\u0627 Retry \u06a9\u0631\u062f\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0627 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631\u06a9\u0631\u062f\u0647 \u0645\u0641\u06cc\u062f.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062e\u0637\u0627\u0647\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\/\u0645\u062c\u0648\u0632 (401\/403):<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0632 <code>err.response.status<\/code> \u0628\u0631\u0627\u06cc \u062a\u0634\u062e\u06cc\u0635 \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0646\u0634\u062f\u0647 \u06cc\u0627 \u0645\u062c\u0648\u0632 \u0646\u062f\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u067e\u06cc\u0627\u0645 \u062f\u0633\u062a\u0631\u0633\u06cc-\u0631\u062f-\u0634\u062f\u0647 \u0646\u0634\u0627\u0646 \u0628\u062f\u0647\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0645\u0646\u0628\u0639 \u067e\u06cc\u062f\u0627 \u0646\u0634\u062f (404):<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06af\u0631 <code>err.response.status === 404<\/code>\u060c \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0637\u0644\u0627\u0639 \u0628\u062f\u0647\u06cc\u062f \u0645\u0646\u0628\u0639 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f\u061b \u0628\u0647\u200c\u062c\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062e\u0637\u0627\u06cc \u0639\u0645\u0648\u0645\u06cc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062e\u0637\u0627\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 (5xx):<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0631\u0627\u06cc <code>err.response.status &gt;= 500<\/code>\u060c \u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0627\u0645 \u00ab\u0633\u0631\u0648\u0631 \u0645\u0648\u0642\u062a\u0627\u064b \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0646\u06cc\u0633\u062a\u00bb \u0648 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0627\u062c\u0631\u0627\u06cc \u0645\u0646\u0637\u0642 Retry \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062e\u0631\u0627\u0628\u06cc\u200c\u0647\u0627\u06cc \u0634\u0628\u06a9\u0647:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06af\u0631 err.request \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u0627\u0645\u0627 err.response \u0646\u0647\u060c \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0646\u062c\u0627\u0645 \u0634\u062f \u0627\u0645\u0627 \u067e\u0627\u0633\u062e\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u0634\u062f. \u0627\u06cc\u0646 \u0627\u063a\u0644\u0628 \u0645\u0634\u06a9\u0644 \u0634\u0628\u06a9\u0647 \u06cc\u0627 \u062e\u0627\u0645\u0648\u0634 \u0628\u0648\u062f\u0646 \u0633\u0631\u0648\u0631 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0627\u062a\u0635\u0627\u0644\u0634 \u0631\u0627 \u0686\u06a9 \u06a9\u0646\u062f \u06cc\u0627 \u0628\u0639\u062f\u0627\u064b \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a\u200c\u0647\u0627 \u0648 \u0644\u063a\u0648\u0647\u0627:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06af\u0631 <code>err.code === 'ECONNABORTED'<\/code> \u06cc\u0627 err.message \u0634\u0627\u0645\u0644 \u00abtimeout\u00bb \u0627\u0633\u062a\u060c \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0637\u0644\u0627\u0639 \u0628\u062f\u0647\u06cc\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f. \u0627\u06af\u0631 \u062e\u0637\u0627 \u0628\u0647\u200c\u062f\u0644\u06cc\u0644 \u0644\u063a\u0648 \u0628\u0648\u062f (\u0645\u062b\u0644\u0627\u064b Unmount \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a)\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u06cc\u200c\u0635\u062f\u0627 \u0646\u0627\u062f\u06cc\u062f\u0647\u200c\u0627\u0634 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0686\u06a9\u200c\u0647\u0627\u06cc \u0633\u0631\u06cc\u0639: \u0644\u063a\u0648\u060c \u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a\u200c\u0647\u0627 \u0648 Guard\u0647\u0627\u06cc Axios<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0632 \u0627\u06cc\u0646 \u0686\u06a9\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0645\u0648\u0627\u0631\u062f \u062e\u0637\u0627\u06cc \u0631\u0627\u06cc\u062c \u0648 \u0627\u062c\u062a\u0646\u0627\u0628 \u0627\u0632 \u0644\u0627\u06af\u200c\u0647\u0627\u06cc \u067e\u0631\u0646\u0648\u06cc\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import axios \/*, { AxiosError }*\/ from 'axios';\n\ntry {\n  \/\/ ...\n} catch (err) {\n  \/\/ \u06f1) \u0645\u062d\u062f\u0648\u062f \u0628\u0647 \u062e\u0637\u0627\u0647\u0627\u06cc Axios (\u062f\u0631 \u0628\u0631\u0627\u0628\u0631 exception\u0647\u0627\u06cc \u0646\u0627\u0645\u0631\u062a\u0628\u0637 Guard \u0645\u06cc\u200c\u06a9\u0646\u062f)\n  if (axios.isAxiosError?.(err)) {\n    \/\/ \u06f2) \u0644\u063a\u0648 (\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a unmount \u0634\u062f \/ \u06a9\u0627\u0631\u0628\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u06a9\u0631\u062f)\n    if (err.name === 'CanceledError') {\n      \/\/ \u0628\u06cc\u200c\u0635\u062f\u0627 \u0646\u0627\u062f\u06cc\u062f\u0647 \u0628\u06af\u06cc\u0631 \u06cc\u0627 \u0641\u0642\u0637 debug-log \u06a9\u0646\n      return;\n    }\n    \/\/ \u06f3) \u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a (Axios \u0631\u0648\u06cc \u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a \u06a9\u062f ECONNABORTED \u0645\u06cc\u200c\u06af\u0630\u0627\u0631\u062f)\n    if (err.code === 'ECONNABORTED' || err.message?.toLowerCase().includes('timeout')) {\n      \/\/ \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc: \u00ab\u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a \u0634\u062f\u00bb \u0631\u0627 \u0646\u0634\u0627\u0646 \u0628\u062f\u0647 \u0648 Retry \u0631\u0627 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u06a9\u0646\n    }\n    \/\/ \u06f4) \u0634\u0628\u06a9\u0647 \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 \u0648\u0636\u0639\u06cc\u062a HTTP\n    if (err.response) {\n      \/\/ \u062e\u0637\u0627\u06cc HTTP: \u0627\u0632 err.response.status \/ statusText \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\n    } else if (err.request) {\n      \/\/ \u062e\u0637\u0627\u06cc \u0634\u0628\u06a9\u0647: \u0628\u062f\u0648\u0646 \u067e\u0627\u0633\u062e \u0627\u0632 \u0633\u0631\u0648\u0631\n    }\n  } else {\n    \/\/ \u062e\u0637\u0627\u06cc \u063a\u06cc\u0631-Axios (\u0632\u0645\u0627\u0646-\u0627\u062c\u0631\u0627\/\u0645\u0646\u0637\u0642) \u2014 \u062f\u0648\u0628\u0627\u0631\u0647 \u067e\u0631\u062a\u0627\u0628 \u06a9\u0646 \u06cc\u0627 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\n    throw err;\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062f\u0627\u0645\u200c\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc (\u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u062e\u0631\u0627\u0628\u06cc\u200c\u0647\u0627\u06cc CORS \u0627\u063a\u0644\u0628 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062e\u0637\u0627\u0647\u0627\u06cc \u0634\u0628\u06a9\u0647 \u0638\u0627\u0647\u0631 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f (err.request \u0628\u062f\u0648\u0646 err.response). \u0647\u062f\u0631\u0647\u0627\u06cc CORS \u0633\u0631\u0648\u0631 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a Preflight \u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n\n\n\n<li>Ad-Blocker\u0647\u0627 \/ \u0627\u0641\u0632\u0648\u0646\u0647\u200c\u0647\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627 \u0631\u0627 \u0628\u0644\u0627\u06a9 \u0648 \u062e\u0637\u0627\u0647\u0627\u06cc \u0634\u0628\u06a9\u0647 \u0631\u0627 \u062a\u0642\u0644\u06cc\u062f \u06a9\u0646\u0646\u062f. \u062f\u0631 \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u062a\u0645\u06cc\u0632 Repro \u0628\u06af\u06cc\u0631\u06cc\u062f \u062a\u0627 \u062a\u0623\u06cc\u06cc\u062f \u0634\u0648\u062f.<\/li>\n\n\n\n<li>\u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u062e\u0644\u0648\u0637 (HTTP\u2190HTTPS) \u0648 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u0627\u0634\u062a\u0628\u0627\u0647 Service Worker \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u062e\u0631\u0627\u0628\u06cc\u200c\u0647\u0627\u06cc \u0628\u06cc\u200c\u0635\u062f\u0627 \u0645\u0646\u062c\u0631 \u0634\u0648\u0646\u062f. \u062a\u0628\u200c\u0647\u0627\u06cc Network \u0648 Application \u062f\u0631 DevTools \u0631\u0627 \u0686\u06a9 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u0645\u062b\u0627\u0644: \u0634\u06cc\u0621 \u062e\u0637\u0627\u06cc Axios \u062f\u0631 \u0639\u0645\u0644<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0627\u0644\u06af\u0648\u06cc \u0645\u06cc\u0646\u06cc\u0645\u0627\u0644 (Async\/Await + Try\/Catch):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import axios from 'axios';\n\ntry {\n  const res = await axios.get('\/users');\n  \/\/ \u0627\u0632 res.data \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\n} catch (err) {\n  if (err.response) {\n    console.error('Server error:', err.response.status);\n  } else if (err.request) {\n    console.error('Network error:', err.message);\n  } else {\n    console.error('Request setup error:', err.message);\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0627\u0644\u06af\u0648\u06cc \u067e\u0631\u0648\u062f\u0627\u06a9\u0634\u0646 (Hook\u0647\u0627 + Loading\/Error + \u0644\u063a\u0648):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useEffect, useState } from 'react';\nimport axios from 'axios';\n\nexport function useUsers() {\n  const &#91;data, setData] = useState(&#91;]);\n  const &#91;loading, setLoading] = useState(false);\n  const &#91;error, setError] = useState(null);\n\n  useEffect(() =&gt; {\n    const controller = new AbortController();\n    const run = async () =&gt; {\n      setLoading(true);\n      setError(null);\n      try {\n        const res = await axios.get('\/users', { signal: controller.signal });\n        setData(res.data);\n      } catch (err) {\n        if (axios.isCancel?.(err) || err.name === 'CanceledError') return;\n        if (err.response) {\n          const { status, statusText } = err.response;\n          setError(`Request failed (${status} ${statusText}). Please try again.`);\n        } else if (err.request) {\n          setError('Network error: no response from server.');\n        } else {\n          setError(`Request error: ${err.message}`);\n        }\n      } finally {\n        setLoading(false);\n      }\n    };\n    run();\n    return () =&gt; controller.abort();\n  }, &#91;]);\n\n  return { data, loading, error };\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062a\u0645\u0631\u06a9\u0632 \u0628\u0627 Instance Axios + Interceptor\u0647\u0627:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0632 Instance \u0645\u0634\u062a\u0631\u06a9 \u0628\u0631\u0627\u06cc \u0646\u0631\u0645\u0627\u0644 \u06a9\u0631\u062f\u0646 \u062e\u0637\u0627\u0647\u0627 \u0648 \u0627\u0644\u0635\u0627\u0642 \u0632\u0645\u06cc\u0646\u0647 (\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\u060c ID\u0647\u0627\u06cc \u0647\u0645\u0628\u0633\u062a\u06af\u06cc) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u06a9\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u062a\u0645\u06cc\u0632 \u0648 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627 \u0631\u0627 \u0633\u0627\u0632\u06af\u0627\u0631 \u0646\u06af\u0647 \u0645\u06cc\u200c\u062f\u0627\u0631\u062f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ api.js\nimport axios from 'axios';\nconst API = axios.create({ baseURL: '\/api', timeout: 10000 });\nexport default API;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ api.errors.js \u2014 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc UI \u0646\u0631\u0645\u0627\u0644 \u0648 \u062a\u0634\u062e\u06cc\u0635\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0644\u0627\u06af\u200c\u0647\u0627 \u0646\u06af\u0647 \u062f\u0627\u0631\nexport function normalizeAxiosError(err) {\n  if (err.response) {\n    const { status, statusText, data } = err.response;\n    const ui = status === 401\n      ? 'Please log in to continue.'\n      : status === 403\n      ? 'You do not have permission to perform this action.'\n      : status === 404\n      ? 'The requested resource was not found.'\n      : status &gt;= 500\n      ? 'The server is unavailable right now. Please try again.'\n      : `Request failed (${status} ${statusText}).`;\n    return { ui, diag: { status, statusText, data } };\n  }\n  if (err.request) return { ui: 'Network error: no response from server.', diag: { message: err.message } };\n  return { ui: `Request error: ${err.message}`, diag: { message: err.message } };\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ api.interceptors.js \u2014 \u0632\u0645\u06cc\u0646\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u061b \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u062e\u0637\u0627\u0647\u0627 \u0631\u0627 \u0627\u06cc\u0646\u200c\u062c\u0627 \u0646\u06af\u0627\u0634\u062a \u06a9\u0646\nimport API from '.\/api';\nimport { normalizeAxiosError } from '.\/api.errors';\n\nAPI.interceptors.request.use((config) =&gt; {\n  const token = localStorage.getItem('access_token');\n  if (token) config.headers.Authorization = `Bearer ${token}`;\n  config.headers&#91;'X-Request-ID'] = crypto.randomUUID?.() || Date.now().toString(36);\n  return config;\n});\n\nAPI.interceptors.response.use(\n  (res) =&gt; res,\n  (error) =&gt; {\n    \/\/ \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc \u0646\u0631\u0645\u0627\u0644\u200c\u0634\u062f\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0635\u0631\u0641\u200c\u06a9\u0646\u0646\u062f\u0647\u200c\u0647\u0627 \u0627\u0644\u0635\u0627\u0642 \u06a9\u0646\n    error.normalized = normalizeAxiosError(error);\n    \/\/ \u062a\u0644\u0647\u200c\u0645\u062a\u0631\u06cc \u067e\u0627\u06cc\u0647\n    console.warn('API error', {\n      url: error.config?.url,\n      method: error.config?.method,\n      ...error.normalized.diag,\n    });\n    return Promise.reject(error);\n  }\n);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u0645\u0635\u0631\u0641\u200c\u06a9\u0646\u0646\u062f\u0647 \u0646\u0645\u0648\u0646\u0647 (\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\/\u0633\u0631\u0648\u06cc\u0633)\nimport API from '.\/api';\nimport '.\/api.interceptors';\n\nasync function deleteUser(id, setError) {\n  try {\n    await API.delete(`\/users\/${id}`);\n  } catch (err) {\n    setError(err.normalized?.ui ?? 'Something went wrong.');\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u0631\u0627\u0647\u0646\u0645\u0627\u0647\u0627\u06cc UX (\u062e\u0648\u0627\u0646\u0646\u062f\u0647-\u0627\u0648\u0644)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0645\u062a\u0646 \u0622\u06af\u0627\u0647-\u0627\u0632-\u0648\u0636\u0639\u06cc\u062a:<\/strong> 401 \u2190 \u00ab\u0644\u0637\u0641\u0627\u064b \u0648\u0627\u0631\u062f \u0634\u0648\u06cc\u062f\u00bb\u060c 403 \u2190 \u00ab\u0628\u062f\u0648\u0646 \u0645\u062c\u0648\u0632\u00bb\u060c 404 \u2190 \u00ab\u067e\u06cc\u062f\u0627 \u0646\u0634\u062f\u00bb\u060c 5xx \u2190 \u00ab\u0628\u0647\u200c\u0632\u0648\u062f\u06cc \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f\u00bb. \u0627\u0632 \u0627\u0641\u0634\u0627\u06cc \u062c\u0632\u0626\u06cc\u0627\u062a \u062f\u0627\u062e\u0644\u06cc \u062f\u0631 UI \u0628\u067e\u0631\u0647\u06cc\u0632\u06cc\u062f.<\/li>\n\n\n\n<li><strong>\u0647\u0634\u062f\u0627\u0631\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633:<\/strong> \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc role (role=&#8221;alert&#8221;) \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc \u062e\u0637\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u061b \u067e\u06cc\u0627\u0645\u200c\u0647\u0627 \u0631\u0627 \u0645\u062e\u062a\u0635\u0631 \u0648 \u0642\u0627\u0628\u0644-\u0627\u0642\u062f\u0627\u0645 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f.<\/li>\n\n\n\n<li><strong>Retry\u0647\u0627:<\/strong> \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc GET\/PUT\u0647\u0627\u06cc idempotent \u0648 \u062e\u0637\u0627\u0647\u0627\u06cc \u06af\u0630\u0631\u0627\/\u0634\u0628\u06a9\u0647\/5xx. \u0627\u0632 Backoff \u0646\u0645\u0627\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u062a\u0644\u0627\u0634\u200c\u0647\u0627 \u0631\u0627 \u0645\u062d\u062f\u0648\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n\n\n\n<li><strong>\u0644\u063a\u0648:<\/strong> \u0647\u0645\u06cc\u0634\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc \u062f\u0631-\u062c\u0631\u06cc\u0627\u0646 \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 Unmount \u0644\u063a\u0648 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u0632 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0648\u0636\u0639\u06cc\u062a \u0628\u0639\u062f \u0627\u0632 Unmount \u0648 \u067e\u0647\u0646\u0627\u06cc \u0628\u0627\u0646\u062f \u0647\u062f\u0631\u0631\u0641\u062a\u0647 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0634\u0648\u062f.<\/li>\n\n\n\n<li><strong>\u0642\u0627\u0628\u0644\u06cc\u062a \u0645\u0634\u0627\u0647\u062f\u0647:<\/strong> \u0648\u0636\u0639\u06cc\u062a\u060c statusText\u060c ID \u0647\u0645\u0628\u0633\u062a\u06af\u06cc \u0648 \u0632\u0645\u06cc\u0646\u0647 Payload \u0645\u06cc\u0646\u06cc\u0645\u0627\u0644 \u0631\u0627 \u0644\u0627\u06af \u06a9\u0646\u06cc\u062f\u061b \u0627\u0632 PII \u062f\u0631 \u0644\u0627\u06af\u200c\u0647\u0627 \u0628\u067e\u0631\u0647\u06cc\u0632\u06cc\u062f.<\/li>\n\n\n\n<li><strong>\u0627\u0645\u0646\u06cc\u062a:<\/strong> \u0647\u0631\u06af\u0632 Token\u0647\u0627 \u06cc\u0627 Stack Trace\u0647\u0627 \u0631\u0627 \u062f\u0631 UI \u0627\u0641\u0634\u0627 \u0646\u06a9\u0646\u06cc\u062f\u061b \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a\u200c\u0647\u0627\u06cc \u062d\u0633\u0627\u0633 Proxy \u0628\u06a9\u200c\u0627\u0646\u062f \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u06cc\u062f.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u0645\u0631\u062c\u0639 \u0633\u0631\u06cc\u0639: \u0646\u06af\u0627\u0634\u062a \u0648\u0636\u0639\u06cc\u062a \u2190 \u067e\u06cc\u0627\u0645<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u06a9\u0644\u0627\u0633 \u0648\u0636\u0639\u06cc\u062a<\/th><th>\u0645\u0639\u0646\u0627\u06cc \u0645\u0639\u0645\u0648\u0644<\/th><th>\u067e\u06cc\u0627\u0645 UI \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u06cc<\/th><\/tr><\/thead><tbody><tr><td>4xx<\/td><td>\u062e\u0637\u0627\u0647\u0627\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a\/\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<\/td><td>\u0627\u0639\u062a\u0628\u0627\u0631\u0646\u0627\u0645\u0647\/\u0645\u062c\u0648\u0632\u0647\u0627 \u0631\u0627 \u0686\u06a9 \u06a9\u0646\u06cc\u062f\u061b \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u062a\u0627\u0646 \u0631\u0627 \u0628\u0627\u0632\u0628\u06cc\u0646\u06cc \u06a9\u0646\u06cc\u062f.<\/td><\/tr><tr><td>401<\/td><td>\u0627\u062d\u0631\u0627\u0632-\u0646\u0634\u062f\u0647<\/td><td>\u0644\u0637\u0641\u0627\u064b \u0628\u0631\u0627\u06cc \u0627\u062f\u0627\u0645\u0647 \u0648\u0627\u0631\u062f \u0634\u0648\u06cc\u062f.<\/td><\/tr><tr><td>403<\/td><td>\u063a\u06cc\u0631\u0645\u062c\u0627\u0632\/\u0645\u0645\u0646\u0648\u0639<\/td><td>\u0634\u0645\u0627 \u0645\u062c\u0648\u0632 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u0627\u0642\u062f\u0627\u0645 \u0631\u0627 \u0646\u062f\u0627\u0631\u06cc\u062f.<\/td><\/tr><tr><td>404<\/td><td>\u0645\u0646\u0628\u0639 \u067e\u06cc\u062f\u0627 \u0646\u0634\u062f<\/td><td>\u0645\u0646\u0628\u0639 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc \u067e\u06cc\u062f\u0627 \u0646\u0634\u062f.<\/td><\/tr><tr><td>408\/429<\/td><td>\u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a \/ \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0646\u0631\u062e<\/td><td>\u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f \u06cc\u0627 \u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a\u061b \u0628\u0639\u062f\u0627\u064b \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f.<\/td><\/tr><tr><td>5xx<\/td><td>\u0633\u0631\u0648\u0631\/\u0642\u0637\u0639\u06cc \u0645\u0648\u0642\u062a<\/td><td>\u0633\u0631\u0648\u0631 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0646\u06cc\u0633\u062a. \u0644\u0637\u0641\u0627\u064b \u0628\u0647\u200c\u0632\u0648\u062f\u06cc \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u0646\u06a9\u0627\u062a TypeScript \u2014 \u062e\u0637\u0627\u0647\u0627\u06cc Axios \u0628\u0627 \u062a\u0627\u06cc\u067e \u0642\u0648\u06cc<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u062e\u0637\u0627\u0647\u0627 \u0631\u0627 \u0627\u0645\u0646 \u0645\u062d\u062f\u0648\u062f \u06a9\u0646\u06cc\u062f:<\/strong> \u062f\u0631 <code>catch (err: unknown)<\/code>\u060c \u0627\u0632 <code>axios.isAxiosError&lt;ApiError>(err)<\/code> \u0628\u0631\u0627\u06cc Guard \u0642\u0628\u0644 \u0627\u0632 \u062e\u0648\u0627\u0646\u062f\u0646 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u062e\u0627\u0635 Axios \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n\n\n\n<li><strong>\u067e\u0627\u0633\u062e\u200c\u0647\u0627\u06cc\u062a\u0627\u0646 \u0631\u0627 \u062a\u0627\u06cc\u067e \u06a9\u0646\u06cc\u062f:<\/strong> <code>axios.get&lt;User[]>('\/users')<\/code> \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u06cc\u062f \u062a\u0627 res.data \u062f\u0631\u0633\u062a \u062a\u0627\u06cc\u067e \u0634\u0648\u062f.<\/li>\n\n\n\n<li><strong>Payload\u0647\u0627\u06cc \u062e\u0637\u0627\u06cc API \u0631\u0627 \u0645\u062f\u0644 \u06a9\u0646\u06cc\u062f:<\/strong> \u0627\u06cc\u0646\u062a\u0631\u0641\u06cc\u06cc\u0633 ApiError \u0628\u0633\u0627\u0632\u06cc\u062f \u062a\u0627 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0631\u0627 \u0628\u062f\u0648\u0646 any \u0627\u0641\u0634\u0627 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import axios, { AxiosError } from 'axios';\n\ninterface User { id: number; name: string }\ninterface ApiError { message: string; code?: string }\n\nasync function loadUsers() {\n  try {\n    const res = await axios.get&lt;User&#91;]&gt;('\/users');\n    return res.data; \/\/ \u062a\u0627\u06cc\u067e\u200c\u0634\u062f\u0647: User&#91;]\n  } catch (err: unknown) {\n    if (axios.isAxiosError&lt;ApiError&gt;(err)) {\n      const status = err.response?.status;\n      const serverMsg = err.response?.data?.message;\n      \/\/ \u067e\u06cc\u0627\u0645 UI \u062f\u0648\u0633\u062a\u0627\u0646\u0647 \u0627\u0631\u0627\u0626\u0647 \u06a9\u0646\u061b \u062a\u0634\u062e\u06cc\u0635\u200c\u0647\u0627 \u0631\u0627 \u0644\u0627\u06af \u06a9\u0646\n      throw new Error(serverMsg ?? `Request failed${status ? ` (${status})` : ''}`);\n    }\n    \/\/ \u062e\u0637\u0627\u06cc \u063a\u06cc\u0631-Axios\/\u0632\u0645\u0627\u0646-\u0627\u062c\u0631\u0627 \u2014 \u0628\u0631\u0627\u06cc error boundary\/\u062a\u0644\u0647\u200c\u0645\u062a\u0631\u06cc \u062f\u0648\u0628\u0627\u0631\u0647 \u067e\u0631\u062a\u0627\u0628 \u06a9\u0646\n    throw err;\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062e\u0644\u0627\u0635\u0647:<\/strong> \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc Axios \u0631\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0645\u062a\u0645\u0631\u06a9\u0632\u060c \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u067e\u0633\u0646\u062f \u0627\u0631\u0627\u0626\u0647 \u0648 \u062c\u0632\u0626\u06cc\u0627\u062a \u062a\u0634\u062e\u06cc\u0635\u06cc \u0631\u0627 \u062f\u0631 \u0644\u0627\u06af\u200c\u0647\u0627 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f. \u0627\u06cc\u0646 \u0628\u06cc\u0646 \u0633\u0631\u0639\u062a \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0648 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0642\u0627\u0628\u0644 \u0627\u0639\u062a\u0645\u0627\u062f \u062a\u0639\u0627\u062f\u0644 \u0628\u0631\u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Axios \u062f\u0631 React<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Axios \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 React Query: \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0627\u0632 \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 Axios \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc HTTP \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c React Query (\u0627\u0644\u0627\u0646 TanStack Query) Fetch \u06a9\u0631\u062f\u0646 \u062f\u0627\u062f\u0647\u060c \u06a9\u0634 \u0648 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u067e\u200c\u0647\u0627\u06cc React \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0646\u062a\u0632\u0627\u0639 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Axios:<\/strong> \u0628\u0631\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc API \u0645\u0633\u062a\u0642\u06cc\u0645 \u0648 \u06cc\u06a9\u200c\u0628\u0627\u0631\u0647\u060c \u062a\u0646\u0638\u06cc\u0645 \u0647\u062f\u0631\u0647\u0627 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0646\u0637\u0642 \u0633\u0637\u062d-\u067e\u0627\u06cc\u06cc\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\/\u067e\u0627\u0633\u062e \u0639\u0627\u0644\u06cc.<\/li>\n\n\n\n<li><strong>React Query:<\/strong> \u0648\u0642\u062a\u06cc \u06a9\u0634\u060c Refetch \u062e\u0648\u062f\u06a9\u0627\u0631 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a Query (Loading\u060c Error\u060c Success) \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u06cc\u062f \u0627\u06cc\u062f\u0647\u200c\u0622\u0644.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634:<\/strong> Axios \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 Fetcher \u062f\u0631\u0648\u0646 React Query \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0627\u06af\u0631 \u0647\u0645 \u0642\u062f\u0631\u062a Interceptor\u0647\u0627\u06cc Axios \u0648 \u0647\u0645 \u0642\u062f\u0631\u062a \u0644\u0627\u06cc\u0647-\u062f\u0627\u062f\u0647 React Query \u0631\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0645\u062b\u0627\u0644 \u2014 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Axios \u0628\u0627 React Query<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import axios from \"axios\";\nimport { useQuery } from \"@tanstack\/react-query\";\n\nconst fetchUsers = async () =&gt; {\n  const { data } = await axios.get(\"\/api\/users\");\n  return data;\n};\n\nfunction UserList() {\n  const { data, error, isLoading } = useQuery(&#91;\"users\"], fetchUsers);\n\n  if (isLoading) return &lt;p&gt;Loading...&lt;\/p&gt;;\n  if (error) return &lt;p&gt;Error: {error.message}&lt;\/p&gt;;\n\n  return (\n    &lt;ul&gt;\n      {data.map((user) =&gt; (\n        &lt;li key={user.id}&gt;{user.name}&lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u0628\u0647\u062a\u0631\u06cc\u0646\u0650 \u0647\u0631 \u062f\u0648 \u062f\u0646\u06cc\u0627 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f: \u0642\u062f\u0631\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a Axios \u0648 \u06a9\u0634 + Reactivity \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 React Query.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc React \u0645\u0642\u06cc\u0627\u0633\u200c\u067e\u0630\u06cc\u0631\u060c \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648 \u0627\u0645\u0646\u060c \u0647\u0646\u06af\u0627\u0645 \u06a9\u0627\u0631 \u0628\u0627 Axios \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627 \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u06f1. \u0627\u0632 Interceptor\u0647\u0627\u06cc Axios \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0648 \u062a\u0644\u0647\u200c\u0645\u062a\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Interceptor\u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0627\u0644\u0635\u0627\u0642 Token\u0647\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a (\u0645\u062b\u0644\u0627\u064b JWT \u06cc\u0627 OAuth2) \u0648 ID\u0647\u0627\u06cc \u0647\u0645\u0628\u0633\u062a\u06af\u06cc \u0628\u0647 \u0647\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f. \u0647\u0645\u200c\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u067e\u0627\u0633\u062e\u200c\u0647\u0627 \u0631\u0627 \u0644\u0627\u06af \u06cc\u0627 \u062e\u0637\u0627\u0647\u0627 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u06a9\u0627\u0646 \u0646\u0631\u0645\u0627\u0644 \u06a9\u0646\u06cc\u062f\u061b \u06a9\u0647 \u0631\u0641\u062a\u0627\u0631 \u0633\u0627\u0632\u06af\u0627\u0631 \u062f\u0631 \u06a9\u0644 \u0627\u067e \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u06f2. Hook\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f (\u0645\u062b\u0644\u0627\u064b useAxios) \u0628\u0631\u0627\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0645\u0646\u0637\u0642 Axios \u0631\u0627 \u062f\u0631 Hook\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u067e\u0633\u0648\u0644\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc\u200c\u062a\u0627\u0646 \u0633\u0627\u062f\u0647 \u0634\u0648\u0646\u062f. Hook\u0650 useAxios \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0648\u0636\u0639\u06cc\u062a\u200c\u0647\u0627\u06cc Loading\u060c Error \u0648 Retry \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u0647\u0645\u200c\u0632\u0645\u0627\u0646 \u062f\u0627\u062f\u0647 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0645\u06cc\u0632\u062a\u0631 \u0631\u0627 \u062a\u0631\u0648\u06cc\u062c \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0645\u0646\u0637\u0642 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u06f3. \u0645\u0646\u0637\u0642 API \u0631\u0627 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u062c\u062f\u0627 \u06a9\u0646\u06cc\u062f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React \u062e\u0648\u062f\u062a\u0627\u0646 \u0631\u0627 \u0631\u0648\u06cc UI \u0645\u062a\u0645\u0631\u06a9\u0632 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f. \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc Axios \u0631\u0627 \u062f\u0631 \u0645\u0627\u0698\u0648\u0644\u200c\u0647\u0627\u06cc API \u0627\u062e\u062a\u0635\u0627\u0635\u06cc (\u0645\u062b\u0644\u0627\u064b api.js) \u06cc\u0627 Hook\u0647\u0627 \u0642\u0631\u0627\u0631 \u0628\u062f\u0647\u06cc\u062f\u061b \u0633\u067e\u0633 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc\u200c\u062a\u0627\u0646 Import \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u062a\u0633\u062a \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0648 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc\u200c\u0647\u0627\u06cc API \u0631\u0627 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u06f4. Axios \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 Fetch \u2014 \u0645\u0631\u062c\u0639 \u0633\u0631\u06cc\u0639 \u0648 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0639\u0645\u06cc\u0642<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0647\u0646\u06af\u0627\u0645 \u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u06cc\u0646 Axios \u0648 API \u0628\u0648\u0645\u06cc Fetch \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc HTTP \u062f\u0631 React (\u06cc\u0627 \u0647\u0631 \u067e\u0631\u0648\u0698\u0647 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u06cc\u06af\u0631\u06cc)\u060c \u0645\u0647\u0645 \u0627\u0633\u062a \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u060c \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648 \u062a\u062c\u0631\u0628\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Axios<\/strong> \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0634\u062e\u0635 \u062b\u0627\u0644\u062b \u0645\u062d\u0628\u0648\u0628\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc HTTP \u0631\u0627 \u0628\u0627 \u0633\u06cc\u0646\u062a\u06a9\u0633 \u0645\u062e\u062a\u0635\u0631\u060c \u067e\u0627\u0631\u0633 \u062e\u0648\u062f\u06a9\u0627\u0631 JSON \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0645\u062b\u0644 Interceptor\u0647\u0627\u060c \u0644\u063a\u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u0645\u0642\u0627\u0648\u0645 \u0633\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. <strong>Fetch<\/strong> API \u0645\u062f\u0631\u0646 \u0648 \u062f\u0627\u062e\u0644\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0631\u0627\u0628\u0637 \u0633\u0637\u062d-\u067e\u0627\u06cc\u06cc\u0646\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc HTTP \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u0627\u0645\u0627 \u0628\u0631\u0627\u06cc \u0648\u0638\u0627\u06cc\u0641 \u0631\u0627\u06cc\u062c \u06a9\u0627\u0631 \u062f\u0633\u062a\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0627\u0632 Axios \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u06cc\u0627 \u062f\u0631-\u0633\u0637\u062d-\u0633\u0627\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f:\n<ul class=\"wp-block-list\">\n<li>\u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u0633\u0627\u0632\u06af\u0627\u0631 \u062f\u0631 \u06a9\u0644 \u0627\u067e<\/li>\n\n\n\n<li>\u067e\u0627\u0631\u0633 \u0648 \u062a\u0628\u062f\u06cc\u0644 \u062e\u0648\u062f\u06a9\u0627\u0631 JSON<\/li>\n\n\n\n<li>Interceptor\u0647\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\/\u067e\u0627\u0633\u062e \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\u060c \u0644\u0627\u06af\u06cc\u0646\u06af \u06cc\u0627 \u062a\u0644\u0647\u200c\u0645\u062a\u0631\u06cc<\/li>\n\n\n\n<li>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u062f\u0627\u062e\u0644\u06cc \u0627\u0632 \u0644\u063a\u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a (\u0628\u0627 AbortController)<\/li>\n\n\n\n<li>\u0633\u06cc\u0646\u062a\u06a9\u0633 \u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u0628\u0631\u0627\u06cc \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0627\u06cc\u062c (\u0645\u062b\u0644\u0627\u064b POST \u06a9\u0631\u062f\u0646 JSON\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a\u200c\u0647\u0627)<\/li>\n\n\n\n<li>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0642\u062f\u06cc\u0645\u06cc\u200c\u062a\u0631 (\u0628\u0627 Polyfill\u0647\u0627)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0627\u0632 Fetch \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631\u060c Prototype\u0647\u0627\u06cc \u0633\u0631\u06cc\u0639 \u06cc\u0627 \u0648\u0642\u062a\u06cc \u062d\u062c\u0645 Bundle \u062d\u06cc\u0627\u062a\u06cc \u0627\u0633\u062a<\/li>\n\n\n\n<li>\u0648\u0642\u062a\u06cc \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u0632 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u200c\u0647\u0627\u06cc \u062e\u0627\u0631\u062c\u06cc \u0627\u062c\u062a\u0646\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/li>\n\n\n\n<li>\u0627\u06af\u0631 \u0641\u0642\u0637 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc GET\/POST \u067e\u0627\u06cc\u0647 \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u06cc\u062f \u0648 \u0628\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0633\u062a\u06cc JSON \u0648 \u062e\u0637\u0627\u0647\u0627 \u0631\u0627\u062d\u062a \u0647\u0633\u062a\u06cc\u062f<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u06f5. \u062c\u062f\u0648\u0644 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0648\u06cc\u0698\u06af\u06cc-\u0628\u0647-\u0648\u06cc\u0698\u06af\u06cc<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u0648\u06cc\u0698\u06af\u06cc<\/th><th>Axios<\/th><th>API \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 Fetch<\/th><\/tr><\/thead><tbody><tr><td>\u0633\u06cc\u0646\u062a\u06a9\u0633<\/td><td>\u062a\u0645\u06cc\u0632\u062a\u0631\u060c \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Promise \u0628\u0627 Boilerplate \u06a9\u0645\u062a\u0631<\/td><td>\u067e\u0631\u062d\u0631\u0641\u200c\u062a\u0631\u060c \u067e\u0627\u0631\u0633 \u062f\u0633\u062a\u06cc JSON \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u062f<\/td><\/tr><tr><td>\u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627<\/td><td>\u067e\u0631\u062a\u0627\u0628 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0631\u0648\u06cc \u067e\u0627\u0633\u062e\u200c\u0647\u0627\u06cc \u063a\u06cc\u0631-2xx<\/td><td>\u0628\u0627\u06cc\u062f response.ok \u0631\u0627 \u062f\u0633\u062a\u06cc \u0686\u06a9 \u06a9\u0646\u06cc\u062f<\/td><\/tr><tr><td>Interceptor\u0647\u0627<\/td><td>Interceptor\u0647\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\/\u067e\u0627\u0633\u062e \u062f\u0627\u062e\u0644\u06cc<\/td><td>\u0645\u0648\u062c\u0648\u062f \u0646\u06cc\u0633\u062a\u060c Wrapper\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u062f<\/td><\/tr><tr><td>\u0645\u062f\u06cc\u0631\u06cc\u062a JSON<\/td><td>JSON \u0631\u0627 \u062e\u0648\u062f\u06a9\u0627\u0631 \u067e\u0627\u0631\u0633 \u0645\u06cc\u200c\u06a9\u0646\u062f<\/td><td>res.json() \u0635\u0631\u06cc\u062d \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u062f<\/td><\/tr><tr><td>\u0644\u063a\u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a<\/td><td>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u062f\u0627\u062e\u0644\u06cc (AbortController \u0648 Cancel Token\u0647\u0627)<\/td><td>\u0641\u0642\u0637 AbortController\u060c \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc \u062f\u0633\u062a\u06cc<\/td><\/tr><tr><td>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u062a\u0627\u06cc\u0645\u200c\u0627\u0648\u062a<\/td><td>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u06cc\u062a\u06cc\u0648 \u0627\u0632 \u0637\u0631\u06cc\u0642 config<\/td><td>\u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u062f\u0633\u062a\u06cc \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u062f<\/td><\/tr><tr><td>\u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a<\/td><td>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc\u200c\u0634\u062f\u0647 (\u0645\u0631\u0648\u0631\u06af\u0631\u060c Node)<\/td><td>\u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0646\u06cc\u062a\u06cc\u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc\u200c\u0634\u0648\u062f<\/td><\/tr><tr><td>\u0622\u067e\u0644\u0648\u062f\/\u062f\u0627\u0646\u0644\u0648\u062f<\/td><td>\u0628\u0627 Axios \u0622\u0633\u0627\u0646\u200c\u062a\u0631<\/td><td>\u0628\u0627 Fetch \u062f\u0633\u062a\u06cc\u200c\u062a\u0631<\/td><\/tr><tr><td>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u0631\u0648\u0631\u06af\u0631<\/td><td>\u062f\u0631 \u0647\u0645\u0647 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f (\u0628\u0627 Polyfill)<\/td><td>\u0641\u0642\u0637 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u0646\u06a9\u062a\u0647:<\/strong> \u0628\u0631\u0627\u06cc \u0627\u067e\u200c\u0647\u0627\u06cc \u062f\u0631-\u0633\u0637\u062d-\u0633\u0627\u0632\u0645\u0627\u0646\u06cc\u060c Axios \u0628\u0627 Interceptor\u0647\u0627 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627 \u0632\u0645\u0627\u0646\u0650 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u067e\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u06cc\u0627 \u0648\u0642\u062a\u06cc \u062d\u062c\u0645 Bundle \u0645\u0647\u0645 \u0627\u0633\u062a\u060c Fetch \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u06a9\u0627\u0641\u06cc \u0628\u0627\u0634\u062f.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">\u06f6. Hook \u0633\u0641\u0627\u0631\u0634\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f: useAxios (\u0628\u0627 Instance \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 API)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0646\u0637\u0642 Axios \u0631\u0627 \u062f\u0631 Hook \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u067e\u0633\u0648\u0644\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ src\/hooks\/useAxios.js\nimport { useEffect, useState } from 'react';\nimport API from '..\/api';\n\nexport function useAxios(url, options = {}) {\n  const &#91;data, setData] = useState(null);\n  const &#91;loading, setLoading] = useState(true);\n  const &#91;error, setError] = useState(null);\n\n  useEffect(() =&gt; {\n    const controller = new AbortController();\n    const fetchData = async () =&gt; {\n      setLoading(true);\n      setError(null);\n      try {\n        const res = await API.get(url, { ...options, signal: controller.signal });\n        setData(res.data);\n      } catch (err) {\n        if (axios.isCancel?.(err)) return;\n        setError(err);\n      } finally {\n        setLoading(false);\n      }\n    };\n    fetchData();\n    return () =&gt; controller.abort();\n  }, &#91;url]);\n\n  return { data, loading, error };\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u067e<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc API \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0627\u0635\u0644\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0627\u067e React \u0639\u0645\u0644\u06cc \u0648 \u062a\u0639\u0627\u0645\u0644\u06cc \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a. \u062f\u0631 \u067e\u0627\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f \u0686\u0637\u0648\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc PersonList\u060c PersonAdd \u0648 PersonRemove \u0631\u0627 \u062f\u0631 App.js \u0628\u0631\u0627\u06cc \u0647\u0631 \u062f\u0648 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u06a9\u0644\u0627\u0633 \u0648 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Hook \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633\u06cc: PersonList\u060c PersonAdd \u0648 PersonRemove<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c \u0647\u0631 \u0633\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u06a9\u0644\u0627\u0633 \u0631\u0627 Import \u0648 \u062f\u0631 App.js \u062e\u0648\u062f\u062a\u0627\u0646 \u0631\u0646\u062f\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0627\u0641\u0632\u0648\u062f\u0646 \u0634\u062e\u0635\u060c \u062f\u06cc\u062f\u0646 \u0641\u0647\u0631\u0633\u062a \u0648 \u062d\u0630\u0641 \u0634\u062e\u0635 \u0631\u0627\u2014\u0647\u0645\u0647 \u062f\u0631 \u06cc\u06a9 \u0645\u06a9\u0627\u0646\u2014\u0645\u06cc\u200c\u062f\u0647\u062f. \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u062f\u0631 \u062f\u0627\u0634\u0628\u0648\u0631\u062f\u0647\u0627 \u0648 \u067e\u0646\u0644\u200c\u0647\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a\u06cc \u0631\u0627\u06cc\u062c \u0627\u0633\u062a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ src\/App.js\nimport PersonList from '.\/components\/PersonList';\nimport PersonAdd from '.\/components\/PersonAdd';\nimport PersonRemove from '.\/components\/PersonRemove';\n\nfunction App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;h2&gt;Add a Person&lt;\/h2&gt;\n      &lt;PersonAdd \/&gt;\n      &lt;h2&gt;People List&lt;\/h2&gt;\n      &lt;PersonList \/&gt;\n      &lt;h2&gt;Remove a Person&lt;\/h2&gt;\n      &lt;PersonRemove \/&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0686\u0631\u0627 \u0627\u06cc\u0646 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc\u061f<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u062a\u0631\u06a9\u06cc\u0628 \u0639\u0645\u0644\u06cc\u0627\u062a \u0633\u0627\u062e\u062a\u060c \u062e\u0648\u0627\u0646\u062f\u0646 \u0648 \u062d\u0630\u0641 \u062f\u0631 \u0646\u0645\u0627\u06cc \u0645\u0646\u0641\u0631\u062f \u0627\u067e\u060c \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 API \u0628\u0647 \u0634\u06cc\u0648\u0647\u200c\u0627\u06cc \u0645\u0646\u0633\u062c\u0645 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0647\u0645\u200c\u0686\u0646\u06cc\u0646 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u0648 \u062f\u06cc\u062f\u0646 \u0627\u062b\u0631\u0627\u062a \u0647\u0631 \u0627\u0642\u062f\u0627\u0645 \u062f\u0631 \u0628\u0627\u0641\u062a \u0631\u0627 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc \u0628\u0627 Hook\u0647\u0627: PersonListHooks\u060c PersonAddHooks \u0648 PersonRemoveHooks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0631\u0627\u06cc \u0627\u067e\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646\u060c \u0646\u0633\u062e\u0647\u200c\u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Hook \u0631\u0627 \u0628\u0627 \u0647\u0645 \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ src\/App.js\nimport PersonListHooks from '.\/components\/PersonListHooks';\nimport PersonAddHooks from '.\/components\/PersonAddHooks';\nimport PersonRemoveHooks from '.\/components\/PersonRemoveHooks';\n\nfunction App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;h2&gt;Add a Person&lt;\/h2&gt;\n      &lt;PersonAddHooks \/&gt;\n      &lt;h2&gt;People List&lt;\/h2&gt;\n      &lt;PersonListHooks \/&gt;\n      &lt;h2&gt;Remove a Person&lt;\/h2&gt;\n      &lt;PersonRemoveHooks \/&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u0646\u062a\u06cc\u062c\u0647\u200c\u06af\u06cc\u0631\u06cc<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Axios \u0628\u0627 React \u0631\u0627 \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u06cc\u062f\u2014\u0627\u0632 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc GET \u0648 POST \u0648 DELETE \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u0633\u0627\u062e\u062a Instance \u0645\u0634\u062a\u0631\u06a9 \u0628\u0627 Interceptor\u0647\u0627\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u0645\u0642\u0627\u0648\u0645 \u0648 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0645\u062b\u0644 React Query. \u0628\u0627 \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc React \u0645\u0642\u06cc\u0627\u0633\u200c\u067e\u0630\u06cc\u0631\u060c \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648 \u0627\u0645\u0646 \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0627\u062f\u0647 \u062f\u0631 \u0622\u0646\u200c\u0647\u0627 \u062a\u0645\u06cc\u0632 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f \u0627\u0633\u062a.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0642\u062f\u0645\u0647 Axios \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc API \u062f\u0631 React \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u0648 \u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 API \u0628\u0648\u0645\u06cc Fetch\u060c \u0633\u06cc\u0646\u062a\u06a9\u0633 \u0628\u0647\u062a\u0631\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0648 Interceptor\u0647\u0627\u06cc\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0627\u06cc\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0645\u062d\u0628\u0648\u0628 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 Fetch \u06a9\u0631\u062f\u0646 \u062f\u0627\u062f\u0647 \u0628\u0627 Axios \u062f\u0631 React \u0647\u0633\u062a\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 Axios \u062f\u0631 React\u060c \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc \u0627\u0632 &hellip;<\/p>\n","protected":false},"author":9,"featured_media":7047,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[190,2183],"tags":[],"class_list":["post-7046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","category-2183"],"_links":{"self":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/7046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/comments?post=7046"}],"version-history":[{"count":1,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/7046\/revisions"}],"predecessor-version":[{"id":7048,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/7046\/revisions\/7048"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media\/7047"}],"wp:attachment":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media?parent=7046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/categories?post=7046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/tags?post=7046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}