#yyds干货盘点#前端架构api层的封装

关键词：

上午好，今天为大家分享下个人对于前端​​API​​​层架构的一点经验和看法。架构设计是一条永远走不完的路，没有最好，只有更好。这个道理适用于软件设计的各个场景，前端​​API​​​层的设计也不例外，如果您觉得在调用接口时还存在诸多槽点，那就说明您的接口层架构还待优化。今天我以​​vue + axios​​为例，为大家梳理下我的一些经历和设想。

axios直接调用

直接调用​​axios​​，真的痛苦，每个调用的地方都要进行响应状态的判断，冗余代码超级多。

import axios from "axios"

axios.get(/usercenter/user/page?pageNo=1&pageSize=10).then(res => 
    const data = res.data
    // 判断请求状态，success字段为true代表成功，视前后端约束而定
    if (data.success) 
        // 结果成功后的业务代码
     else 
        // 结果失败后的业务代码
    
)

看起来确实很难受，每调用一次接口，就有这么多重复的工作！

​为了解决直接调用​​​​axios​​​​​的痛点，我们一般会利用​​​​Promise​​​​对​​​​axios​​​​二次封装，对接口响应状态进行集中判断，对外暴露​​​​get​​​​, ​​​​post​​​​, ​​​​put​​​​, ​​​​delete​​​​等​​​​http​​​​方法。

​

axios二次封装

import axios from "axios"
import router from "@/router"
import  BASE_URL  from "@/router/base-url"
import  errorMsg  from "@/utils/msg";
import  stringify  from "@/utils/helper";
// 创建axios实例
const v3api = axios.create(
    baseURL: process.env.BASE_API,
    timeout: 10000
);
// axios实例默认配置
v3api.defaults.headers.common[Content-Type] = application/x-www-form-urlencoded;
v3api.defaults.transformRequest = data => 
    return stringify(data)

// 返回状态拦截，进行状态的集中判断
v3api.interceptors.response.use(
    response => 
        const res = response.data;
        if (res.success) 
            return Promise.resolve(res)
         else 
            // 内部错误码处理
            if (res.code === 1401) 
                errorMsg(res.message || 登录已过期，请重新登录！)
                router.replace( path: `$BASE_URL/login` )
             else 
                // 默认的错误提示
                errorMsg(res.message || 网络异常，请稍后重试！)
            
            return Promise.reject(res);
        
    ,
    error => 
        if (/timeout\\sof\\s\\d+ms\\sexceeded/.test(error.message)) 
            // 超时
            errorMsg(网络出了点问题，请稍后重试！)
        
        if (error.response) 
            // http状态码判断
            switch (error.response.status) 
                // http status handler
                case 404:
                    errorMsg(请求的资源不存在！)
                    break
                case 500:
                    errorMsg(内部错误，请稍后重试！)
                    break
                case 503:
                    errorMsg(服务器正在维护，请稍等！)
                    break
            
        
        return Promise.reject(error.response)
    
)

// 处理get请求
const get = (url, params, config = ) => v3api.get(url,  ...config, params )
// 处理delete请求，为了防止和关键词delete冲突，方法名定义为deletes
const deletes = (url, params, config = ) => v3api.delete(url,  ...config, params )
// 处理post请求
const post = (url, params, config = ) => v3api.post(url, params, config)
// 处理put请求
const put = (url, params, config = ) => v3api.put(url, params, config)
export default 
    get,
    deletes,
    post,
    put

调用者不再判断请求状态

import api from "@/api";

methods: 
    getUserPageData() 
        api.get(/usercenter/user/page?pageNo=1&pageSize=10).then(res => 
            // 状态已经集中判断了，这里直接写成功的逻辑
            // 业务代码......
            const result = res.result;
        ).catch(res => 
            // 失败的情况写在catch中
        )
    

async/await改造

使用语义化的异步函数

methods: 
    async getUserPageData() 
        try 
           const res = await api.get(/usercenter/user/page?pageNo=1&pageSize=10) 
           // 业务代码......
           const  result  = res;
         catch(error) 
            // 失败的情况写在catch中
        
    

存在的问题

• 语义化程度有限，调用接口还是需要查询接口​​url​​
• 前端​​api​​层难以维护，如后端接口发生改动，前端每处都需要大改。
• 如果​​UI​​组件的数据模型与后端接口要求的数据结构存在差异，每处调用接口前都需要进行数据处理，抹平差异，比如​​[1,2,3]​​转​​1,2,3​​这种（当然，这只是最简单的一个例子）。这样如果数据处理不慎，调用者出错几率太高！
• 难以满足特殊化场景，举个例子，一个查询的场景，后端要求，如果输入了搜索关键词​​keyword​​，必须调用​​/user/search​​接口，如果没有输入关键词，只能调用​​/user/page​​接口。如果每个调用者都要判断是不是输入了关键词，再决定调用哪个接口，你觉得出错几率有多大，用起来烦不烦？
• 产品说，这些场景需要优化，默认按创建时间降序排序。我擦，又一个个改一遍？
• ......

