{"id":10840,"date":"2026-09-24T09:00:00","date_gmt":"2026-09-24T09:00:00","guid":{"rendered":"https:\/\/otus.ru\/journal\/?p=10840"},"modified":"2026-09-25T15:24:20","modified_gmt":"2026-09-25T15:24:20","slug":"json-i-ajax-asinhronnye-zaprosy","status":"publish","type":"post","link":"https:\/\/otus.ru\/journal\/json-i-ajax-asinhronnye-zaprosy\/","title":{"rendered":"\u0410\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 JavaScript: JSON \u0438 AJAX \u0447\u0435\u0440\u0435\u0437 fetch"},"content":{"rendered":"

\u0410\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441<\/strong> — \u044d\u0442\u043e HTTP-\u0437\u0430\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442, \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443: \u043a\u043e\u0434 \u0438\u0434\u0435\u0442 \u0434\u0430\u043b\u044c\u0448\u0435, \u0430 \u043e\u0442\u0432\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0434\u0435\u0442. \u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d AJAX<\/strong> — \u043f\u043e\u0434\u0445\u043e\u0434, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0447\u0430\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0435\u0437 \u043f\u043e\u043b\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0414\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON<\/strong>, \u0430 \u0441\u0430\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c JavaScript \u0434\u0435\u043b\u0430\u044e\u0442 \u0447\u0435\u0440\u0435\u0437 fetch<\/code> \u0438 async\/await<\/code>.<\/p>\n

\n

\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/strong><\/p>\n

    \n
  1. \u0427\u0435\u0442\u044b\u0440\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0443\u0442\u0430\u044e\u0442<\/a><\/li>\n
  2. \u0421\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e: \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/a><\/li>\n
  3. \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440: GET \u0438 POST \u0441 JSON<\/a><\/li>\n
  4. \u0420\u0430\u0437\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 requestJSON<\/a><\/li>\n
  5. \u041e\u0448\u0438\u0431\u043a\u0430 1: fetch \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 404 \u0438 500 \u043e\u0448\u0438\u0431\u043a\u043e\u0439<\/a><\/li>\n
  6. \u041e\u0448\u0438\u0431\u043a\u0430 2: \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u0431\u0435\u0437 JSON.stringify<\/a><\/li>\n
  7. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432: \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043b\u0438 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e<\/a><\/li>\n
  8. \u041a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/a><\/li>\n
  9. fetch, XMLHttpRequest \u0438 jQuery.ajax<\/a><\/li>\n
  10. JSON: \u0447\u0442\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435<\/a><\/li>\n
  11. \u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/a><\/li>\n
  12. \u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/a><\/li>\n
  13. \u0412\u044b\u0432\u043e\u0434\u044b<\/a><\/li>\n
  14. \u0413\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \/ \u0441\u0432\u044f\u0437\u044c \u0441 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439<\/a><\/li>\n
  15. FAQ<\/a><\/li>\n<\/ol>\n<\/div>\n

    \u041d\u0438\u0436\u0435 — \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 GET \u0438 POST \u0441 JSON, \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043e\u0442\u0432\u0435\u0442\u0430, \u0442\u0430\u0439\u043c\u0430\u0443\u0442 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043f\u043e\u0442\u044b\u043a\u0430\u044e\u0442\u0441\u044f \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e. \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u044b \u0432 Node.js 24 (24.21.0); \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u043a\u043b\u0438\u0435\u043d\u0442 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n

    \u0427\u0435\u0442\u044b\u0440\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0443\u0442\u0430\u044e\u0442<\/h2>\n\n\n\n\n\n\n\n\n
    \u0422\u0435\u0440\u043c\u0438\u043d<\/th>\n\u0427\u0442\u043e \u044d\u0442\u043e<\/th>\n\u041f\u0440\u0438\u043c\u0435\u0440<\/th>\n<\/tr>\n<\/thead>\n
    \u0410\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441<\/td>\n\u0421\u043f\u043e\u0441\u043e\u0431 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f: \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u0434<\/td>\n\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043d\u0430 \u043a\u043b\u0438\u043a\u0438, \u043f\u043e\u043a\u0430 \u0436\u0434\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440<\/td>\n<\/tr>\n
    AJAX<\/td>\n\u041f\u043e\u0434\u0445\u043e\u0434: \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/td>\n\u041f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432, \u043f\u043e\u0438\u0441\u043a \u0441 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430\u043c\u0438<\/td>\n<\/tr>\n
    JSON<\/td>\n\u0422\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u0430\u043d\u043d\u044b\u0445<\/td>\n{\"id\": 1, \"title\": \"JavaScript\"}<\/code><\/td>\n<\/tr>\n
    fetch, XMLHttpRequest<\/td>\n\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0434\u043b\u044f HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/td>\nfetch('\/api\/courses')<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u0411\u0443\u043a\u0432\u0430 X \u0432 AJAX \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 XML, \u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u0442\u0432\u0435\u0442 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0432 JSON. AJAX — \u043d\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438 \u043d\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u0435\u043c\u0430.<\/p>\n

    \u0421\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e: \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/h2>\n

    \u041f\u0440\u0438 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0444\u043e\u0440\u043c\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0443\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0446\u0435\u043b\u0438\u043a\u043e\u043c. \u041f\u0440\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0441\u043a\u0440\u0438\u043f\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443, \u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0442\u0432\u0435\u0442\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435. \u041f\u043e\u0440\u044f\u0434\u043e\u043a \u0445\u043e\u0440\u043e\u0448\u043e \u0432\u0438\u0434\u043d\u043e \u043d\u0430 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0433\u0434\u0435 \u043e\u0442\u0432\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0442\u0430\u0439\u043c\u0435\u0440:<\/p>\n

    console<\/span>.<\/span>log<\/span>(<\/span>'1. \u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441'<\/span>);<\/span>\nsetTimeout<\/span>(() => <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'3. \u041f\u0440\u0438\u0448\u0435\u043b \u043e\u0442\u0432\u0435\u0442'<\/span>), <\/span>0<\/span>);<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>'2. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c'<\/span>);<\/span><\/code><\/pre>\n
    1. \u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\n2. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c\n3. \u041f\u0440\u0438\u0448\u0435\u043b \u043e\u0442\u0432\u0435\u0442\n<\/code><\/pre>\n
    \u0414\u0430\u0436\u0435 \u0441 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 0 \u043c\u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043a\u043e\u0434\u0430. \u0421 \u0441\u0435\u0442\u0435\u0432\u044b\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u0442\u0430\u043a \u0436\u0435: \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u00ab\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435\u00bb \u0431\u0435\u0437 await<\/code> \u0438\u043b\u0438 .then()<\/code>.<\/p>\n
    \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440: GET \u0438 POST \u0441 JSON<\/h2>\n
    \u0424\u0430\u0439\u043b demo.mjs<\/code> \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0435\u0442 \u0443\u0447\u0435\u0431\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 Node.js \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u043a \u043d\u0435\u043c\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u044b. \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0435\u0433\u043e \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 node demo.mjs<\/code> (\u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043e \u043d\u0430 Node.js 24 LTS; \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 fetch<\/code> \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0432 Node.js 18 \u043a\u0430\u043a \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0438 \u0441\u0442\u0430\u043b \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u0432 21, \u0430 \u0432\u0435\u0442\u043a\u0438 18 \u0438 20 \u0443\u0436\u0435 \u0431\u0435\u0437 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438; \u043f\u043e\u0440\u0442 3000 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u0435\u043d). \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0447\u0435\u0440\u0435\u0437 3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b: \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0436\u0434\u0435\u0442 \u0442\u0430\u0439\u043c\u0435\u0440 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430.<\/p>\n
    import<\/span> <\/span>http<\/span> <\/span>from<\/span> <\/span>'node:http'<\/span>;<\/span>\n\n\/\/ \u0423\u0447\u0435\u0431\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440: GET \/api\/courses, POST \/api\/orders, GET \/api\/slow<\/span>\nconst<\/span> <\/span>server<\/span> <\/span>=<\/span> <\/span>http<\/span>.<\/span>createServer<\/span>(<\/span>async<\/span> (<\/span>req<\/span>, <\/span>res<\/span>) => {<\/span>\n  <\/span>const<\/span> <\/span>send<\/span> <\/span>=<\/span> (<\/span>status<\/span>, <\/span>data<\/span>) => {<\/span>\n    <\/span>res<\/span>.<\/span>writeHead<\/span>(<\/span>status<\/span>, { <\/span>'Content-Type'<\/span>:<\/span> <\/span>'application\/json; charset=utf-8'<\/span> });<\/span>\n    <\/span>res<\/span>.<\/span>end<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>data<\/span>));<\/span>\n  };<\/span>\n  <\/span>if<\/span> (<\/span>req<\/span>.<\/span>method<\/span> <\/span>===<\/span> <\/span>'GET'<\/span> <\/span>&&<\/span> <\/span>req<\/span>.<\/span>url<\/span> <\/span>===<\/span> <\/span>'\/api\/courses'<\/span>) {<\/span>\n    <\/span>return<\/span> <\/span>send<\/span>(<\/span>200<\/span>, [{ <\/span>id<\/span>:<\/span> <\/span>1<\/span>, <\/span>title<\/span>:<\/span> <\/span>'JavaScript'<\/span> }, { <\/span>id<\/span>:<\/span> <\/span>2<\/span>, <\/span>title<\/span>:<\/span> <\/span>'Python'<\/span> }]);<\/span>\n  }<\/span>\n  <\/span>if<\/span> (<\/span>req<\/span>.<\/span>method<\/span> <\/span>===<\/span> <\/span>'POST'<\/span> <\/span>&&<\/span> <\/span>req<\/span>.<\/span>url<\/span> <\/span>===<\/span> <\/span>'\/api\/orders'<\/span>) {<\/span>\n    <\/span>if<\/span> (<\/span>!<\/span>req<\/span>.<\/span>headers<\/span>[<\/span>'content-type'<\/span>]<\/span>?<\/span>.<\/span>startsWith<\/span>(<\/span>'application\/json'<\/span>)) {<\/span>\n      <\/span>return<\/span> <\/span>send<\/span>(<\/span>415<\/span>, { <\/span>error<\/span>:<\/span> <\/span>'\u041d\u0443\u0436\u0435\u043d Content-Type: application\/json'<\/span> });<\/span>\n    }<\/span>\n    <\/span>let<\/span> <\/span>raw<\/span> <\/span>=<\/span> <\/span>''<\/span>;<\/span>\n    <\/span>for<\/span> <\/span>await<\/span> (<\/span>const<\/span> <\/span>chunk<\/span> <\/span>of<\/span> <\/span>req<\/span>) <\/span>raw<\/span> <\/span>+=<\/span> <\/span>chunk<\/span>;<\/span>\n    <\/span>let<\/span> <\/span>order<\/span>;<\/span>\n    <\/span>try<\/span> { <\/span>order<\/span> <\/span>=<\/span> <\/span>JSON<\/span>.<\/span>parse<\/span>(<\/span>raw<\/span>); } <\/span>catch<\/span> { <\/span>return<\/span> <\/span>send<\/span>(<\/span>400<\/span>, { <\/span>error<\/span>:<\/span> <\/span>'\u041d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 JSON'<\/span> }); }<\/span>\n    <\/span>if<\/span> (<\/span>!<\/span>Number<\/span>.<\/span>isInteger<\/span>(<\/span>order<\/span>?<\/span>.<\/span>courseId<\/span>)) {<\/span>\n      <\/span>return<\/span> <\/span>send<\/span>(<\/span>400<\/span>, { <\/span>error<\/span>:<\/span> <\/span>'courseId \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0446\u0435\u043b\u044b\u043c \u0447\u0438\u0441\u043b\u043e\u043c'<\/span> });<\/span>\n    }<\/span>\n    <\/span>return<\/span> <\/span>send<\/span>(<\/span>201<\/span>, { <\/span>orderId<\/span>:<\/span> <\/span>42<\/span>, <\/span>courseId<\/span>:<\/span> <\/span>order<\/span>.<\/span>courseId<\/span> });<\/span>\n  }<\/span>\n  <\/span>if<\/span> (<\/span>req<\/span>.<\/span>url<\/span> <\/span>===<\/span> <\/span>'\/api\/slow'<\/span>) {<\/span>\n    <\/span>return<\/span> <\/span>setTimeout<\/span>(() => <\/span>send<\/span>(<\/span>200<\/span>, { <\/span>ok<\/span>:<\/span> <\/span>true<\/span> }), <\/span>3000<\/span>);<\/span>\n  }<\/span>\n  <\/span>send<\/span>(<\/span>404<\/span>, { <\/span>error<\/span>:<\/span> <\/span>'\u041d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e'<\/span> });<\/span>\n});<\/span>\n\n\/\/ \u041a\u043b\u0438\u0435\u043d\u0442: \u043e\u0434\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0430 \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b (\u0442\u0430\u043a \u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435)<\/span>\nasync<\/span> <\/span>function<\/span> <\/span>requestJSON<\/span>(<\/span>url<\/span>, { <\/span>method<\/span> <\/span>=<\/span> <\/span>'GET'<\/span>, <\/span>body<\/span>, <\/span>timeoutMs<\/span> <\/span>=<\/span> <\/span>5000<\/span> } <\/span>=<\/span> {}) {<\/span>\n  <\/span>const<\/span> <\/span>headers<\/span> <\/span>=<\/span> { <\/span>Accept<\/span>:<\/span> <\/span>'application\/json'<\/span> };<\/span>\n  <\/span>if<\/span> (<\/span>body<\/span> <\/span>!==<\/span> <\/span>undefined<\/span>) <\/span>headers<\/span>[<\/span>'Content-Type'<\/span>] <\/span>=<\/span> <\/span>'application\/json'<\/span>;<\/span>\n\n  <\/span>const<\/span> <\/span>response<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>fetch<\/span>(<\/span>url<\/span>, {<\/span>\n    <\/span>method<\/span>,<\/span>\n    <\/span>headers<\/span>,<\/span>\n    <\/span>body<\/span>:<\/span> <\/span>body<\/span> <\/span>===<\/span> <\/span>undefined<\/span> <\/span>?<\/span> <\/span>undefined<\/span> <\/span>:<\/span> <\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>body<\/span>),<\/span>\n    <\/span>signal<\/span>:<\/span> <\/span>AbortSignal<\/span>.<\/span>timeout<\/span>(<\/span>timeoutMs<\/span>),<\/span>\n  });<\/span>\n\n  <\/span>const<\/span> <\/span>isJSON<\/span> <\/span>=<\/span> <\/span>response<\/span>.<\/span>headers<\/span>.<\/span>get<\/span>(<\/span>'content-type'<\/span>)<\/span>?<\/span>.<\/span>includes<\/span>(<\/span>'application\/json'<\/span>);<\/span>\n\n  <\/span>if<\/span> (<\/span>!<\/span>response<\/span>.<\/span>ok<\/span>) {<\/span>\n    <\/span>\/\/ \u0442\u0435\u043b\u043e \u043e\u0448\u0438\u0431\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0443\u0441\u0442\u044b\u043c \u0438\u043b\u0438 \u043d\u0435 JSON - \u0441\u0442\u0430\u0442\u0443\u0441 \u0432\u0430\u0436\u043d\u0435\u0435<\/span>\n    <\/span>const<\/span> <\/span>text<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>response<\/span>.<\/span>text<\/span>();<\/span>\n    <\/span>let<\/span> <\/span>detail<\/span> <\/span>=<\/span> <\/span>text<\/span>;<\/span>\n    <\/span>if<\/span> (<\/span>isJSON<\/span>) {<\/span>\n      <\/span>try<\/span> { <\/span>detail<\/span> <\/span>=<\/span> <\/span>JSON<\/span>.<\/span>parse<\/span>(<\/span>text<\/span>)<\/span>?<\/span>.<\/span>error<\/span> <\/span>??<\/span> <\/span>text<\/span>; } <\/span>catch<\/span> { <\/span>\/* \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u0435\u043a\u0441\u0442 *\/<\/span> }<\/span>\n    }<\/span>\n    <\/span>const<\/span> <\/span>error<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>Error<\/span>(<\/span>`HTTP ${<\/span>response<\/span>.<\/span>status<\/span>}: ${<\/span>detail<\/span>}`<\/span>);<\/span>\n    <\/span>error<\/span>.<\/span>status<\/span> <\/span>=<\/span> <\/span>response<\/span>.<\/span>status<\/span>;<\/span>\n    <\/span>throw<\/span> <\/span>error<\/span>;<\/span>\n  }<\/span>\n  <\/span>return<\/span> <\/span>isJSON<\/span> <\/span>?<\/span> <\/span>response<\/span>.<\/span>json<\/span>() <\/span>:<\/span> <\/span>response<\/span>.<\/span>text<\/span>();<\/span>\n}<\/span>\n\nserver<\/span>.<\/span>listen<\/span>(<\/span>3000<\/span>, <\/span>async<\/span> () => {<\/span>\n  <\/span>const<\/span> <\/span>base<\/span> <\/span>=<\/span> <\/span>'http:\/\/localhost:3000'<\/span>;<\/span>\n  <\/span>try<\/span> {<\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'GET:'<\/span>, <\/span>await<\/span> <\/span>requestJSON<\/span>(<\/span>`${<\/span>base<\/span>}\/api\/courses`<\/span>));<\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'POST:'<\/span>, <\/span>await<\/span> <\/span>requestJSON<\/span>(<\/span>`${<\/span>base<\/span>}\/api\/orders`<\/span>, { <\/span>method<\/span>:<\/span> <\/span>'POST'<\/span>, <\/span>body<\/span>:<\/span> { <\/span>courseId<\/span>:<\/span> <\/span>1<\/span> } }));<\/span>\n    <\/span>await<\/span> <\/span>requestJSON<\/span>(<\/span>`${<\/span>base<\/span>}\/api\/orders`<\/span>, { <\/span>method<\/span>:<\/span> <\/span>'POST'<\/span>, <\/span>body<\/span>:<\/span> { <\/span>courseId<\/span>:<\/span> <\/span>'\u043e\u0434\u0438\u043d'<\/span> } });<\/span>\n  } <\/span>catch<\/span> (<\/span>error<\/span>) {<\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'\u041e\u0448\u0438\u0431\u043a\u0430:'<\/span>, <\/span>error<\/span>.<\/span>status<\/span>, <\/span>error<\/span>.<\/span>message<\/span>);<\/span>\n  }<\/span>\n  <\/span>try<\/span> {<\/span>\n    <\/span>await<\/span> <\/span>requestJSON<\/span>(<\/span>`${<\/span>base<\/span>}\/api\/slow`<\/span>, { <\/span>timeoutMs<\/span>:<\/span> <\/span>1000<\/span> });<\/span>\n  } <\/span>catch<\/span> (<\/span>error<\/span>) {<\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'\u041e\u0448\u0438\u0431\u043a\u0430:'<\/span>, <\/span>error<\/span>.<\/span>name<\/span>, <\/span>error<\/span>.<\/span>message<\/span>);<\/span>\n  }<\/span>\n  <\/span>server<\/span>.<\/span>close<\/span>();<\/span>\n  <\/span>server<\/span>.<\/span>closeAllConnections<\/span>();<\/span>\n});<\/span><\/code><\/pre>\n
    \u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u0447\u0435\u0442\u044b\u0440\u0435 \u0441\u0442\u0440\u043e\u043a\u0438: \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u0443\u0440\u0441\u043e\u0432, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0437\u0430\u043a\u0430\u0437, \u043e\u0448\u0438\u0431\u043a\u0430 400 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0442\u0430\u0439\u043c\u0430\u0443\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n
    GET: [ { id: 1, title: 'JavaScript' }, { id: 2, title: 'Python' } ]\nPOST: { orderId: 42, courseId: 1 }\n\u041e\u0448\u0438\u0431\u043a\u0430: 400 HTTP 400: courseId \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0446\u0435\u043b\u044b\u043c \u0447\u0438\u0441\u043b\u043e\u043c\n\u041e\u0448\u0438\u0431\u043a\u0430: TimeoutError The operation was aborted due to timeout\n<\/code><\/pre>\n
    \u0420\u0430\u0437\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 requestJSON<\/h2>\n
      \n
    1. fetch(url, options)<\/code> \u0441\u0440\u0430\u0437\u0443 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u043c\u0438\u0441. await<\/code> \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0443 async-\u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0430 \u043d\u0435 \u0432\u0441\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/li>\n
    2. \u041f\u0440\u043e\u043c\u0438\u0441 \u043e\u0442 fetch<\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0448\u043b\u0438 \u0441\u0442\u0430\u0442\u0443\u0441 \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438. \u0422\u0435\u043b\u043e \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e: response.json()<\/code> \u0442\u043e\u0436\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u043c\u0438\u0441, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u0435\u043d \u0432\u0442\u043e\u0440\u043e\u0439 await<\/code>.<\/li>\n
    3. \u0414\u043b\u044f POST \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 JSON.stringify(body)<\/code> \u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 Content-Type: application\/json<\/code> — \u0442\u0430\u043a \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u043a\u0430\u043a \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0442\u0435\u043b\u043e.<\/li>\n
    4. response.ok<\/code> \u0440\u0430\u0432\u043d\u043e true<\/code> \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432 200-299. \u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0435\u0433\u043e \u0432 \u043e\u0434\u043d\u043e\u043c catch<\/code>. \u0421\u0442\u0430\u0442\u0443\u0441 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0434\u043e \u0440\u0430\u0437\u0431\u043e\u0440\u0430 JSON: \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u043a\u0441\u0438 \u0432\u0435\u0440\u043d\u0435\u0442 502 \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u0442\u0435\u043b\u043e\u043c, \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 HTTP 502<\/code>, \u0430 \u043d\u0435 \u043c\u0430\u0441\u043a\u0438\u0440\u0443\u044e\u0449\u0443\u044e \u0435\u0433\u043e \u043e\u0448\u0438\u0431\u043a\u0443 SyntaxError: Unexpected end of JSON input<\/code>.<\/li>\n
    5. AbortSignal.timeout(5000)<\/code> \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u0435\u0441\u043b\u0438 \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0435\u0442 \u0437\u0430 5 \u0441\u0435\u043a\u0443\u043d\u0434. \u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0437\u0430\u0432\u0438\u0441\u0448\u0435\u043c\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043c\u043e\u0436\u0435\u0442 \u0436\u0434\u0430\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u043e.<\/li>\n<\/ol>\n
      \u0422\u0438\u043f \u043e\u0442\u0432\u0435\u0442\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0443 Content-Type<\/code>: \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438\u043b\u0438 \u043f\u0440\u043e\u043a\u0441\u0438 \u0447\u0430\u0441\u0442\u043e \u043e\u0442\u0434\u0430\u044e\u0442 HTML, \u0430 \u043d\u0435 JSON.<\/p>\n
      \u041e\u0448\u0438\u0431\u043a\u0430 1: fetch \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 404 \u0438 500 \u043e\u0448\u0438\u0431\u043a\u043e\u0439<\/h2>\n
      \u041d\u0435\u0432\u0435\u0440\u043d\u043e — \u043d\u0430\u0434\u0435\u044f\u0442\u044c\u0441\u044f, \u0447\u0442\u043e catch<\/code> \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u043e\u043c \u043e\u0442\u0432\u0435\u0442\u0435:<\/p>\n
      const<\/span> <\/span>response<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>fetch<\/span>(<\/span>'http:\/\/localhost:3000\/api\/cours'<\/span>);<\/span>\nconst<\/span> <\/span>data<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>response<\/span>.<\/span>json<\/span>();<\/span><\/code><\/pre>\n
      fetch<\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0441\u044f \u0443\u0441\u043f\u0435\u0448\u043d\u043e, \u0445\u043e\u0442\u044f \u0430\u0434\u0440\u0435\u0441 \u0441 \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u043e\u0439. \u0414\u0430\u043b\u044c\u0448\u0435 \u0434\u0432\u0430 \u0438\u0441\u0445\u043e\u0434\u0430, \u0438 \u043e\u0431\u0430 \u043f\u043b\u043e\u0445\u0438\u0435. \u0423\u0447\u0435\u0431\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043d\u0430 404 JSON-\u043e\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 data<\/code> \u043c\u043e\u043b\u0447\u0430 \u0441\u0442\u0430\u043d\u0435\u0442 { error: '\u041d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e' }<\/code>, \u0438 \u043a\u043e\u0434 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439 \u043a\u0430\u043a \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438\u043b\u0438 \u043f\u0440\u043e\u043a\u0441\u0438 \u043e\u0442\u0434\u0430\u0435\u0442 \u043d\u0430 404 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043f\u0430\u0434\u0430\u0435\u0442 \u0443\u0436\u0435 \u0440\u0430\u0437\u0431\u043e\u0440 \u0442\u0435\u043b\u0430:<\/p>\n
      SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON\n<\/code><\/pre>\n
      \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 — \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c response.ok<\/code> (\u0438\u043b\u0438 response.status<\/code>) \u0434\u043e \u0447\u0442\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u0430\u043a \u0432 requestJSON<\/code>. \u041f\u0440\u043e\u043c\u0438\u0441 fetch<\/code> \u043e\u0442\u043a\u043b\u043e\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0441\u0431\u043e\u0435 \u0441\u0435\u0442\u0438, \u043e\u0442\u043c\u0435\u043d\u0435 \u0438\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0435 CORS. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435 Node.js 24 \u0432\u044b\u0434\u0430\u0435\u0442 TypeError: fetch failed<\/code>; \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0442\u0435\u043a\u0441\u0442 \u044d\u0442\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f.<\/p>\n
      \u041e\u0448\u0438\u0431\u043a\u0430 2: \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u0431\u0435\u0437 JSON.stringify<\/h2>\n
      \u041d\u0435\u0432\u0435\u0440\u043d\u043e — \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 body<\/code> \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e:<\/p>\n
      const<\/span> <\/span>order<\/span> <\/span>=<\/span> { <\/span>courseId<\/span>:<\/span> <\/span>1<\/span> };<\/span>\nconst<\/span> <\/span>request<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>Request<\/span>(<\/span>'http:\/\/localhost:3000\/api\/orders'<\/span>, { <\/span>method<\/span>:<\/span> <\/span>'POST'<\/span>, <\/span>body<\/span>:<\/span> <\/span>order<\/span> });<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>request<\/span>.<\/span>headers<\/span>.<\/span>get<\/span>(<\/span>'content-type'<\/span>));<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>await<\/span> <\/span>request<\/span>.<\/span>text<\/span>());<\/span><\/code><\/pre>\n
      text\/plain;charset=UTF-8\n[object Object]\n<\/code><\/pre>\n
      \u041e\u0431\u044a\u0435\u043a\u0442 \u043f\u0440\u0438\u0432\u0435\u043b\u0441\u044f \u043a \u0441\u0442\u0440\u043e\u043a\u0435 [object Object]<\/code>, \u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0430\u043b text\/plain<\/code>. \u0421\u0435\u0440\u0432\u0435\u0440 \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043e\u0442\u0432\u0435\u0442\u0438\u0442 415. \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 — body: JSON.stringify(order)<\/code> \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a 'Content-Type': 'application\/json'<\/code>.<\/p>\n
      \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432: \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043b\u0438 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e<\/h2>\n
      \u0415\u0441\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430, \u043d\u0435 \u0436\u0434\u0438\u0442\u0435 \u0438\u0445 \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438: Promise.all<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0432\u0441\u0435 \u0441\u0440\u0430\u0437\u0443 \u0438 \u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0435, Promise.allSettled<\/code> \u0434\u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0445 \u0438 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0441\u0442\u0430\u0442\u0443\u0441 \u043a\u0430\u0436\u0434\u043e\u0433\u043e.<\/p>\n
      const<\/span> <\/span>results<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>Promise<\/span>.<\/span>allSettled<\/span>([<\/span>\n  <\/span>Promise<\/span>.<\/span>resolve<\/span>({ <\/span>id<\/span>:<\/span> <\/span>1<\/span> }),<\/span>\n  <\/span>Promise<\/span>.<\/span>reject<\/span>(<\/span>new<\/span> <\/span>Error<\/span>(<\/span>'HTTP 503'<\/span>)),<\/span>\n]);<\/span>\nfor<\/span> (<\/span>const<\/span> <\/span>r<\/span> <\/span>of<\/span> <\/span>results<\/span>) <\/span>console<\/span>.<\/span>log<\/span>(<\/span>r<\/span>.<\/span>status<\/span>, <\/span>r<\/span>.<\/span>value<\/span> <\/span>??<\/span> <\/span>r<\/span>.<\/span>reason<\/span>.<\/span>message<\/span>);<\/span><\/code><\/pre>\n
      fulfilled { id: 1 }\nrejected HTTP 503\n<\/code><\/pre>\n
      \u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u0432\u043c\u0435\u0441\u0442\u043e Promise.resolve<\/code> \u0438 Promise.reject<\/code> \u0441\u0442\u043e\u044f\u0442 \u0432\u044b\u0437\u043e\u0432\u044b requestJSON(...)<\/code>. \u041f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 await<\/code> \u043d\u0443\u0436\u0435\u043d, \u043a\u043e\u0433\u0434\u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u0435\u0440\u0432\u043e\u0433\u043e.<\/p>\n
      \u041a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/h2>\n
      \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0442\u0430 \u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f requestJSON<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0444\u043e\u0440\u043c\u044b. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0431\u043b\u043e\u043a:<\/p>\n
      <<\/span>form<\/span> id<\/span>=<\/span>\"order\"<\/span>><\/span>\n  <<\/span>input<\/span> name<\/span>=<\/span>\"courseId\"<\/span> value<\/span>=<\/span>\"1\"<\/span>><\/span>\n  <<\/span>button<\/span>><\/span>\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f<\/<\/span>button<\/span>><\/span>\n<\/<\/span>form<\/span>><\/span>\n<<\/span>p<\/span> id<\/span>=<\/span>\"result\"<\/span>><\/<\/span>p<\/span>><\/span>\n<<\/span>script<\/span> type<\/span>=<\/span>\"module\"<\/span>><\/span>\n  <\/span>\/\/ \u0441\u044e\u0434\u0430 \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e requestJSON \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u044b\u0448\u0435<\/span>\n  <\/span>const<\/span> <\/span>form<\/span> <\/span>=<\/span> <\/span>document<\/span>.<\/span>querySelector<\/span>(<\/span>'#order'<\/span>);<\/span>\n  <\/span>const<\/span> <\/span>result<\/span> <\/span>=<\/span> <\/span>document<\/span>.<\/span>querySelector<\/span>(<\/span>'#result'<\/span>);<\/span>\n  <\/span>form<\/span>.<\/span>addEventListener<\/span>(<\/span>'submit'<\/span>, <\/span>async<\/span> (<\/span>event<\/span>) => {<\/span>\n    <\/span>event<\/span>.<\/span>preventDefault<\/span>();<\/span>\n    <\/span>try<\/span> {<\/span>\n      <\/span>const<\/span> <\/span>order<\/span> <\/span>=<\/span> <\/span>await<\/span> <\/span>requestJSON<\/span>(<\/span>'\/api\/orders'<\/span>, {<\/span>\n        <\/span>method<\/span>:<\/span> <\/span>'POST'<\/span>,<\/span>\n        <\/span>body<\/span>:<\/span> { <\/span>courseId<\/span>:<\/span> <\/span>Number<\/span>(<\/span>form<\/span>.<\/span>courseId<\/span>.<\/span>value<\/span>) },<\/span>\n      });<\/span>\n      <\/span>result<\/span>.<\/span>textContent<\/span> <\/span>=<\/span> <\/span>`\u0417\u0430\u044f\u0432\u043a\u0430 ${<\/span>order<\/span>.<\/span>orderId<\/span>} \u0441\u043e\u0437\u0434\u0430\u043d\u0430`<\/span>;<\/span>\n    } <\/span>catch<\/span> (<\/span>error<\/span>) {<\/span>\n      <\/span>result<\/span>.<\/span>textContent<\/span> <\/span>=<\/span> <\/span>`\u041d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c: ${<\/span>error<\/span>.<\/span>message<\/span>}`<\/span>;<\/span>\n    }<\/span>\n  });<\/span>\n<\/<\/span>script<\/span>><\/span><\/code><\/pre>\n
      event.preventDefault()<\/code> \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u0443\u044e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0444\u043e\u0440\u043c\u044b. \u0414\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 textContent<\/code>, \u0430 \u043d\u0435 innerHTML<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0440\u043e\u043a\u0430 \u0438\u0437 \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0430\u0441\u044c \u043a\u0430\u043a \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430.<\/p>\n
      fetch, XMLHttpRequest \u0438 jQuery.ajax<\/h2>\n\n\n\n\n\n\n\n\n
      \u041a\u0440\u0438\u0442\u0435\u0440\u0438\u0439<\/th>\nfetch<\/th>\nXMLHttpRequest<\/th>\njQuery.ajax<\/th>\n<\/tr>\n<\/thead>\n
      \u0421\u0442\u0438\u043b\u044c \u043a\u043e\u0434\u0430<\/td>\n\u041f\u0440\u043e\u043c\u0438\u0441\u044b, async\/await<\/td>\n\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/td>\n\u041a\u043e\u043b\u0431\u044d\u043a\u0438 \u0438 \u043f\u0440\u043e\u043c\u0438\u0441\u043e\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 jqXHR<\/td>\n<\/tr>\n
      \u041e\u0448\u0438\u0431\u043a\u0430 \u043d\u0430 404\/500<\/td>\n\u041d\u0435\u0442, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c response.ok<\/code><\/td>\n\u041d\u0435\u0442, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c status<\/code><\/td>\n\u0414\u0430, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f .fail<\/code><\/td>\n<\/tr>\n
      \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u0430<\/td>\n\u041d\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430<\/td>\n\u0415\u0441\u0442\u044c upload.onprogress<\/code><\/td>\n\u0427\u0435\u0440\u0435\u0437 XHR<\/td>\n<\/tr>\n
      \u041d\u0443\u0436\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430<\/td>\n\u041d\u0435\u0442<\/td>\n\u041d\u0435\u0442<\/td>\n\u0414\u0430<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \u0414\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043e\u0431\u044b\u0447\u043d\u043e \u0431\u0435\u0440\u0443\u0442 fetch<\/code>. XMLHttpRequest \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0440\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0438 \u0442\u0430\u043c, \u0433\u0434\u0435 \u043d\u0443\u0436\u0435\u043d \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u0430\u0439\u043b\u0430. \u041a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d jQuery-\u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438 \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 fetch — \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 jQuery AJAX: $.ajax, $.get, $.post<\/a>.<\/p>\n
      JSON: \u0447\u0442\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435<\/h2>\n
      JSON.stringify<\/code> \u043d\u0435 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442 \u0432\u0441\u0435 \u0442\u0438\u043f\u044b JavaScript: Date<\/code> \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0443, undefined<\/code> \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u044e\u0442, BigInt<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435. \u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043d\u043e\u0432\u0430 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u0442\u0435\u043a\u0441\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0442\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 ISO \u0438 \u044f\u0432\u043d\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0438 \u0440\u0430\u0437\u0431\u043e\u0440\u0435 — \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 JSON: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u0447\u0442\u0435\u043d\u0438\u0435<\/a>.<\/p>\n
      \u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/h2>\n