扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >axios接口管理优化操作详解
  • 642

0
分享到

axios接口管理优化操作详解

axios接口管理axios接口管理优化 2022-12-15 18:12:37 642人浏览 独家记忆
摘要

目录强化功能接口文件写法简化任务调度、Loading调度提示信息自由化总结强化功能 本文针对中大型的后台项目的接口模块优化，在不影响项目正常运行的前提下，增量更新。 接口文件写法简

强化功能

本文针对中大型的后台项目的接口模块优化，在不影响项目正常运行的前提下，增量更新。

  • 接口文件写法简化（接口模块半自动化生成）
  • 任务调度、Loading调度（接口层面的防抖兜底，多个接口共用一个loading，防止闪烁）
  • 接口提示自由化（提示消息可由前端控制，也可以由后端控制）

接口文件写法简化

对于一些中后台模块的接口，基本上都是增删改查以及审核流的一些功能(其他特殊接口暂且不谈)。如果后端接口足够规范的话，大概就是下面这个情形

import request from "@/utils/request";
// 销售退货列表
export function getSalesReturnList(data) {
  return request({
    url: "/sales_return/list",
    method: "post",
    data,
  });
}
// 保存销售退货
export function saveSalesReturn(data) {
  return request({
    url: "/sales_return/save",
    method: "post",
    data,
  });
}
// 根据Id获取销售退货
export function getSalesReturn(query) {
  return request({
    url: "/sales_return/get",
    method: "get",
    params: query,
  });
}
// 根据Id删除销售退货
export function deleteSalesReturn(data) {
  return request({
    url: "/sales_return/delete",
    method: "post",
    data,
  });
}
// 提交销售退货审核
export function submitSalesReturn(data) {
  return request({
    url: "/sales_return/submit",
    method: "post",
    data,
  });
}
// 审核销售退货
export function auditSalesReturn(data) {
  return request({
    url: "/sales_return/audit",
    method: "post",
    data,
  });
}
// 撤审销售退货
export function revokeAuditSalesReturn(data) {
  return request({
    url: "/sales_return/withdraw",
    method: "post",
    data,
  });
}
// 审核拒绝销售退货
export function rejectSalesReturn(data) {
  return request({
    url: "/sales_return/reject",
    method: "post",
    data,
  });
}
// 作废销售退货
export function discardSalesReturn(data) {
  return request({
    url: "/sales_return/discard",
    method: "post",
    data,
  });
}

我觉得这个也太重复了，而且接口函数命名太麻烦了，要让团队规范起来比较困难。能不能自动生成了，命名也帮忙处理了，这样这种接口文件岂不是更加规范。

接下来想想办法

假设如上，一个单据模块的通常来说有九个接口方法，增删改查，提交、作废、审核、撤审、拒绝。他们的 url，前面的 sales_return 拼接是固定的，不同的就是后面标识功能的路径标识。另外就是，method 分为 post 和 get 方法。

我们把这九个接口，看成是一个 9 位二进制上的 9 个位，1 代表存在，0 代表不存在。

我们可以创建一个 map 文件来做构建准备（如下）

export const apiEnum = {
  // 查列表  2^0
  1: {
    name: "list",//接口名称
    type: "post",//接口方式
  },
  // 查详情  2^1
  2: {
    name: "get",
    type: "get",
    loading: true,//是否需要loading调度、防抖
  },
  // 删列表 2^2
  4: {
    name: "delete",
    type: "post",
  },
  // 保存 或者 保存且提交  2^3
  8: {
    name: "save",
    type: "post",
    loading: true,
  },
  // 提交  2^4
  16: {
    name: "submit",
    type: "post",
    loading: true,
  },
  // 审核  2^5
  32: {
    name: "audit",
    type: "post",
  },
  // 撤审  2^6
  64: {
    name: "withdraw",
    type: "post",
  },
  // 拒绝  2^7
  128: {
    name: "reject",
    type: "post",
  },
  // 作废  2^7
  256: {
    name: "discard",
    type: "post",
  },
};
export const apiFuncModule = {
  // 全部
  COMMON: 511,
  // 增删改查
  CURD: 15,
};

当我传 1 的时候，九位为000000001,代表只有一个查接口。当我传 15 的时候，九位为000001111,代表拥有增删改查四个接口。以此类推。

