tnblog
首页
视频
资源
登录
不帅~~但是很暖心.....
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术

基于angular的HttpClient封装_HttpClient

5230人阅读 2020/12/23 14:06 总访问:287854 评论:0 收藏:0 手机
分类: Angular


基于angular的HttpClient封装_HttpClient,直接复制源码即可用
包含常用的get、post、patch、delete和put请求;

import { HttpClientHttpEventHttpHeadersHttpResponse } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { ObservableofthrowError } from 'rxjs';
import { catchErrorswitchMaptap } from 'rxjs/operators';

export type _HttpHeaders = HttpHeaders | { [headerstring]: string | string[] };

/**
 * 封装HttpClient,主要解决:
 * + 优化HttpClient在参数上便利性
 * + 统一实现 loading
 */
@Injectable({ providedIn: 'root' })
export class _HttpClient {
    constructor(private httpHttpClient) {
    }

    private _loading = false;

    /** 是否正在加载中 */
    get loading(): boolean {
        return this._loading;
    }

    private begin(): void {
        Promise.resolve(null).then(() => (this._loading = true));
    }

    private end(): void {
        Promise.resolve(null).then(() => (this._loading = false));
    }

    /**
     * GET:返回一个 `any` 类型
     */
    get(
        urlstring,
        params?: any,
        options?: {
            headers?: _HttpHeaders;
            observe?: 'body';
            reportProgress?: boolean;
            responseType'arraybuffer';
            withCredentials?: boolean;
        },
    ): Observable<any> {
        this.begin();
        return of(null).pipe(
            tap(() => this.begin()),
            switchMap(() => this.http.get(urloptions)),
            tap(() => this.end()),
            catchError(res => {
                this.end();
                return throwError(res);
            }),
        );
    }

    /**
   * POST:返回一个 `any` 类型
   */
    post(
        urlstring,
        body?: any,
        params?: any,
        options?: {
            headers?: _HttpHeaders;
            observe?: 'body';
            reportProgress?: boolean;
            responseType?: 'json';
            withCredentials?: boolean;
        },
    ): Observable<any> {
        this.begin();
        return of(null).pipe(
            tap(() => this.begin()),
            switchMap(() => this.http.get(urloptions)),
            tap(() => this.end()),
            catchError(res => {
                this.end();
                return throwError(res);
            }),
        );
    }

    /**
   * DELETE:返回一个 `any` 类型
   */
    delete(
        urlstring,
        params?: any,
        options?: {
            headers?: _HttpHeaders;
            observe?: 'body';
            reportProgress?: boolean;
            responseType?: 'json';
            withCredentials?: boolean;
        },
    ): Observable<any> {
        this.begin();
        return of(null).pipe(
            tap(() => this.begin()),
            switchMap(() => this.http.get(urloptions)),
            tap(() => this.end()),
            catchError(res => {
                this.end();
                return throwError(res);
            }),
        );
    }

    /**
   * PATCH:返回一个 `any` 类型
   */
    patch(
        urlstring,
        body?: any,
        params?: any,
        options?: {
            headers?: _HttpHeaders;
            observe?: 'body';
            reportProgress?: boolean;
            responseType?: 'json';
            withCredentials?: boolean;
        },
    ): Observable<any> {
        this.begin();
        return of(null).pipe(
            tap(() => this.begin()),
            switchMap(() => this.http.get(urloptions)),
            tap(() => this.end()),
            catchError(res => {
                this.end();
                return throwError(res);
            }),
        );
    }

    /**
   * PUT:返回一个 `any` 类型
   */
    put(
        urlstring,
        body?: any,
        params?: any,
        options?: {
            headers?: _HttpHeaders;
            observe?: 'body';
            reportProgress?: boolean;
            responseType?: 'json';
            withCredentials?: boolean;
        },
    ): Observable<any> {
        this.begin();
        return of(null).pipe(
            tap(() => this.begin()),
            switchMap(() => this.http.get(urloptions)),
            tap(() => this.end()),
            catchError(res => {
                this.end();
                return throwError(res);
            }),
        );
    }

}


评价