Vue3二次封装axios

在这里插入图片描述

官网: https://www.axios-http.cn/docs/interceptors

  • steps1:
    安装 npm install axios -s
  • steps2:
    /src/api/request.js 文件 >>> 拦截器
import axios from 'axios'
// 如果没用element-plus就不引入
import { ElMessage } from 'element-plus'const service = axios.create()
const NETWORK_ERROR = '网络错误...'
// 添加请求拦截器
service.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config},function (error) {// 对请求错误做些什么return Promise.reject(error)}
)// 添加响应拦截器
service.interceptors.response.use((res) => {const { code, data, msg } = res.dataif (code === 200) {return data} else {ElMessage.error(msg || NETWORK_ERROR)return Promise.reject(msg || NETWORK_ERROR)}
})function request(options) {options.method = options.method || 'get'return service(options)
}
export default request
  • steps3:
    /src/api/api.js 文件 >>> 接口
 /*** 整个项目api的统一管理*/
import request from './request'export default {/*** 首页左侧表格数据* @returns tableList*/getTableData() {return request({url: '/api/home/getTableData',method: 'get'})}
}
  • steps4:
    main.js 文件 >>> 引入接口文件

    import api from '@/api/api'const app = createApp(App)app.config.globalProperties.$api = api
    
  • 组件内调用

