{"componentChunkName":"component---gatsby-theme-courses-src-templates-lesson-js","path":"/courses/mean-stack-angular-expressjs-classroom/lessons/mean-stack-angular-expressjs-classroom-api-http-interceptors","result":{"data":{"course":{"slug":"mean-stack-angular-expressjs-classroom","name":"คอร์สอบรม Angular / MEAN Stack พัฒนาเว็บและ API ด้วย MongoDB Express.js Angular 17 และ Node.js","excerpt":"สอนการใช้ MEAN Stack (MongoDB, Express.js, Angular และ Node.js) เพื่อสร้างเว็บและ API แบบ Monorepo ด้วย Nx","courseInsideNote":"","units":[{"title":"Resources","lessons":[{"title":"วิธีการเข้าอบรม","type":"document","slug":"mean-stack-angular-expressjs-classroom-how-to-join-course","hasCode":null,"forLive":true},{"title":"การใช้งานคอร์สและซอร์จโค้ด","type":"document","slug":"mean-stack-angular-expressjs-classroom-how-to-use-this-course","hasCode":null,"forLive":false},{"title":"การขอ Certification","type":"document","slug":"mean-stack-angular-expressjs-classroom-certification","hasCode":null,"forLive":true}]},{"title":"Recap JavaScript and TypeScript","lessons":[{"title":"Recap JavaScript / TypeScript","type":"document","slug":"mean-stack-angular-expressjs-classroom-recap-js-ts","hasCode":null,"forLive":null},{"title":"สไลด์ Angular","type":"document","slug":"mean-stack-angular-expressjs-classroom-angular-slide","hasCode":null,"forLive":null},{"title":"การตั้งค่า Git Bash บน Integrated Terminal","type":"document","slug":"mean-stack-angular-expressjs-classroom-git-bash-integrated-terminal","hasCode":null,"forLive":null},{"title":"แบบฝึกหัดเรื่อง let/const, Arrow Functions, Spread and Destructuring","type":"document","slug":"mean-stack-angular-expressjs-classroom-js-exam-let-const-arrow-fn-spread-destructuring","hasCode":null,"forLive":null},{"title":"แบบฝึกหัดเรื่อง Map, Filter และ Find","type":"document","slug":"mean-stack-angular-expressjs-classroom-js-exam-map-filter-find","hasCode":null,"forLive":null},{"title":"แบบฝึกหัดเรื่อง ESModule","type":"document","slug":"mean-stack-angular-expressjs-classroom-js-exam-esmodule","hasCode":null,"forLive":null},{"title":"แบบฝึกหัดเรื่องการใช้งาน TypeScript","type":"document","slug":"mean-stack-angular-expressjs-classroom-js-exam-typescript","hasCode":null,"forLive":null},{"title":"TypeScript Exercise","type":"document","slug":"mean-stack-angular-expressjs-classroom-typescript-exercise","hasCode":null,"forLive":null}]},{"title":"Monorepo","lessons":[{"title":"Nx Workspace","type":"document","slug":"mean-stack-angular-expressjs-classroom-nx-workspace","hasCode":null,"forLive":null},{"title":"การใช้งาน Angular Material","type":"document","slug":"mean-stack-angular-expressjs-classroom-angular-material-ui","hasCode":null,"forLive":null},{"title":"การสร้าง API บน Monorepo","type":"document","slug":"mean-stack-angular-expressjs-classroom-api-monorepo","hasCode":null,"forLive":null},{"title":"Deployment","type":"document","slug":"mean-stack-angular-expressjs-classroom-deployment","hasCode":null,"forLive":null}]},{"title":"การใช้งาน Express.js","lessons":[{"title":"สไลด์เรื่อง Express","type":"document","slug":"mean-stack-angular-expressjs-classroom-express-slide","hasCode":null,"forLive":null},{"title":"แบบทดสอบเรื่อง RESTful API","type":"document","slug":"mean-stack-angular-expressjs-classroom-restful-api-exam","hasCode":null,"forLive":true},{"title":"การตรวจสอบ Payload ในฟอร์ม","type":"document","slug":"mean-stack-angular-expressjs-classroom-form-validation","hasCode":null,"forLive":null},{"title":"Serializers","type":"document","slug":"mean-stack-angular-expressjs-classroom-serializers","hasCode":null,"forLive":null},{"title":"HTTP Interceptors","type":"document","slug":"mean-stack-angular-expressjs-classroom-api-http-interceptors","hasCode":null,"forLive":null},{"title":"Form Data","type":"document","slug":"mean-stack-angular-expressjs-classroom-api-form-data","hasCode":null,"forLive":null}]},{"title":"การจัดการ Form บน Angular","lessons":[{"title":"การทำงานกับฟอร์ม","type":"document","slug":"mean-stack-angular-expressjs-classroom-reactive-form","hasCode":null,"forLive":null},{"title":"การอัพโหลดไฟล์ผ่านฟอร์ม","type":"document","slug":"mean-stack-angular-expressjs-classroom-form-data","hasCode":null,"forLive":null}]},{"title":"การใช้งานฐานข้อมูล MongoDB","lessons":[{"title":"การเชื่อมต่อฐานข้อมูล MongoDB","type":"document","slug":"mean-stack-angular-expressjs-classroom-mongodb","hasCode":null,"forLive":null},{"title":"Database Seeding","type":"document","slug":"mean-stack-angular-expressjs-classroom-database-seeding","hasCode":null,"forLive":null}]},{"title":"หลักการของ Authentication / Authorization","lessons":[{"title":"สไลด์เรื่อง Authentication / Authorization","type":"document","slug":"mean-stack-angular-expressjs-classroom-auth-slide","hasCode":null,"forLive":null},{"title":"Authentication","type":"document","slug":"mean-stack-angular-expressjs-classroom-authentication","hasCode":null,"forLive":null},{"title":"Authorization","type":"document","slug":"mean-stack-angular-expressjs-classroom-authorization","hasCode":null,"forLive":null},{"title":"Auth UI","type":"document","slug":"mean-stack-angular-expressjs-classroom-auth-ui","hasCode":null,"forLive":null}]},{"title":"Deployment","lessons":[{"title":"Deployment","type":"document","slug":"mean-stack-angular-expressjs-classroom-deployment","hasCode":null,"forLive":null}]},{"title":"บันทึกการสอน","lessons":[{"title":"1. Recap JavaScript","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-recap-javascript","hasCode":null,"forLive":null},{"title":"1.1 เฉลยแบบฝึกหัดเรื่อง Arrow Functions, Spread, Rest, Destructuring","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-video-arrow-fns-spead-rest-destructuring-exam-solution","hasCode":null,"forLive":true},{"title":"1.2 เฉลยแบบฝึกหัดเรื่อง Map และ Filter","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-video-map-filter-exam-solution","hasCode":null,"forLive":true},{"title":"1.3 เฉลยแบบฝึกหัดเรื่อง ES Modules","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-video-es-modules-exam-solution","hasCode":null,"forLive":true},{"title":"2. Recap TypeScript","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-recap-typescript","hasCode":null,"forLive":null},{"title":"3. เฉลยแบบฝึกหัด TypeScript","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-typescript-exercise-solution","hasCode":null,"forLive":null},{"title":"4. Angular Application และ Library","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-angular-application-and-library","hasCode":true,"forLive":null},{"title":"5. Recap Nx Workspace","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-recap-nx-workspace","hasCode":true,"forLive":null},{"title":"6. การฟอร์แมต Angular Syntax ด้วย Prettier","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-angular-prettier","hasCode":false,"forLive":null},{"title":"7. Angular Components, Directives, Pipes and Services","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-angular-components-directives-pipes-and-services","hasCode":null,"forLive":null},{"title":"8. Change Detection และ Life Cycle","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-change-detection","hasCode":true,"forLive":null},{"title":"9. Angular Signals","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-angular-signals","hasCode":true,"forLive":null},{"title":"10. RxJS","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-rxjs","hasCode":true,"forLive":null},{"title":"11. Angular Material","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-angular-material","hasCode":true,"forLive":null},{"title":"12. ทบทวนการออกแบบ RESTful API","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-recap-restful-api","hasCode":null,"forLive":null},{"title":"13. เฉลยแบบฝึกหัดเรื่อง RESTful API","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-restful-api-exam-solution","hasCode":null,"forLive":null},{"title":"14. การสร้าง API ด้วย Express","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-express","hasCode":true,"forLive":null},{"title":"15. การใช้งาน Angular HTTPClient","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-angular-http-client","hasCode":true,"forLive":null},{"title":"16. การตรวจสอบ Request Payload","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-payload-validation","hasCode":true,"forLive":null},{"title":"17. Serializers","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-serializers","hasCode":true,"forLive":null},{"title":"18. HTTP Interceptors","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-http-interceptors","hasCode":true,"forLive":null},{"title":"19. การจัดการส่วน Upload File","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-upload-file","hasCode":true,"forLive":null},{"title":"20. Angular Forms","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-angular-forms","hasCode":true,"forLive":null},{"title":"21. Form Data","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-form-data","hasCode":true,"forLive":null},{"title":"22. ทบทวนการสร้าง Form","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-recap-form-management","hasCode":true,"forLive":null},{"title":"23. การใช้งาน MongoDB","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-mongo-db","hasCode":true,"forLive":null},{"title":"24. Database Seeding","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-database-seeding","hasCode":true,"forLive":null},{"title":"25. Authentication","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-authentication","hasCode":true,"forLive":null},{"title":"26. Authorization","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-authorization","hasCode":true,"forLive":null},{"title":"27. Auth UI","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-auth-ui","hasCode":true,"forLive":null},{"title":"28. Lazy Loading Feature Modules","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-lazy-loading-feature-modules","hasCode":true,"forLive":null},{"title":"29. Deployment","type":"video","slug":"mean-stack-angular-expressjs-classroom-video-deployment","hasCode":true,"forLive":null}]}],"coverImage":{"childImageSharp":{"fixed":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACvElEQVQozy2SuWtUYRTFX2mlRmefefvs+5aZSSaTTGbLuCQx60hAQkxMCCIETUQU3BoLQQVBRAUXUCRgob2VWFrZWOqfINj/vC9aHN67793vfOfcc5WAx8vdQoGXlSovikXulEqYqkbI50cXNGJx1utjPEql+Grb/JR62B9A1TQ8bh8zWYsPtyd5slEjEQyiBOXQ2ImTjM+eIdMYpzjVpyV1U57Fep3tnR22r9+gP9bgrZB8j0TopdLMLA7Ileu8PJVn41Ofhw86XEjaKAEhnAipjBsmNV3nlmVxybLZCoe5aJrMmRargeCBqkuaznwwxJDUi5UIjZzFrGmwPyjzvJcl4wugONa60jglTR0hvi1ku1Jf0Q2u2mFOC8E1IXXIdg2DvDfAZtHm9/ICP85M0YppQqSTUU18cqmiCtFC7yTn55Y4d3qOXqtLMpEim80zmJ5nXv71mx06gnajiXJkiHsFG7qr/Okvs50y0DM5yqUCwcD/GXqGjhHRDOLhKFFRE3Ggm8RFYToSxS8q26bNuozlYTrL43KBp3GL+/EwhgShSogbuSqr6TyK1+Vmc2uL5aUlEl4fw2ItLQ2GQJMbh+TbWRnFG7H7RgJhcZGbsRiH3B6OCtzH3QSl9+pIm+1CFcV3zMW7L5959voV5XSGRrXGSKlMIZs7mElO8C0a5YOszA0JaTYkoQhRSC5ynDRqVRqZPPsrTW5OlP6lvDKYZ6JeJS+2HIuxaAxTVB0+7uKE2P0lit4L4Z6oHxPVfo+MyeUlZWpMV/PUkwle9FtcrpSFMKBxf2+dtdkWxVyJ8dFR2s1JKqIynUxhS9qvRdlHWSMn/Y4aIhlWyQom0wbdkWE6+QwPBmvsNnsofo+PoNd7YMFRGxKLDpz0LSFwybujal8U7qo601Gdds2mW7aoyMokQj5ygtVkjFHZ478Ok2ze5v9rFAAAAABJRU5ErkJggg==","width":730,"height":415,"src":"/static/2b8c7ca53d22d87419ee3cb0c798a3ae/b012f/feature-image.png","srcSet":"/static/2b8c7ca53d22d87419ee3cb0c798a3ae/b012f/feature-image.png 1x,\n/static/2b8c7ca53d22d87419ee3cb0c798a3ae/edcac/feature-image.png 1.5x,\n/static/2b8c7ca53d22d87419ee3cb0c798a3ae/c93a6/feature-image.png 2x","srcWebp":"/static/2b8c7ca53d22d87419ee3cb0c798a3ae/738cc/feature-image.webp","srcSetWebp":"/static/2b8c7ca53d22d87419ee3cb0c798a3ae/738cc/feature-image.webp 1x,\n/static/2b8c7ca53d22d87419ee3cb0c798a3ae/41b58/feature-image.webp 1.5x,\n/static/2b8c7ca53d22d87419ee3cb0c798a3ae/7f29b/feature-image.webp 2x"}}}}},"pageContext":{"courseSlug":"mean-stack-angular-expressjs-classroom","lesson":{"title":"HTTP Interceptors","slug":"mean-stack-angular-expressjs-classroom-api-http-interceptors","desc":"HTTP Interceptors","time":null,"type":"document","hasCode":null,"forLive":null}}},"staticQueryHashes":["206548925","2199894714","2876447390","2876447390","3640134886","372033979","4000121635","4000121635","480822984"]}