Angular6封装http
这篇文章给大家介绍Angular6封装http,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
成都创新互联公司专注于网站建设,为客户提供成都网站设计、网站制作、网页设计开发服务,多年建网站服务经验,各类网站都可以开发,成都品牌网站建设,公司官网,公司展示网站,网站设计,建网站费用,建网站多少钱,价格优惠,收费合理。
第一步:准备工作,导入 HttpClientModule
在app.module.ts中导入 HttpClientModule,然后在imports数组中将 HttpClientModule 加入到 BrowserModule 之后,具体代码为:
import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ BrowserModule, // import HttpClientModule after BrowserModule. HttpClientModule, ], declarations: [ AppComponent, ], bootstrap: [ AppComponent ] })
第二步:新建有关拦截器的文件
在app文件夹下新建http-interceptors文件夹,在其内新建base-interceptor.ts,index.ts两个文件。其中,base-interceptor.ts是用于设置拦截器的注入器文件,index.ts则为扩展拦截器的提供商。
### base-interceptor.ts import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http'; import { throwError } from 'rxjs' import { catchError, retry } from 'rxjs/operators'; /*设置请求的基地址,方便替换*/ const baseurl = 'http://localhost:8360'; @Injectable() export class BaseInterceptor implements HttpInterceptor { constructor() {} intercept(req, next: HttpHandler) { let newReq = req.clone({ url: req.hadBaseurl ? `${req.url}` : `${baseurl}${req.url}`, }); /*此处设置额外的头部,token常用于登陆令牌*/ if(!req.cancelToken) { /*token数据来源自己设置,我常用localStorage存取相关数据*/ newReq.headers = newReq.headers.set('token', 'my-new-auth-token') } // send cloned request with header to the next handler. return next.handle(newReq) .pipe( /*失败时重试2次,可自由设置*/ retry(2), /*捕获响应错误,可根据需要自行改写,我偷懒了,直接用的官方的*/ catchError(this.handleError) ) } private handleError(error: HttpErrorResponse) { if (error.error instanceof ErrorEvent) { // A client-side or network error occurred. Handle it accordingly. console.error('An error occurred:', error.error.message); } else { // The backend returned an unsuccessful response code. // The response body may contain clues as to what went wrong, console.error( `Backend returned code ${error.status}, ` + `body was: ${error.error}`); } // return an observable with a user-facing error message return throwError( 'Something bad happened; please try again later.'); }; }
### index.ts import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { BaseInterceptor } from './base-interceptor'; /** Http interceptor providers in outside-in order */ export const httpInterceptorProviders = [ { provide: HTTP_INTERCEPTORS, useClass: BaseInterceptor, multi: true }, ]; /* Copyright 2017-2018 Google Inc. All Rights Reserved. Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at http://angular.io/license */
通过克隆修改 req 对象即可拦截请求,而操作 **next.handle(newReq)**的结果即可拦截响应。如果需要修改,可直接扩展 base-interceptor.ts 或 参考 base-interceptor.ts 文件新建其他文件,然后在 index.ts 中正确引入该拦截器,并将其添加到 httpInterceptorProviders 数组中即可。
第三步:注册提供商
在app.module.ts中加入以下代码:
import { httpInterceptorProviders } from './http-interceptors/index' @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [ httpInterceptorProviders ], bootstrap: [AppComponent] })
关于Angular6封装http就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
当前题目:Angular6封装http
分享地址:http://pwwzsj.com/article/josghe.html