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']