那么怎么解决这些问题呢？请耐心接着看......

解决办法

我想到的方案是在底层封装和调用者之间再增加一层​​API​​​适配层（适配层，取量身定制之意），在适配层做统一处理，包括参数处理，请求头处理，特殊化处理等，提炼出更语义化的方法，让调用者“傻瓜式”调用，不再为了查找接口​​url​​​和处理数据结构这些重复的工作而烦恼，把​​ViewModel​​层绑定的数据模型直接丢给适配层统一处理。

对齐微服务架构

首先，为了对齐后端微服务架构，在前端将​​API​​调用分为三个模块。

├─api
    index.js axios底层封装
    ├─base  负责调用基础服务,basecenter
    ├─iot  负责调用物联网服务,iotcenter
    └─user  负责调用用户相关服务,usercenter
复制代码

每个模块下都定义了统一的微服务命名空间，例如​​/src/api/user/index.js​​：

export const namespace = usercenter;
复制代码

特性模块

每个功能特性都有独立的​​js​​模块，以角色管理相关接口为例，模块是​​/src/api/user/role.js​​

import api from ../index
import  paramsFilter  from "@/utils/helper";
import  namespace  from "./index"
const feature = role

// 添加角色
export const addRole = params => api.post(`/$namespace/$feature/add`, paramsFilter(params));
// 删除角色
export const deleteRole = id => api.deletes(`/$namespace/$feature/delete`,  id );
// 更新角色
export const updateRole = params => api.put(`/$namespace/$feature/update`, paramsFilter(params));
// 条件查询角色
export const findRoles = params => api.get(`/$namespace/$feature/find`, paramsFilter(params));
// 查询所有角色，不传参调用find接口代表查询所有角色
export const getAllRoles = () => findRoles();
// 获取角色详情
export const getRoleDetail = id => api.get(`/$namespace/$feature/detail`,  id );
// 分页查询角色
export const getRolePage = params => api.get(`/$namespace/$feature/page`, paramsFilter(params));
// 搜索角色
export const searchRole = params => params.keyword ? api.get(`/$namespace/$feature/search`, paramsFilter(params)) : getRolePage(params);
复制代码

• 每一条接口都根据RESTful风格，调用增（api.post）删（api.deletes）改（api.put）查（api.get）的底层方法，对外输出语义化方法。
• 调用的url由三部分组成，格式：/微服务命名空间/特性命名空间/方法
• 接口适配层函数命名规范：
• 新增：​​addXXX​​
• 删除：​​deleteXXX​​
• 更新：​​updateXXX​​
• 根据ID查询记录：​​getXXXDetail​​
• 条件查询一条记录：​​findOneXXX​​
• 条件查询：​​findXXXs​​
• 查询所有记录：​​getAllXXXs​​
• 分页查询：​​getXXXPage​​
• 搜索：​​searchXXX​​
• 其余个性化接口根据语义进行命名

解决问题

• 语义化程度更高，配合vscode的代码提示功能，用起来不要太爽！
• 迅速响应接口改动，适配层统一处理
• 集中进行数据处理（对于公用的数据处理，我们用paramsFilter解决，对于特殊的情况，再另行处理），调用者安心做业务即可
• 满足特殊场景，佛系应对后端和产品朋友

• 针对上节提到的关键字查询场景，我们在适配层通过在入参中判断是否有​​keyword​​字段，决定调用​​search​​还是​​page​​接口。对外我们只需暴露​​searchRole​​方法，调用者只需要调用​​searchRole​​方法即可，无需做其他考虑。

export const searchRole = params => params.keyword ? api.get(`/$namespace/$feature/search`, paramsFilter(params)) : getRolePage(params);
复制代码

• 针对产品突然加的排序需求，我们可以在适配层去做默认入参的处理。

首先，我们新建一个专门管理默认参数的​​js​​，如​​src/api/default-options.js​​

// 默认按创建时间降序的参数对象
export const SORT_BY_CREATETIME_OPTIONS = 
    sortField: createTime,
    // desc代表降序，asc是升序
    sortType: desc

复制代码

接着，我们在接口适配层做集中化处理

import api from ../index
import  SORT_BY_CREATETIME_OPTIONS  from "../default-options"
import  paramsFilter  from "@/utils/helper";
import  namespace  from "./index"
const feature = role

export const getRolePage = params => api.get(`/$namespace/$feature/page`, paramsFilter( ...SORT_BY_CREATETIME_OPTIONS, ...params ));
复制代码

​​SORT_BY_CREATETIME_OPTIONS​​放在前面，是为了满足如果出现其他排序需求，调用者传入的排序字段能覆盖掉默认参数。

#yyds干货盘点#saltshake安装配置

后台：​​https://github.com/saltshaker-plus/saltshaker_api​​前端：​​https://github.com/saltshaker-plus/saltshaker_frontend​​要求：Python>=3.6Mysql>=5.7.8（支持Json的Mysql都可以）Redis（无版本要求）RabbitMQ（无版本要求）Python软 查看详情