接下就是完成处理函数，完成上面的功能（如下）

import request from "@/utils/request";
import { apiEnum, apiFuncModule } from "@/enum/baseModule/apiEnum";
function useApi(moduleName, code = 511) {
  let apiMap = {};
  for (let key in apiEnum) {
    if ((key & code) == key) {
      let obj = apiEnum[key];
   //可以按自己习惯来对接口函数命名
      let apiName = "api_" + obj.name;
      apiMap[apiName] = (data) => {
        return request({
          url: `/${moduleName}/${obj.name}`,
          method: obj.type,
          [obj.type == "get" ? "params" : "data"]: data,
          loading: obj.loading,
        });
      };
    }
  }
  return apiMap;
}
export { useApi, apiFuncModule as apiType };

完成以上步骤，我们的接口文件就可以这样写了,这样九个接口就写完了。而且一目了然，如需修改，只需要调整传参就行了。

import { useApi } from "@/utils/system/apiGenPlugin";
//code可以不传 ，默认为511
export const API = useApi("sales_return");
//若有其他特殊接口 兼容原始写法 互不影响
export function xxxxx(data) {
    ...
}

使用方式

//API集中管理
import { API as SalesReturn } from "@/api/workApi/sale/return";
const {api_save,api_delete,api_get,api_list,api_audit,api_withdraw,api_discard,api_submit,api_reject} = SalesReturn
//单独使用
import { useApi } from "@/utils/system/apiGenPlugin";
const {api_save,api_delete,api_get,api_list,api_audit,api_withdraw,api_discard,api_submit,api_reject} = useApi('sales_return')
  • 增 SalesReturn.api_save
  • 删 SalesReturn.api_delete
  • 改 SalesReturn.api_get
  • 查 SalesReturn.api_list
  • 审核 SalesReturn.api_audit
  • 撤审 SalesReturn.api_withdraw
  • 作废 SalesReturn.api_discard
  • 提交 SalesReturn.api_submit
  • 拒绝 SalesReturn.api_reject

任务调度、Loading调度

实际开发中，我们可能会有对接口调用做一些处理

  • 对提交事件进行防抖处理，防止重复提交。
  • 加载某些重要资源的时候，希望有个loading效果，来优化用户体验。
  • 让多个需要loading效果的接口，共用同一个loading，防止页面闪烁。

这些功能单独处理起来就显得很麻烦了，而且每个人的写法不一样，后期维护成本就更难。

废话不多说，直接贴代码

接口调度类

import { Loading } from "element-ui";
class RequestLock {
  // Loading 实例
  L_instance = null;
  // 接口map
  reqMap = new Map();
  // 最近一次调用接口时间戳
  timestamp = 0;
  constructor(timeout = 500) {
    // 过渡时间
    this.timeout = timeout;
  }
  // 创建任务
  put = (id) => {
    if (this.reqMap.has(id)) return false;
    this._put(id);
    return true;
  };
  _put = (id) => {
    this.timestamp = new Date().getTime();
    this.reqMap.set(id, true);
      //开启loading
    this.L_instance = Loading.service({
      fullscreen: true,
      background: "rgba(255, 255, 255, 0.1)",
      lock: true,
    });
  };
  // 移除任务
  del = (id) => {
    if (this.reqMap.has(id)) {
      this.reqMap.delete(id);
      if (this.reqMap.size == 0) {
        this._closeLoading();
      }
    }
  };
  // 清空所有的任务
  clearTask = () => {
    this.reqMap.clear();
    this.L_instance.close();
  };
    //平滑关闭loading
  _closeLoading = () => {
    let _timestamp = new Date().getTime();
    let settime = _timestamp - this.timestamp;
    if (settime > this.timeout) {
      this.L_instance?.close();
    } else {
      setTimeout(() => {
        this.L_instance?.close();
      }, this.timeout - settime);
    }
  };
}
export default RequestLock;

在axiOS里的使用

这个是增量优化，在不影响以前代码的条件下，添加功能

