Angular6笔记之封装http的示例代码

墨蓝 2022-05-08 16:30 134阅读 0赞

最近抽空学习了一下Angular6，之前主要使用的是vue，所以免不了的也想对Angular6提供的工具进行一些封装，今天主要就跟大家讲一下这个http模块。

之前使用的ajax库是axios，可以设置baseurl，公共头部；集中捕捉错误等，由于Angular6的依赖注入机制，是不能通过直接修改http模块暴露的变量来封装的，但是通过官方文档我们知道可以通过[拦截器（HttpInterceptor） ][HttpInterceptor]来实现这一功能。 拦截器可以拦截请求，也可以拦截响应，那么通过 拦截请求 就可以实现 设置baseurl，公共头部；而通过 拦截响应 就可以实现 集中捕获错误 。废话不多说，上代码吧。

**第一步：准备工作，导入 HttpClientModule**

在app.module.ts中导入 HttpClientModule，然后在imports数组中将 HttpClientModule 加入到 BrowserModule 之后，具体代码为：

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>import { HttpClientModule } from </code><code>'@angular/common/http'</code><code>;</code> &nbsp; <code>@NgModule({ </code> <code>&nbsp;</code><code>imports: [</code> <code>&nbsp;&nbsp;</code><code>BrowserModule,</code> <code>&nbsp;&nbsp;</code><code>// import HttpClientModule after BrowserModule.</code> <code>&nbsp;&nbsp;</code><code>HttpClientModule,</code> <code>&nbsp;</code><code>],</code> <code>&nbsp;</code><code>declarations: [</code> <code>&nbsp;&nbsp;</code><code>AppComponent,</code> <code>&nbsp;</code><code>],</code> <code>&nbsp;</code><code>bootstrap: [ AppComponent ]</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

**第二步：新建有关拦截器的文件**

在app文件夹下新建http-interceptors文件夹，在其内新建base-interceptor.ts，index.ts两个文件。其中，base-interceptor.ts是用于设置拦截器的注入器文件，index.ts则为扩展拦截器的提供商。

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 </td> 
 <td> <code>### base-interceptor.ts</code> &nbsp; <code>import { Injectable } from </code><code>'@angular/core'</code><code>;</code> <code>import { </code> <code>&nbsp;</code><code>HttpEvent, HttpInterceptor, HttpHandler, HttpRequest,</code> <code>&nbsp;</code><code>HttpErrorResponse</code> <code>} from </code><code>'@angular/common/http'</code><code>;</code> <code>import { throwError } from </code><code>'rxjs'</code> <code>import { catchError, retry } from </code><code>'rxjs/operators'</code><code>;</code> &nbsp; <code>/*设置请求的基地址，方便替换*/</code> <code>const baseurl = </code><code>'<a href="http://localhost:8360/" rel="nofollow">http://localhost:8360</a>'</code><code>;</code> &nbsp; <code>@Injectable()</code> <code>export class BaseInterceptor implements HttpInterceptor { </code> &nbsp; <code>&nbsp;</code><code>constructor() {}</code> &nbsp; <code>&nbsp;</code><code>intercept(req, next: HttpHandler) { </code> &nbsp; <code>&nbsp;&nbsp;</code><code>let newReq = req.clone({ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>url: req.hadBaseurl ? `${req.url}` : `${baseurl}${req.url}`,</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>/*此处设置额外的头部，token常用于登陆令牌*/</code> <code>&nbsp;&nbsp;</code><code>if</code><code>(!req.cancelToken) { </code> <code>&nbsp;&nbsp;</code><code>/*token数据来源自己设置，我常用localStorage存取相关数据*/</code> <code>&nbsp;&nbsp;&nbsp;</code><code>newReq.headers =</code> <code>&nbsp;&nbsp;&nbsp;</code><code>newReq.headers.set(</code><code>'token'</code><code>, </code><code>'my-new-auth-token'</code><code>)</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>// send cloned request with header to the next handler.</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>next.handle(newReq)</code> <code>&nbsp;&nbsp;&nbsp;</code><code>.pipe(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/*失败时重试2次，可自由设置*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>retry(2),</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/*捕获响应错误，可根据需要自行改写，我偷懒了，直接用的官方的*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>catchError(</code><code>this</code><code>.handleError)</code> <code>&nbsp;&nbsp;&nbsp;</code><code>)</code> <code>&nbsp;</code><code>}</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;</code><code>private handleError(error: HttpErrorResponse) { </code> <code>&nbsp;&nbsp;</code><code>if</code> <code>(error.error </code><code>instanceof</code> <code>ErrorEvent) { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>// A client-side or network error occurred. Handle it accordingly.</code> <code>&nbsp;&nbsp;&nbsp;</code><code>console.error(</code><code>'An error occurred:'</code><code>, error.error.message);</code> <code>&nbsp;&nbsp;</code><code>} </code><code>else</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>// The backend returned an unsuccessful response code.</code> <code>&nbsp;&nbsp;&nbsp;</code><code>// The response body may contain clues as to what went wrong,</code> <code>&nbsp;&nbsp;&nbsp;</code><code>console.error(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>`Backend returned code ${error.status}, ` +</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>`body was: ${error.error}`);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>// return an observable with a user-facing error message</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>throwError(</code> <code>&nbsp;&nbsp;&nbsp;</code><code>'Something bad happened; please try again later.'</code><code>);</code> <code>&nbsp;</code><code>};</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </td> 
 <td> <code>### index.ts</code> &nbsp; <code>import { HTTP_INTERCEPTORS } from </code><code>'@angular/common/http'</code><code>;</code> &nbsp; <code>import { BaseInterceptor } from </code><code>'./base-interceptor'</code><code>;</code> &nbsp; <code>/** Http interceptor providers in outside-in order */</code> <code>export const httpInterceptorProviders = [</code> <code>&nbsp;</code><code>{ provide: HTTP_INTERCEPTORS, useClass: BaseInterceptor, multi: </code><code>true</code> <code>},</code> &nbsp; <code>];</code> &nbsp; <code>/*</code> <code>Copyright 2017-2018 Google Inc. All Rights Reserved.</code> <code>Use of this source code is governed by an MIT-style license that</code> <code>can be found in the LICENSE file at <a href="http://angular.io/license" rel="nofollow">http://angular.io/license</a></code> <code>*/</code> </td> 
 </tr> 
 </tbody> 
</table>

通过克隆修改 req 对象即可拦截请求，而操作 \*\*next.handle(newReq)\*\*的结果即可拦截响应。如果需要修改，可直接扩展 base-interceptor.ts 或 参考 base-interceptor.ts 文件新建其他文件，然后在 index.ts 中正确引入该拦截器，并将其添加到 httpInterceptorProviders 数组中即可。

**第三步：注册提供商**

在app.module.ts中加入以下代码:

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>import { httpInterceptorProviders } from </code><code>'./http-interceptors/index'</code> &nbsp; <code>@NgModule({ </code> <code>&nbsp;</code><code>declarations: [</code> <code>&nbsp;&nbsp;</code><code>AppComponent</code> <code>&nbsp;</code><code>],</code> <code>&nbsp;</code><code>imports: [</code> <code>&nbsp;&nbsp;</code><code>BrowserModule,</code> <code>&nbsp;&nbsp;</code><code>HttpClientModule</code> <code>&nbsp;</code><code>],</code> <code>&nbsp;</code><code>providers: [</code> <code>&nbsp;&nbsp;</code><code>httpInterceptorProviders</code> <code>&nbsp;</code><code>],</code> <code>&nbsp;</code><code>bootstrap: [AppComponent]</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

至此，Angular6的http模块封装已经基本完成，如果有需要可以自行扩展，可参考第二步。如果看完以后不明白或者我有写的不对的地方，欢迎大家进行评论。

[HttpInterceptor]: https://angular.cn/guide/http#intercepting-requests-and-responses
[Link 1]: https://www.jb51.net/article/144605.htm#