import { ref, onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const getTableData = async () => {const data = await proxy.$api.getTableData()tableData.value = data.tableData
}
onMounted(() => {getTableData()
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/875954.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【阿里云】阿里云产品go sdk封装调用demo

文章目录 代码Reference 代码 产品sdk封装函数: package apsaraimport ("github.com/aliyun/alibaba-cloud-sdk-go/services/ecs""github.com/aliyun/alibaba-cloud-sdk-go/services/nas""github.com/aliyun/alibaba-cloud-sdk-go/servi…

【区块链+绿色低碳】基于区块链的双碳能源纳管平台 | FISCO BCOS应用案例

在双碳战略的指导下,南京区块链产业应用协会牵头研发的双碳能源纳管平台,依托区块链、人工智能、云计算、 物联网、大数据、工业互联网与边缘计算等技术,对绿电追溯、需求侧响应、能源微网、源网荷储、隔墙用电、 碳排放权认证、额度计量、预…

循环队列的实现【C语言】

用数组实现循环队列 题目:622. 设计循环队列 - 力扣(LeetCode) 分析 循环队列,队列满则不能再插入数据,队列为空则不能再出数据。 多开一个空间方便区分队列为空和队列为满的情况。 如果要存K个数据只开K个空间&a…

【在排序数组中查找元素的第一个和最后一个位置】python刷题记录

R2-分治 有点easy的感觉,感觉能用哈希表 class Solution:def searchRange(self, nums: List[int], target: int) -> List[int]:nlen(nums)dictdefaultdict(list)#初始赋值哈希表,记录出现次数for num in nums:if not dict[num]:dict[num]1else:dict[…

vue2老项目中node-sass更换dart-sass

更换原因:node-sass经常会出现node版本问题,就很麻烦 卸载项目中的node-sass sass-loader npm uninstall sass-loader sass 安装dart-sas sass-loader 推荐安装sass1.26.2 sass-loader7.3.1 npm install sass-loader7.3.1 sass1.26.2 从新配置vue.…

TRON getAccount 返回参数详解

https://api.shasta.trongrid.io/wallet/getaccount 根据 getAccount 返回结果,这是一个包含了账户详细信息的 JSON 数据。让我们逐个解释每个字段的含义: address:账户地址,即该账户在 TRON 区块链上的唯一标识符。 balance&a…

1.1 openCv -- 介绍

OpenCV(开放源代码计算机视觉库:http://opencv.org)是一个开源库,包含了数百种计算机视觉算法。本文件描述了所谓的OpenCV 2.x API,这是一个本质上基于C++的API,与基于C的OpenCV 1.x API(C API已被弃用,并且自从OpenCV 2.4版本起不再使用“C”编译器进行测试)相对。 …

Django REST Framework(十三)视图集-GenericViewSet

Django REST Framework 中,ModelViewSet 和 ReadOnlyModelViewSet 提供了快速实现常见视图操作的便捷方法。它们分别继承自 GenericViewSet 并组合了多个 Mixin 类,使得视图的编写变得更加简单。 ModelViewSet ModelViewSet 继承自 GenericViewSet&…

Uniswap价格批量查询与ws订阅行情

Uniswap价格批量查询与ws订阅行情 由于 Uniswap V1 版本必须包含 ETH 所以两个 token 之间交换必须先换成 ETH 去中转效率很低已经弃用了 由于 V3 版本 CLMM 和 V4 版本的 DLMM 数学模型过于复杂,还是先从 AMM 模型的 V2 进行入门和学习 Uniswap 三种合约 Unisw…

【C++】C++应用案例-翻转数组

翻转数组,就是要把数组中元素的顺序全部反过来。比如一个数组{1,2,3,4,5,6,7,8},翻转之后就是{8,7,6,5,4,3,2,1}。 (1)另外创建数组,反向填入元素 数组是将元素按照顺序依次存放的,长度固定。所以如果想要…

Python——Pandas(第二讲)

文章目录 变量类型的转换Pandas 支持的数据类型在不同数据类型间转换 建立索引新建数据框时建立索引读入数据时建立索引指定某列为索引列将索引还原变量列 引用和修改索引引用索引修改索引修改索引名修改索引值 更新索引 Series的索引和切片DataFrame的索引和切片选择列按行列索…

基因组挖掘指导天然药物分子的发现-文献精读34

基因组挖掘指导天然药物分子的发现 摘要 天然产物是临床药物的主要来源,也是新药研发过程中先导化合物结构设计和优化的灵感源泉。但传统策略天然药源分子的发现却遭遇了瓶颈,新颖天然产物的数量逐渐无法满足现代药物开发的需求和应对全球多药耐药的威胁…

【每日刷题】Day86

【每日刷题】Day86 🥕个人主页:开敲🍉 🔥所属专栏:每日刷题🍍 🌼文章目录🌼 1. 118. 杨辉三角 - 力扣(LeetCode) 2. 数组中出现次数超过一半的数字_牛客题霸…

Java之 jvm

jvm之管理内存 程序计数器:当前线程所执行的字节码的行号指示器。程序计数器是唯一一个不会出现 OutOfMemoryError 的内存区域,它的生命周期随着线程的创建而创建,随着线程的结束而死亡。Java虚拟机栈 方法调用 一个方法调用都会有对应的栈帧…

概率论三大分布

目录 基本概念 卡方分布(χ分布): t分布: F分布: 延伸 卡方分布在哪些具体情况下最适合用于数据分析? t分布在大样本情况下的表现与正态分布相比如何? F分布在进行方差比较时与t分布的区…

加速下载,揭秘Internet Download Manager2024下载器的威力!

1. Internet Download Manager(IDM)是一款广受欢迎的下载管理软件,以其强大的下载加速功能和用户友好的界面著称。 IDM马丁正版下载如下: https://wm.makeding.com/iclk/?zoneid34275 idm最新绿色版一键安装包链接:抓紧保存以…

ISP 代理提供商:互联网安全的关键参与者

简介:互联网安全的演变态势 互联网改变了我们互动、工作和开展业务的方式,但也带来了与安全性和可访问性相关的重大挑战。在这个数字时代,互联网服务提供商 (ISP) 代理提供商在解决这些问题方面发挥着关键作用。他们提供的基本服务不仅可以增…

网络安全常见错误及解决办法(更新中)

# 开启代理,无法连接网络 把代理关掉 # 上一秒还在安装tree,下一秒xshell就连接不上了 —》sshd服务的key这个文件权限过高,跟装tree没有关系,装一个epel 源,epel-release​ 部分命令:chmod 600 /etc/ssh…

google、windows自带语音识别中英文等实时字幕使用

2、自带实时字幕 1)google浏览器自带 实时字幕 设置里可以设置: 有视频声音播放会弹出黑色文本框 下载其他语言包-比如中文: 测试 2)windows11 辅助功能 实时字幕 (直接快捷键打开:Win Ctrl L&#…

C# 实现条件变量

C# 进程通信系列 第一章 共享内存 第二章 条件变量(本章) 第三章 消息队列 文章目录 C# 进程通信系列前言一、关键实现1、用到的主要对象2、初始化区分创建和打开3、变量放到共享内存4、等待和释放逻辑 二、完整代码三、使用示例1、线程同步控制2、进程…