import { RequestLock } from "@/class/lock";
let loadLock = new RequestLock(500);
//请求拦截
service.interceptors.request.use(
  (config) => {
      ...
      //如果配置中有loading 开启调度
    if (config.loading) {
      if (!loadLock.put(config.url)) {
        return Promise.reject(new Error("repeat request！"));
      }
    }
      ...
    return config;
  },
  (error) => {
      ...
      //如果有错误请求，中止当前调度任务，并清空
    loadLock.clearTask();
      ...
    return Promise.reject(error);
  }
);
//响应拦截
service.interceptors.response.use(
  (response) => {
    ...
    //检查
    response.config.loading && loadLock.del(response.config.url);
    ...
  },
  (error) => {
    loadLock.clearTask();
    return Promise.reject(error);
  }
);

接口文件书写

// 根据Id获取销售退货
export function getSalesReturn(query) {
  return request({
    url: "/sales_return/get",
    method: "get",
    params: query,
    //在这里配置loading为true，开启
    loading:true
  });
}

提示信息自由化

有时候当我删除一条数据，需要有个弹框提示删除是否成功。通常我们会在接口成功回调的时候加上这个功能。需要判断状态，来显示提示框的描述和颜色。另一方面，有时候删除一条数据，业务需求提示不单单是简单的“删除成功！”，还可能需要其他的附加提示。比如“删除单据xxx成功，请及时处理xxxx！”。这种需求没什么难度，但是有沟通成本和维护成本。业务有一些变化就需要修改。

另一方面，后端对系统的业务逻辑更加贴近，提示功能交给后端更加合理。当然，前端也需要保留这个功能，去兼容某些需求。

import { Message } from "element-ui";
export function responseMsgHandle(res) {
    //这里需要后端响应数据格式的配合，MsgType表示提示状态，Msg表示提示描述
  let { MsgType, Msg } = res;
  if (["success", "warning", "error"].includes(MsgType)) {
    Message({
      message: Msg,
      type: MsgType,
      duration: 5 * 1000,
    });
  }
}

使用

import { responseMsgHandle } from "@/utils";
//响应拦截
service.interceptors.response.use(
  (response) => {
    ...
    const res = response.data;
    responseMsgHandle(res);
    ...
  },
  (error) => {
      ...
    responseMsgHandle({
        MsgType:"error",
        Msg:error.message,
    });
      ...
    return Promise.reject(error);
  }
);

总结

以上三个简单的优化方案，可以组合使用，也可以单独使用。可以根据自己的实际项目需求，进行改造使用。

基本上能解决很大一部分的重复劳动，还能减少维护成本。

以上就是axios接口管理优化操作详解的详细内容，更多关于axios 接口管理的资料请关注编程网其它相关文章！

--结束END--

本文标题: axios接口管理优化操作详解