#yyds干货盘点#前端内存泄露问题

内存泄露指内存被占用且没有及时释放内存泄露越多，计算机剩余的内存就越小，此时越容易发生内存溢出常见的内存泄露情况：意外的全局变量未及时清理计时器或回调函数闭包functionx()a=10;//或者this.a=10;//或者window.a=10;x();//产... 查看详情

#yyds干货盘点#react前端优化小结笔记

编译阶段的优化主要是webpack开发环境时重复构建更快1.include缩小编译的范围rules:[test:/\\.js$/,use:[loader:babel-loader,options:cacheDirectory:true,persets:[@babel/preset-react],plugins:[@babel/plugin-proposal-class-properties]],i 查看详情

#yyds干货盘点#前端存储之indexdb

​​localStorage​​​是前端本地存储的一种，其容量一般在​​5M-10M​​左右，用来缓存一些简单的数据基本够用，毕竟定位也不是大数据量的存储。在某些场景下​​localStorage​​的容量就会有点捉襟见肘，其实浏览器是有提... 查看详情

#yyds干货盘点#前端图片预加载

上一篇文章讲了图片懒加载的两种方法，今天再来讲讲图片预加载。用css和JavaScript实现预加载实现预加载图片有很多方法，包括使用css、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高... 查看详情

微服务架构|8.1使用springcloudstream整合apachekafka#yyds干货盘点#

@[TOC](8.1使用SpringCloudStream整合Apachekafka)前言参考资料：《SpringMicroservicesinAction》《SpringCloudAlibaba微服务原理与实战》《B站尚硅谷SpringCloud框架开发教程周阳》SpringCloudStream是一个由注解驱动的框架，它允许开发人员在Spring应用程... 查看详情

#yyds干货盘点#前端图片懒加载

前端性能优化里有图片的加载，有懒加载和预加载。那么什么是懒加载呢？懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。有的网站图片很多，而如果一上来就加载... 查看详情

#yyds干货盘点#前端迪米特法则

迪米特法则(LawofDemeter)又叫做最少知识原则，也就是说，一个对象应当对其他对象尽可能少的了解。不和陌生人说话。英文简写为:LoD。迪米特法则的目的在于降低类之间的耦合。由于每个类尽量减少对其他类的依赖，因此，很容... 查看详情

#yyds干货盘点#前端工作的一点思考

为什么选择前端？一个简单的问题，但大部分人却说不清楚，我当初也是误打误撞进入了这个行业，不知不觉就干了快七年。漫无目的的做一件事情是很难做好的，也是痛苦的，尤其是这件事还占据了我们最多的时间，所以我们... 查看详情

#yyds干货盘点#歌谣学前端之箭头函数1

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情

#yyds干货盘点#歌谣学前端之箭头函数2

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很... 查看详情

#yyds干货盘点#组件化漫谈

今天前端生态里面，​​React​​、​​Angular​​和​​Vue​​三分天下。虽然这三个框架的定位各有不同，但是它们有一个核心的共同点，那就是提供了组件化的能力。​​W3C​​也有​​WebComponent​​的相关草案，也是为了... 查看详情

#yyds干货盘点#前端不同的渲染技术的区别和联系

前端可用的渲染技术有html+css、canvas、svg、webgl，我们会综合运用这些技术来绘制页面。有没有想过这些技术有什么区别和联系，它们和图形学有什么关系呢？本文我们就来谈一下网页渲染技术的计算机理论基础。渲染的理论基... 查看详情

#yyds干货盘点#愚公系列2022年11月微信小程序-template的使用(代码片段)

一、template的概念template模板顾名思义就是页面的复用，前端可以理解成组件中通用页面的封装，后端可以理解成时函数的封装，主要的作用就是服用减少代码冗余比如下面几个场景：首页需要显示轮播，分类页面也需要显示轮... 查看详情

#yyds干货盘点#java基础-面向对象的三大特性

Java基础-面向对象三大特性封装利用抽象数据类型将数据和基于数据的操作封装在一起，使其构成一个不可分割的独立实体。数据被保护在抽象数据类型的内部，尽可能地隐藏内部的细节，只保留一些对外接口使之与外部发生联... 查看详情

#yyds干货盘点react工作记录二十一antdesign封装一个弹框组件

 目录​​前言​​​​导语​​​​代码部分​​​​引入组件​​​​运行结果​​​​总结​​前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越... 查看详情

#yyds干货盘点#react工作记录六十七前端实现复制文字操作

 前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一... 查看详情

#yyds干货盘点#uniapp通过命令行打包

如果有需要，就按照步骤来实现npminstall-gcross-env之后就可以用各种命令了#切换node版本(不一定需要)nvmusev16.2.0#进入HBuild的cli目录#uni-app打包相关命令都封装在cli里面了cd/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/#指定项目... 查看详情