vue3+ts+vite axios封装请求并扩展入参

requset.ts

import axios, { AxiosResponse } from 'axios'
import { getToken, removeToken } from '@/utils/auth'// 创建axios实例
const service = axios.create({baseURL: '', // 所有的请求地址前缀部分(没有后端请求不用写)timeout: 60000 // 请求超时时间(毫秒)// withCredentials: true // 异步请求携带cookie
})// request拦截器
service.interceptors.request.use((config) => {const token = getToken() || ''// 如果你要去localStor获取token,(如果你有)if (token) {// 设置 token 请求头config.headers['csg-token'] = tokenconfig.headers['Authorization'] = 'Bearer ' + token}return config},(error) => {// 对请求错误做些什么return Promise.reject(error)}
)// response 拦截器
service.interceptors.response.use((response: AxiosResponse) => {// 对响应数据做点什么if (response.config.handleResponse) {return response} else {const { code, msg } = response.dataif (+code === 0) {return response.data} else if (+code === 59990001) {ElMessage.error('token过期请重新登陆!')return new Promise((_resolve, reject) => {reject(response.data)removeToken()})} else {ElMessage.error(response.data.msg)if (response.config.handleError) {return Promise.reject(response.data)} else {return Promise.reject(msg || '未知错误')}}}},(error) => {ElMessage.error(error.message)// 对响应错误做点什么return Promise.reject(error)}
)
export default service

api.ts文件进行接口请求

export function excelExportArrivalGoods(data: any) {return request({url: settings.taskPrefix + '/adm/arrivalGoods/excel-export',method: 'post',data,handleResponse: true,responseType: 'blob'})
}

会发现handleResponse参并不在axios提供的类型中

解决办法就是扩展 AxiosResponse接口参数在request.ts页面中加入

declare module 'axios' {export interface AxiosRequestConfig {handleResponse?: boolean // 可以根据需要设置为其他类型handleError?: boolean // 同理,根据需要设置// ... 其他自定义属性}
}

最后发现api也不报红了

完整的代码

import axios, { AxiosResponse } from 'axios'
import { getToken, removeToken } from '@/utils/auth'
// 扩展 AxiosRequestConfig 以包含 handleResponse 属性
declare module 'axios' {export interface AxiosRequestConfig {handleResponse?: boolean // 可以根据需要设置为其他类型handleError?: boolean // 同理,根据需要设置// ... 其他自定义属性}
}
// 创建axios实例
const service = axios.create({baseURL: '', // 所有的请求地址前缀部分(没有后端请求不用写)timeout: 60000 // 请求超时时间(毫秒)// withCredentials: true // 异步请求携带cookie
})// request拦截器
service.interceptors.request.use((config) => {const token = getToken() || ''// 如果你要去localStor获取token,(如果你有)if (token) {// 设置 token 请求头config.headers['csg-token'] = tokenconfig.headers['Authorization'] = 'Bearer ' + token}return config},(error) => {// 对请求错误做些什么return Promise.reject(error)}
)// response 拦截器
service.interceptors.response.use((response: AxiosResponse) => {// 对响应数据做点什么if (response.config.handleResponse) {return response} else {const { code, msg } = response.dataif (+code === 0) {return response.data} else if (+code === 59990001) {ElMessage.error('token过期请重新登陆!')return new Promise((_resolve, reject) => {reject(response.data)removeToken()})} else {ElMessage.error(response.data.msg)if (response.config.handleError) {return Promise.reject(response.data)} else {return Promise.reject(msg || '未知错误')}}}},(error) => {ElMessage.error(error.message)// 对响应错误做点什么return Promise.reject(error)}
)
export default service

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

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

相关文章

MySQL Workbench连接云服务器内网数据库

在项目上遇到一个问题,生产环境是Centos,分配了两台云服务器,一台应用服务,一台数据库服务,应用服务与数据库服务采用内网连接。我作为开发和运维方,有权限直接访问应用服务,但是数据库服务器需…

“低代码+平台”:驱动企业数字化转型与创新的新引擎

“低代码平台”作为一种新兴的软件开发范式,正逐渐成为企业快速响应市场变化、优化业务流程、提升数字化水平的重要手段。它的价值在于,将传统软件开发的复杂性大大降低,赋予了非技术人员或轻量级开发者快速构建应用的能力,并能灵…

Flink实战之FlinkSQL键设计对于数据保序的必要性

乱序数据处理对于实时ETL至关重要,处理不好将会导致数据不一致场景发生。对于数据乱序场景,一般工程师已知上游数据乱序会对本身消费数据产生影响,但不一定晓得的是,一个SQL本身也可能造成数据乱序,严格意义上的数据乱…

优思学院|APQP产品质量先期策划全面指南

产品质量先期策划(APQP)是什么? 产品质量先期策划(APQP)是针对复杂产品和供应链在推出新产品时存在的众多失败可能性,目的在于确保新产品或新流程能够获得客户满意的一种结构化过程。 在复杂的产品和供应…

硬盘哨兵Hard Disk Sentinel Pro V6.20.0.0 便携版

Hard Disk Sentinel 是一款功能强大的硬盘监控和分析软件,专为 Windows 用户设计。它可以实时监测硬盘驱动器(HDD)、固态硬盘(SSD)、混合硬盘(SSHD)、NVMe SSD、RAID 数组和外部 RAID 盒子的健康…

马斯克开源Grok-1

Grok-1是由马斯克AI创企xAI发布的第一代大语言模型,它以其巨大的参数量——高达3140亿,引起了全球范围内的广泛关注。这一参数量远超其他知名模型,如OpenAI的GPT-3.5,后者仅有1750亿参数。在2024年3月17日,马斯克宣布将…

一图看懂伙伴系统 Buddy System

伙伴系统是一种在操作系统内核中使用的管理物理内存的算法。它主要应用于现代计算机系统中,特别是在Linux等类Unix系统中。 基本思想:将物理内存分割成不同大小的块,每个块包含一定数量的连续页面。这些块的大小通常是2的幂次方,…

【GPT-SOVITS-04】SOVITS 模块-鉴别模型解析

说明:该系列文章从本人知乎账号迁入,主要原因是知乎图片附件过于模糊。 知乎专栏地址: 语音生成专栏 系列文章地址: 【GPT-SOVITS-01】源码梳理 【GPT-SOVITS-02】GPT模块解析 【GPT-SOVITS-03】SOVITS 模块-生成模型解析 【G…

使用CUDA 为Tegra构建OpenCV

返回:OpenCV系列文章目录(持续更新中......) 上一篇:MultiArch与Ubuntu/Debian 的交叉编译 下一篇:在iOS中安装 警告: 本教程可能包含过时的信息。 使用CUDA for Tegra 的OpenCV 本文档是构建支持 CUD…

Expert Prompting-引导LLM成为杰出专家

ExpertPrompting: Instructing Large Language Models to be Distinguished Experts 如果适当设计提示,对齐的大型语言模型(LLM)的回答质量可以显著提高。在本文中,我们提出了ExpertPrompting,以激发LLM作为杰出专家回…

vivado 增量实施

增量实施 增量实现是指增量编译的实现阶段设计流程: •通过重用参考设计中的先前布局和布线,保持QoR的可预测性。 •加快地点和路线的编制时间或尝试最后一英里的计时关闭。 下图提供了增量实现设计流程图。该图还说明了增量合成流程。有关增量的更多…

SLAM 求解IPC算法

基础知识:方差,协方差,协方差矩阵 方差:描述了一组随机变量的离散程度 方差 每个样本值 与 全部样本的平均值 相差的平方和 再求平均数,记作: 例如:计算数字1-5的方差,如下 去中心化…

关系型数据库mysql(3)索引

目录 一.索引的概念 二.索引的作用 三.创建索引的原则依据 四.索引的分类 五.索引的创建 5.1 普通索引 5.1.1 直接创建索引 5.1.2 修改表方式创建 5.1.3 创建表的时候指定索引 5.2 唯一索引 5.2.1 直接创建唯一索引 5.2.2 修改表方式创建 5.2.3 创建表的时候指…

ThreaTrace复现记录

1. 环境配置 服务器环境 需要10.2的cuda版本 conda环境 包的版本: python 3.6.13 pytorch 1.9.1 torch-cluster 1.5.9 torch-scatter 2.0.9 torch-sparse 0.6.12 torch-spline-conv 1.2.1 torch-geometric 1.4.3 环境bug 这里环境搭建好以后,就可以正…

osgEarth学习笔记2-第一个Osg QT程序

原文链接 上个帖子介绍了osgEarth开发环境的安装。本帖介绍我的第一个Osg QT程序。 下载 https://github.com/openscenegraph/osgQt 解压,建立build目录。 使用Cmake-GUI Configure 根据需要选择win32或者x64,这里我使用win32. 可以看到include和lib路…

jQuery 基础

文章目录 1. jQuery 概述1.1 JavaScript 库1.2 jQuery 概念1.3 jQuery 优点 2. jQuery 基本使用2.1 下载2.2 使用步骤2.3 jQuery 的入口函数2.4 jQuery 的顶级对象 $2.5 DOM 对象和 jQuery 对象DOM 对象和 jQuery 对象相互转换方法 1. jQuery 概述 1.1 JavaScript 库 1.2 jQue…

Cesium:按行列绘制3DTiles的等分线

作者:CSDN @ _乐多_ 本文将介绍如何使用 Cesium 引擎根据模型的中心坐标,半轴信息,绘制 3DTiles 对象的外包盒等分线。 外包盒是一个定向包围盒(Oriented Bounding Box),它由一个中心点(center)和一个包含半轴(halfAxes)组成。半轴由一个3x3的矩阵表示,这个矩阵是…

【毕设级项目】基于ESP8266的家庭灯光与火情智能监测系统——文末源码及PPT

目录 系统介绍 硬件配置 硬件连接图 系统分析与总体设计 系统硬件设计 ESP8266 WIFI开发板 人体红外传感器模块 光敏电阻传感器模块 火焰传感器模块 可燃气体传感器模块 温湿度传感器模块 OLED显示屏模块 系统软件设计 温湿度检测模块 报警模块 OLED显示模块 …

DashVector - 阿里云向量检索服务

DashVector 文章目录 DashVector一、关于 DashVector二、使用 DashVector 前提准备1、创建Cluster:2、获得API-KEY3、安装最新版SDK 三、快速使用 DashVector1. 创建Client2. 创建Collection3、插入Doc4、相似性检索5、删除Doc6. 查看Collection统计信息7. 删除Coll…

hcia datacom课程学习(3):http与https、FTP

1.超文本传输协议:http与https (1)用来访问www万维网。 wwwhttp+html+URLweb (2)它们提供了一种发布和接受html界面的方法:当在网页输入URL后,从服务器获取html文件来…