Angular8项目二次封装思路，基于httpClient实现接口统一配置和mock

本文链接：https://blog.csdn.net/sherleysong/article/details/117745920

本文探讨了在Angular8项目中使用httpClient遇到的问题，提出通过创建统一配置文件和二次封装服务来解决。实现了接口header的自动处理和get请求参数拼接。在开发阶段，通过配置实现Mock功能，拦截接口调用本地json数据。文章提供了开源代码示例，并详细解释了api-list、业务代码和mock数据的组织结构及封装方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 项目中使用httpClient的问题和解决思路

问题1：接口超多，每个接口又有很多一模一样的配置，比如header里需要写token；get请求参数需要额外拼接；接口散落在各个模块的业务代码中。

思路：抽取统一配置文件，用json格式维护全部接口。同时基于httpClient创建自己的服务，实现header的统一处理（如token）和get请求的参数拼接。

问题2：开发调试过程中，数据不稳定，本地调试可以直接调取本地文件进行前端开发。

思路：利用配置项，实现类似Mock的功能，有需要的接口拦截，并调用本地json。

代码开源：https://github.com/sherleysong/ng-httpclient-project

2. 项目说明

由于需要配合项目讲解代码，这里以Angular8的最基础项目为例

  ng new ng-httpclient-project --minimal

router选yes（仅便于展示）；样式随便。

目录结构说明：
首先pages目录用于存放业务代码，二级目录product存放产品模块的业务代码。
其次service目录存放公共服务代码，该项目最精简，只保留了data-http封装代码，以及项目全部的api接口列表文件。
最后mock的json文件存在assets目录下。
在这里插入图片描述

3. 代码讲解

api-list

用这一个文件，管理全项目的所有接口，便于维护。

export const apiList = {
   
  // mock数据
  getProductList: {
   
    url: "/product/list",
    method: "get",
    description: "get product list",
    mock: true,
    mockURL: "./assets/mock/productList.json",
  },
  // 真实接口
  addProduct: {
   
    url: "/product/add",
    method: "post",
    description: "save product info",
    mock: false,
    mockURL: "",
  },
}

product业务代码

引入二次封装的服务并调用，httpClient返回的可观察对象，用subscribe接。

import {
    Component, OnInit } from '@angular/core';
import {
    dataHttpService } from "./../../service/data-http.service"

@Component({
   
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.less']