iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(http): add example for interceptor order (#39938) 

Add an example for the order of interceptor with image

PR Close #39938
This commit is contained in:
Aristeidis Bampakos 2020-12-02 23:25:58 +02:00 committed by Zach Arend
parent 6c783c7fcb
commit 198e841564
2 changed files with 64 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
aio/content/guide/http.md
View File

@ -653,8 +653,20 @@ There are many more interceptors in the complete sample code.
### Interceptor order
Angular applies interceptors in the order that you provide them.
If you provide interceptors _A_, then _B_, then _C_, requests flow in _A->B->C_ and
responses flow out _C->B->A_.
For example, consider a situation in which you want to handle the authentication of your HTTP requests and log them before sending them to a server. To accomplish this task, you could provide an `AuthInterceptor` service and then a `LoggingInterceptor` service.
Outgoing requests would flow from the `AuthInterceptor` to the `LoggingInterceptor`.
Responses from these requests would flow in the other direction, from `LoggingInterceptor` back to `AuthInterceptor`.
The following is a visual representation of the process:
<div class="lightbox">
<img src="generated/images/guide/http/interceptor-order.svg" alt="Interceptor order">
</div>
<div class="alert is-helpful">
The last interceptor in the process is always the `HttpBackend` that handles communication with the server.
</div>
You cannot change the order or remove interceptors later.
If you need to enable and disable an interceptor dynamically, you'll have to build that capability into the interceptor itself.

50
aio/content/images/guide/http/interceptor-order.svg Normal file
View File

@ -0,0 +1,50 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 94" width="300">
<style>
#interceptor-exec-order {
fill: none;
stroke: black;
stroke-width: .3;
}
#interceptor-exec-order > text {
dominant-baseline: central;
fill: black;
font-size: 4px;
font-weight: lighter;
letter-spacing: .2px;
text-anchor: middle;
}
#interceptor-exec-order > .dashed {
stroke-dasharray: 2 1;
}
</style>
<defs>
<rect id="textbox" x="2" width="50" height="10" rx="2" />
<path id="arrow" d="M12,0 v10 l-2,-4 m2,4 l2,-4" />
<g id="arrows">
<use href="#arrow" />
<use href="#arrow" style="transform: rotateZ(180deg); transform-origin: 27px 5px;" />
</g>
</defs>
<g id="interceptor-exec-order">
<text x="27" y="7">HttpClient</text>
<use href="#textbox" y="02" class="dashed" />
<use href="#arrows" y="12" class="dashed" />
<text x="27" y="27">AuthInterceptor</text>
<use href="#textbox" y="22" />
<use href="#arrows" y="32" />
<text x="27" y="47">LoggingInterceptor</text>
<use href="#textbox" y="42" />
<use href="#arrows" y="52" />
<text x="27" y="67">HttpBackend</text>
<use href="#textbox" y="62" />
<use href="#arrows" y="72" class="dashed" />
<text x="27" y="87">Server</text>
<use href="#textbox" y="82" class="dashed" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB