vue封装请求、合并js、合并多个js

news/2024/5/28 4:05:06/ 标签: javascript, vue.js, 前端

vue封装请求、合并js、合并多个js

作为一个后端开发,写前端时发现,每次导入api接口都会有一堆代码,像下面这样:

import {footprintList, footprintDelete} from '@/api/userApi.js'
import {addressList} from '@/api/userApi.js'
import {getSku} from '@/api/goodsApi.js'// .. 调用方法

要核对名称等一些列操作,我就很苦恼,为什么不能一个次导入,随意调用?(一次编译,到处运行)

参考网上,实现一次导入,任意模块调用。实现了下面的方案:

转自:https://lingkang.top/archives/he-bing-duo-ge-js
转自:https://lingkang.top/archives/he-bing-duo-ge-js
转自:https://lingkang.top/archives/he-bing-duo-ge-js

1、编写一个公用的js --> allApi.js

allApi.js

import * as userApi from './userApi.js'
import * as goodsApi from './goodsApi.js'
import * as cartApi from './cartApi.js'
import * as collectionApi from './collectionApi.js'
import * as footprintApi from './footprintApi.js'export default {userApi,goodsApi,cartApi,collectionApi,footprintApi,
}

例如footprintApi.js中的内容

import request from './request.js'// 浏览足迹------------------------------------
export function footprintAdd(id) {return request.post(("/api/user/footprint/add"), {id})
}export function footprintList(param) {return request.get('/api/user/footprint/list', {params: param})
}export function footprintDelete(id) {return request.post('/api/user/footprint/delete', {id})
}

2、调用聚合js中的方法

通过调用 allApi.模块API.模块的方法 实现接口聚合