本文链接: https://lsjlt.com/news/174978.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • axios接口管理优化操作详解
    目录强化功能接口文件写法简化任务调度、Loading调度提示信息自由化总结强化功能 本文针对中大型的后台项目的接口模块优化，在不影响项目正常运行的前提下，增量更新。 接口文件写法简...
    99+
    2022-12-15
    axios 接口管理 axios 接口管理优化
  • Vue中Axios的封装与接口管理详解
    目录一、 Axios 的封装安装 Axios引入接口管理统一暴露接口在组件中使用补充：封装get方法和post方法总结一、 Axios 的封装 在 Vue 项目中，和后台进行数据交互...
    99+
    2024-04-02
  • 基于Typescript与Axios的接口请求管理详解
    目录思路请求拦截 响应拦截 使用httpClient.ts定义请求 在组件中请求接口 总结本文主要介绍基于TS和AXIOS的接口请求封装 思路 请求拦截 在请求头添加一些参...
    99+
    2024-04-02
  • React项目中axios的封装与API接口的管理详解
    目录前言 安装 引入 环境的切换 请求拦截 响应拦截 api的统一管理 总结前言 在react项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的...
    99+
    2024-04-02
  • vue中Axios的封装和API接口的管理示例详解
    目录一、axios的封装安装引入环境的切换设置请求超时post请求头的设置请求拦截响应的拦截封装get方法和post方法axios的封装基本就完成了，下面再简单说下api的统一管理。...
    99+
    2024-04-02
  • 如何理解Python接口优化
    这篇文章主要讲解了“如何理解Python接口优化”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何理解Python接口优化”吧！背景我们负责的一个业务平台，有次在发现设置页面的加载特别特别地...
    99+
    2023-06-15
  • mysql事务管理操作详解
    本文实例讲述了mysql事务管理操作。分享给大家供大家参考，具体如下： 本文内容： 什么是事务管理 事务管理操作 回滚点 默认的事务管理 首发日期：2018-04-18 什么是事务管理： ...
    99+
    2022-05-23
    mysql 事务管理
  • 优化线程管理：解锁操作系统的全部潜力
    线程创建 使用线程池而不是动态创建和销毁线程。线程池可以重复利用现有线程，减少线程创建和销毁开销。 优化线程池大小。线程池应足够大以处理峰值负载，但又足够小以避免资源争用。 线程调度 使用合适的调度策略。不同的应用程序对调度策略有不...
    99+
    2024-04-02
  • react项目优化配置的操作详解
    目录优化-配置CDN优化-路由懒加载 使用步骤代码实现查看效果优化-配置CDN 通过 craco 来修改 webpack 配置，从而实现 CDN 优化 yarn add ...
    99+
    2024-04-02
  • vue封装axios与api接口管理的完整步骤
    目录一、前言 二、axios封装步骤三、api接口统一管理总结一、前言  axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更...
    99+
    2024-04-02
  • MySQL数据操作管理示例详解
    目录一、查看表和查看表的定义二、删除表三、创建表四、表类型五、修改表六、完整性1、数据完整性2、使用约束实现数据完整性3、在数据表上添加约束4、删除约束七、添加数据八、修改数据九、删除数据十、SQL语句中的运算符算数运算...
    99+
    2024-04-02
  • C++资源管理操作方法详解
    目录以对象管理资源在资源管理类中小心copy行为在资源管理类中提供对原始资源的访问成对使用new和delete时要采用相同形式以独立语句将new对象置入智能指针以对象管理资源 cla...
    99+
    2024-04-02
  • Java接口异步调用优化技巧详解
    目录1，自己new线程或者线程池2，Sping Mvc3，修改单个任务为批量任务在日常项目中，我们经常采用多线程异步调用的方式来提高接口的响应时间。 在实际情况下，我们如何通过异步方...
    99+
    2023-05-19
    Java接口异步调用 Java接口调用 Java异步调用
  • Tomcat用户管理的优化配置详解
    目录tomcat用户管理配置tomcat优化一、tomcat中的三种运行模式之运行模式的优化二、tomcat执行器（线程池）的优化三、tomcat优化之禁用AJP连接器实现动静分离四...
    99+
    2024-04-02
  • C#目录和文件管理操作详解
    目录目录和文件管理Environment类例子DriveInfo类Path类目录管理文件管理总结目录和文件管理 在.NET框架中，与操作系统环境相关的类主要有两个: 一个是Envir...
    99+
    2022-11-13
    c# 当前目录文件 c文件管理代码 c# 文件管理
  • SpringBoot使用AOP记录接口操作日志详解
    SpringBoot 使用 AOP 记录接口操作日志，供大家参考，具体内容如下 一、AOP简介 1.什么是AOP AOP：Aspect Oriented Programming 面向...
    99+
    2024-04-02
  • 详解Laravel制作API接口
    需要注意的是：API有它的具体用途，我们应该清楚它是干啥的。访问API的时候应该输入什么。访问过API过后应该得到什么。 在开始设计API时，我们应该注意这8点。后续的开发计划就围绕...
    99+
    2024-04-02
  • Git接口如何优化Go语言中的NumPy数据管理？
    Git是一个分布式版本控制系统，而NumPy是Python的一个开源数学库，提供了高效的多维数组操作接口和数学函数库。在使用Git管理NumPy数据时，由于NumPy数据的规模较大，常常会遇到一些性能瓶颈。本文将介绍如何通过优化Git的接口...
    99+
    2023-07-01
    numy git 接口
  • 如何优化MySQL连接数管理
    如何优化MySQL连接数管理 MySQL 是一种流行的关系型数据库管理系统，广泛应用于各种网站和应用程序中。在实际的应用过程中，MySQL 连接数管理是一个非常重要的问题，尤其是在高并...
    99+
    2024-04-02
  • java接口性能从20s优化到500ms示例详解
    目录前言1. 案发现场2. 现状3. 第一次优化4. 第二次优化5. 第三次优化5.1 前端做分页5.2 分批调用接口前言 接口性能问题，对于从事后端开发的同学来说，是一个绕不开的话...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作