{"id":21231595,"url":"https://github.com/piyalidas10/httpinterceptor","last_synced_at":"2025-03-15T02:28:41.271Z","repository":{"id":38581768,"uuid":"250560827","full_name":"piyalidas10/HttpInterceptor","owner":"piyalidas10","description":"Example of HttpInterceptor for both request and response","archived":false,"fork":false,"pushed_at":"2023-01-07T16:26:28.000Z","size":3798,"stargazers_count":1,"open_issues_count":24,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-21T18:22:45.610Z","etag":null,"topics":["angular","angular8","error-handling","httpinterceptor","httpintercptors","interceptor","observable","service","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/piyalidas10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-27T14:48:48.000Z","updated_at":"2024-07-02T20:06:36.000Z","dependencies_parsed_at":"2023-02-07T15:45:39.617Z","dependency_job_id":null,"html_url":"https://github.com/piyalidas10/HttpInterceptor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FHttpInterceptor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FHttpInterceptor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FHttpInterceptor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FHttpInterceptor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piyalidas10","download_url":"https://codeload.github.com/piyalidas10/HttpInterceptor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243674167,"owners_count":20329051,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular8","error-handling","httpinterceptor","httpintercptors","interceptor","observable","service","typescript"],"created_at":"2024-11-20T23:47:37.421Z","updated_at":"2025-03-15T02:28:41.235Z","avatar_url":"https://github.com/piyalidas10.png","language":"TypeScript","readme":"# Run Application\n```\nng serve\nlocalhost:4200/\n```\n\n# interceptor\n\nhttps://medium.com/angular-in-depth/top-10-ways-to-use-interceptors-in-angular-db450f8a62d6\nhttps://stackblitz.com/github/melcor76/interceptors?file=src%2Fapp%2Finterceptors%2Fnotify.interptor.ts\n\nHttpInterceptor was introduced with Angular 4.3. It provides a way to intercept HTTP requests and responses to transform or handle them before passing them along.\n\n# Https Interceptor (To change the request)\n### Manipulating the URL\n\n![Https Interceptor](header-interceptor.png)\n\nSounds a bit risky when I say it out loud but let’s see how easily we can do it in an interceptor.\nWe could, for example, want to change HTTP to HTTPS.\nIt’s as easy as cloning the request and replacing http:// with https:// at the same time. Then we send the cloned, HTTPS request to the next handler.\n\n```\n// clone request and replace 'http://' with 'https://' at the same time\nconst httpsReq = req.clone({\n  url: req.url.replace(\"http://\", \"https://\")\n});\n\nreturn next.handle(httpsReq);\n```\n\nIn the example, we set the URL with HTTP, but when we check the request, we can see that it changed to HTTPS.\n\nenvironments/environment.ts\n```\nexport const environment = {\n  production: false,\n  apiEndpoint: 'http://jsonplaceholder.typicode.com/users'\n};\n```\n\n\n# Convertres Interceptor (To change the response)\n### Change the first letter of response JSON keys\n\n![Convertres Interceptor](convert-response-interceptor.png)\n\n```\n              if (event instanceof HttpResponse) {\n                    function toConvert(ele) {\n                        const fr = ele.charAt(0).toLowerCase();\n                        const full = fr + ele.slice(1);\n                        return full;\n                    }\n                    const resObj = event.body;\n                    const sample = Object.keys(resObj).map(key =\u003e ({\n                        [toConvert(key)]: resObj[key]}\n                    ));\n                    const newObj = Object.assign({}, ...sample);\n                    console.log('ConvertresInterceptor event.body =\u003e ', newObj);\n                    const newRes = event.clone({body: newObj});\n                    return newRes;\n                }\n```\n\n\n# Header Interceptor (To change the request)\n### Add header of request\n\n![Header Interceptor](header-interceptor.png)\n\n```\n        if (!req.headers.has('Content-Type')) {\n            req = req.clone({\n              headers: req.headers.set('Content-Type', 'application/json')\n            });\n          }\n        const head = req.clone({setHeaders: {'Header-Name' : 'Piyali Das'}});\n        return next.handle(head);\n```\n\n# Notify Interceptor (Notify about response change)\n\n![Notify Interceptor](link-to-image)\n\n```                \n                if (event instanceof HttpResponse \u0026\u0026 event.status === 201) {\n                    this.toastr.success('Successfully created');\n                } else {\n                    this.toastr.error('Sorry! Not Successfully created');\n                }\n```                \n\n### Rxjs Pipe\n\nPipes let you combine multiple functions into a single function. The pipe() function takes as its arguments the functions you want to combine, and returns a new function that, when executed, runs the composed functions in sequence.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fhttpinterceptor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiyalidas10%2Fhttpinterceptor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fhttpinterceptor/lists"}