angular HtttClient 封装

在这里插入图片描述
在这里插入图片描述

import { Injectable } from '@angular/core';

import { environment } from '../../../environments/environment';
import {
  HttpHeaders,
  HttpClient,
  HttpErrorResponse
} from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { NzMessageService } from 'ng-zorro-antd';
import { Router } from '@angular/router';
import { throwError } from 'rxjs';

@Injectable()
export class LocalHttp {
  // 获取API地址前缀
  public localUrl = environment.localApi;
  // 默认请求头设置
  public HttpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };
  constructor(
    private http: HttpClient,
    private router: Router,
    private message: NzMessageService
  ) {}
  /**
   * post请求
   * @param reqdata 请求参数
   * @param url 请求地址
   * @param callBack 成功回调
   * @param errorBack 异常回调
   */

  post(reqdata: any, url: any, callBack: any, errorBack: any) {
    this._post(reqdata, url).subscribe(
      res => {
        if (callBack) {
          callBack(res);
        }
      },
      error => {
        if (errorBack) {
          errorBack(error);
        } else {
          this._error(error);
        }
      }
    );
  }

  /**
   * get 请求
   * @param url 请求地址
   * @param callBack 成功回调
   * @param errorBack 异常回调
   */
  get(url: any, callBack: any, errorBack: any) {
    this._get(url).subscribe(
      res => {
        if (callBack) {
          callBack(res);
        }
      },
      error => {
        if (errorBack) {
          errorBack(error);
        } else {
          this._error(error);
        }
      }
    );
  }
  /**
   * post请求 (自定义头可用该方法)
   * @param reqdata 请求参数
   * @param url 请求地址
   * @param headers 请求头
   */
  _post(reqdata, url: any, headers?) {
    let _url = this.localUrl + url;

    // 自定义请求头
    if (headers) {
      this._setHeader(headers);
    }

    return this.http.post(_url, reqdata, this.HttpOptions).pipe(
      // 网络异常 再次发送请求(会连发三次)
      // retry(3),
      catchError(this.handleError)
    );
  }

  /**
   * get请求
   * @param url 请求地址
   */
  _get(url) {
    let _url = this.localUrl + url;

    return this.http.get(_url).pipe(
      // 网络异常 再次发送请求(会连发三次)
      // retry(1),
      catchError(this.handleError)
    );
  }

  /**
   * 默认异常处理
   * @param err 异常对象体
   */
  _error(err) {
    let msg = err.error;
    this.message.create('error', msg['Message']);
    // 认证异常
    if (err.status == '401') {
      this.router.navigate(['login']);
    }
  }
  /**
   * 自定义请求头
   * @param headers 请求头
   */
  _setHeader(headers) {
    for (const key in headers) {
      if (headers.hasOwnProperty(key)) {
        const element = headers[key];
        this.HttpOptions.headers = this.HttpOptions.headers.set(key, element);
      }
    }
  }

  // 异常拦截
  private handleError(error: HttpErrorResponse) {
    console.log(error);

    // The backend returned an unsuccessful response code.
    // The response body may contain clues as to what went wrong,
    console.error(
      `Status code ${error.status}, ` +
        `ActionRequestID was: ${error.error.ActionRequestID}, ` +
        `Message was: ${error.error.Message}`
    );
    // return an observable with a user-facing error message
    return throwError(error);
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular公共组件封装的难点主要有以下几个方面: 1. 组件的可复用性:在封装组件时,需要考虑到组件的可复用性,即组件是否能够在不同的场景中使用,并且能够满足不同场景的需求。因此,在组件设计时需要考虑到组件的灵活性,将组件的功能进行细分,以便于在不同的场景中组合使用。 2. 组件的可配置性:封装组件时需要考虑到组件的可配置性,即能否通过配置参数来实现组件的不同样式和行为。因此,在组件设计时需要考虑到组件的可配置性,将组件的属性进行抽象和封装,以便于在不同场景中进行配置。 3. 组件的可扩展性:封装组件时需要考虑到组件的可扩展性,即能否通过继承或扩展来实现组件的不同功能。因此,在组件设计时需要考虑到组件的可扩展性,将组件的核心功能进行抽象和封装,以便于在需要扩展时进行继承或扩展。 4. 组件的可维护性:封装组件时需要考虑到组件的可维护性,即组件是否能够方便地进行维护和升级。因此,在组件设计时需要考虑到组件的结构和代码的可读性、可维护性,以便于在需要维护或升级时进行修改。 5. 组件的性能优化:封装组件时需要考虑到组件的性能优化,即组件是否能够在性能上满足项目的需求。因此,在组件设计时需要考虑到组件的渲染性能、响应性能以及数据处理性能等方面,以便于在需要优化时进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值