<script setup>
import allApi from '@/api/allApi.js'// ....
const onDel = () => {let ids = []selectedList.value.forEach(e => ids.push(e.id))// 调用allApi.cartApi.deleteCart(ids).then(res => {showToast('操作成功')loadData()})
}// ..
const loadData = () => {allApi.collectionApi.collectionList(param.value).then(res => {list.value = list.value.concat(res.data)// 数据全部加载完成if (list.value.length >= res.total) {finished.value = true;}}).finally(() => {loading.value = false;})
}</script>

项目截图

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


http://www.ppmy.cn/news/1434633.html

相关文章

【软件工程与实践】(第四版)第6章习题答案详解

第6章 一、填空题二、选择题三、简答题四、实践题 一、填空题 &#xff08;1&#xff09; 编程语言是人与计算机交流的 工具。 &#xff08;2&#xff09; 从语言层次上&#xff0c;编程语言可以分为 低级语言 和 高级语言 两种类型。 &#xff08;3&#xff09; 1960年代出现…

设计模式-创建型-抽象工厂模式-Abstract Factory

UML类图 工厂接口类 public interface ProductFactory {Phone phoneProduct();//生产手机Router routerProduct();//生产路由器 } 小米工厂实现类 public class XiaomiFactoryImpl implements ProductFactory {Overridepublic Phone phoneProduct() {return new XiaomiPhone…

聊聊linux的文件缓存

序 本文主要研究一下linux的文件缓存 文件缓存 linux使用page cache来缓存最近读取的文件&#xff0c;也有目录结构(dcache: Directory Entry Cache)缓存及inode缓存&#xff0c;它们都使用了LRU算法来管理这些page及dentries cache vmstat ## vmstat procs -----------me…

【Python打包exe文件】

Python打包exe文件 ■ Python打包exe文件■■■ ■ Python打包exe文件 需求&#xff1a; 自己写的Python代码&#xff0c;在对方电脑里没有安装py环境无法运行&#xff0c;怎么办&#xff1f; 答&#xff1a;打包成exe文件发送对方就能运行。 首先自己写的python代码自己要能…

JetBrains PhpStorm v2024.1 安装教程 (PHP集成开发IDE)

前言 PhpStorm是由JetBrains推出的一款轻量级集成开发环境&#xff0c;专为PHP开发者而设计。该软件融合了智能的HTML/CSS/JavaScript/PHP编辑器、代码质量分析工具、版本控制系统集成&#xff08;包括SVN和GIT&#xff09;、调试和测试等功能。除此之外&#xff0c;PhpStorm还…

第二期书生浦语大模型训练营第四次笔记

大模型微调技术 大模型微调是一种通过在预训练模型的基础上&#xff0c;有针对性地微调部分参数以适应特定任务需求的方法。 微调预训练模型的方法 微调所有层&#xff1a;将预训练模型的所有层都参与微调&#xff0c;以适应新的任务。 微调顶层&#xff1a;只微调预训练模型…

基于百度文心大模型全面重构,小度正式推出AI原生操作系统DuerOS X

4月16日&#xff0c;以“创造未来”为主题的2024百度Create AI开发者大会在深圳举办。百度集团副总裁、小度科技CEO李莹正式发布了小度新一代操作系统DuerOS X&#xff0c;该操作系统是小度基于百度文心大模型推出的全球首个AI原生操作系统。李莹表示&#xff1a;“作为⽂⼼⼤模…

IDEA中添加servlet模板

官方代码链接 #if (${PACKAGE_NAME} && ${PACKAGE_NAME} ! "")package ${PACKAGE_NAME};#end #parse("File Header.java")import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.io.IOException…

C++:类与对象完结篇

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习《C&#xff1a;运算符重载》&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 文章目录 重新认识构造函数1.初始化列表2.explicit关键字 static成员1.sta…

Elasticsearch进阶篇(三):ik分词器的使用与项目应用

ik分词器的使用 一、下载并安装1.1 已有作者编译后的包文件1.2 只有源代码的版本1.3 安装ik分词插件 二、ik分词器的模式2.1 ik_smart演示2.2 ik_max_word演示2.3 standard演示 三、ik分词器在项目中的使用四、ik配置文件4.1 配置文件的说明4.2 自定义词库 五、参考链接 一、下…

轻量级SQLite可视化工具Sqliteviz

什么是 Sqliteviz &#xff1f; Sqliteviz 是一个单页面离线优先的渐进式网络应用&#xff08;PWA&#xff09;&#xff0c;用于完全客户端的 SQLite 数据库或 CSV 文件的可视化。 所谓完全客户端&#xff0c;就是您的数据库永远不会离开您的计算机。使用 sqliteviz&#xff0c…

11、【桥接模式】让将抽象和实现分离,使得它们可以独立地变化

你好&#xff0c;我是程序员雪球。 今天我们来聊聊 23 种设计模式中&#xff0c;一种常见的结构型模式&#xff0c;桥接模式。聊聊它的设计思想、应用场景&#xff0c;以及如何使用。 一、设计思想 桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#…

拿捏 顺序表(1)

目录 1. 顺序表的分类2. 顺序表实现3. 顺序表实现完整代码4. 总结 前言: 一天xxx想存储一组数据, 并且能够轻松的实现删除和增加, 此时数组大胆站出, 但是每次都需要遍历一遍数组, 来确定已经存储的元素个数, 太麻烦了, 于是迎来了顺序表不屑的调侃: 数组你不行啊… 顺序表是一…

mac qt android开发环境

1,安装Android Studio 下载 Android Studio 和应用工具 - Android 开发者 | Android Developers (google.cn)

求建筑高度(C语言)

一、N-S流程图&#xff1b; 二、运行结果&#xff1b; 三、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;float x, y;//提示用户&#xff1b;printf("请输入x y坐标的值&#xff1a;");//…

HarmonyOS NEXT星河版之实战商城App瀑布流(含加载更多)

文章目录 一、目标二、开撸2.1 声明商品对象2.2 mock数据2.3 主页面2.4 加载更多2.5 完整代码 三、小结 一、目标 二、开撸 2.1 声明商品对象 export interface GoodsItem {title: stringimageUrl: string }2.2 mock数据 export const mockGoodsList: GoodsItem[] [{title:…

Android判断应用是否在前台运行

Android判断应用是否在前台运行 /*** Android判断应用是否在前台运行* 0&#xff1a;异常&#xff1b;1&#xff1a;前台&#xff1b;2&#xff1a;后台&#xff1b;3&#xff1a;未运行&#xff1b;*/private int isFrontShow(Context context) {if (context null) {ret…

动力学重构/微分方程参数拟合 - 基于模型

这一篇文章&#xff0c;主要是给非线性动力学&#xff0c;对微分方程模型参数拟合感兴趣的朋友写的。笼统的来说&#xff0c;这与混沌系统的预测有关&#xff1b;传统的机器学习的模式识别虽然也会谈论预测结果&#xff0c;但他们一般不会涉及连续的预测。这里我们考虑的是&…

Linux读写文件

前言 学习了文件系统&#xff0c;就能理解为什么说Linux下一切皆文件。 语言层面的操作 在c语言的学习中我们可以使用fopen()函数对文件进行操作。 int main() {//FILE * fp fopen("./log.txt", "w");//FILE * fp fopen("./log.txt", "…

Music Tag Editor Pro for Mac:音乐标签编辑软件

Music Tag Editor Pro for Mac是一款功能强大的音乐标签编辑软件&#xff0c;专为Mac用户设计&#xff0c;旨在帮助用户轻松管理音乐库中的标签信息。 Music Tag Editor Pro for Mac v8.0.0中文激活版下载 该软件支持多种音频格式&#xff0c;包括MP3、M4A、FLAC、APE等&#x…