https://github.com/piyalidas10/httpinterceptor
Example of HttpInterceptor for both request and response
https://github.com/piyalidas10/httpinterceptor
angular angular8 error-handling httpinterceptor httpintercptors interceptor observable service typescript
Last synced: about 1 year ago
JSON representation
Example of HttpInterceptor for both request and response
- Host: GitHub
- URL: https://github.com/piyalidas10/httpinterceptor
- Owner: piyalidas10
- Created: 2020-03-27T14:48:48.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T16:26:28.000Z (about 3 years ago)
- Last Synced: 2025-01-21T18:22:45.610Z (about 1 year ago)
- Topics: angular, angular8, error-handling, httpinterceptor, httpintercptors, interceptor, observable, service, typescript
- Language: TypeScript
- Homepage:
- Size: 3.62 MB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Run Application
```
ng serve
localhost:4200/
```
# interceptor
https://medium.com/angular-in-depth/top-10-ways-to-use-interceptors-in-angular-db450f8a62d6
https://stackblitz.com/github/melcor76/interceptors?file=src%2Fapp%2Finterceptors%2Fnotify.interptor.ts
HttpInterceptor 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.
# Https Interceptor (To change the request)
### Manipulating the URL
Sounds a bit risky when I say it out loud but let’s see how easily we can do it in an interceptor.
We could, for example, want to change HTTP to HTTPS.
It’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.
```
// clone request and replace 'http://' with 'https://' at the same time
const httpsReq = req.clone({
url: req.url.replace("http://", "https://")
});
return next.handle(httpsReq);
```
In the example, we set the URL with HTTP, but when we check the request, we can see that it changed to HTTPS.
environments/environment.ts
```
export const environment = {
production: false,
apiEndpoint: 'http://jsonplaceholder.typicode.com/users'
};
```
# Convertres Interceptor (To change the response)
### Change the first letter of response JSON keys
```
if (event instanceof HttpResponse) {
function toConvert(ele) {
const fr = ele.charAt(0).toLowerCase();
const full = fr + ele.slice(1);
return full;
}
const resObj = event.body;
const sample = Object.keys(resObj).map(key => ({
[toConvert(key)]: resObj[key]}
));
const newObj = Object.assign({}, ...sample);
console.log('ConvertresInterceptor event.body => ', newObj);
const newRes = event.clone({body: newObj});
return newRes;
}
```
# Header Interceptor (To change the request)
### Add header of request
```
if (!req.headers.has('Content-Type')) {
req = req.clone({
headers: req.headers.set('Content-Type', 'application/json')
});
}
const head = req.clone({setHeaders: {'Header-Name' : 'Piyali Das'}});
return next.handle(head);
```
# Notify Interceptor (Notify about response change)
```
if (event instanceof HttpResponse && event.status === 201) {
this.toastr.success('Successfully created');
} else {
this.toastr.error('Sorry! Not Successfully created');
}
```
### Rxjs Pipe
Pipes 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.