返回流类型接口的错误信息处理

ops/2024/11/23 23:24:43/

返回流类型接口的错误信息处理

    • 前言
    • axios拦截器src/utils/request.ts
    • 对应接口

前言

返回流类型接口需要在响应成功回调里拦截,且该接口的status始终是200,尽管后端返回的code可能是非2xx,因此返回流类型的接口,其错误信息需要单独处理。

axios拦截器src/utils/request.ts

import axios, { type AxiosResponse } from 'axios'
import { ElMessage } from 'element-plus'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/token'
import router from '@/router/index'
import { environment } from '@/evn.config'const service = axios.create({baseURL: environment.VITE_APP_BASE_URL.includes('http')? environment.VITE_APP_BASE_URL: window.location.origin,
})// 不需要token
const whiteList = ['/auth/oauth/token', '/register']service.interceptors.request.use((config) => {Nprogress.start()const unneededToken = whiteList.includes(config.url as string)if (!unneededToken) {const token = getToken()if (token && Object.getOwnPropertyNames(token).length) {// eslint-disable-next-line no-param-reassignconfig.headers.Authorization = `Bearer ${token.access_token}`}}return config},(err) => Promise.reject(err)
)service.interceptors.response.use((response: AxiosResponse) => {// isNoAccess = 0Nprogress.done()const { config, data, status, headers } = responseconsole.log(response, config, data, status, headers, 'response-success')// 下载和预览if (config.url?.includes('downloadBatch') ||config.url?.includes('previewUrl')) {let fileName = ''if (headers['content-disposition']) {const arr = headers['content-disposition'].split(';')// eslint-disable-next-line no-restricted-syntaxfor (const item of arr) {if (item.search('filename') !== -1) {const arr1 = item.split('=')fileName = decodeURIComponent(arr1[arr1.length - 1])break}}} else {const fileReader: any = new FileReader()fileReader.readAsText(data, 'utf-8')fileReader.onload = () => {const result = JSON.parse(fileReader.result as string)// 错误提示信息,根据接口返回内容ElMessage.error(result?.message)}}return {data: {data,fileName,},}}if (status !== 200) {ElMessage.error({message: data.message,duration: 4000,})return Promise.reject(response)}// 流接口返回错误处理// if (!data.code && data.type === 'application/json') {// 	const fileReader = new FileReader()// 	fileReader.readAsText(data, 'utf-8')// 	fileReader.onload = () => {// 		const result = JSON.parse(fileReader.result as string)// 		ElMessage.error(result.message)// 	}// 	return null// }if (!data.success && data.code) {ElMessage.error({message: data.message,duration: 4000,})}return data},(error) => {Nprogress.done()console.log(error, 'response-error')if (error.response?.data.code && error.response?.data.code === '2007') {// 手动点击退出登录时,系统token过期 不提示信息if (error.response.config.url !== '/system/user/userLogout') {ElMessage.error('登录状态过期,请重新登录')}const url = router.resolve({path: '/middleBackLogin',query: {loginKey: 'tokenNoAccess',},})window.open(url.href, '_self')} else {ElMessage.error({message: error.message,duration: 4000,})if (error.code === 'ERR_NETWORK') {// 网络问题  强制清除缓存localStorage.clear()// 页面刷新window.location.reload()}}return Promise.reject(error)}
)export default service

在这里插入图片描述

对应接口

在这里插入图片描述

import request from '@/utils/request'
import type { AxiosResponse } from 'axios'
import qs from 'qs'/*** 预览申请* @returns*/
export function previewUrl(id: number | string): Promise<AxiosResponse> {return request({url: `/datawarehouse-api/resourceApply/previewUrl/${id}`,responseType: 'blob', // 因为是流文件,所以要指定blob类型   这里响应blob,axios拦截器是无法拦截接口报错的msg的method: 'get',})
}/*** 下载申请* @returns*/
export function downloadBatch(params = {}): Promise<AxiosResponse> {return request({url: '/datawarehouse-api/resourceApply/downloadBatch',responseType: 'blob', // 因为是流文件,所以要指定blob类型method: 'get',params,// paramsSerializer: get请求,处理数组参数// 传的是:// ids: [xxx,xxx]// 负载为:// ids: xxx    // ids: xxxparamsSerializer(params) {return qs.stringify(params, { arrayFormat: 'repeat' })},})
}

http://www.ppmy.cn/ops/136165.html

相关文章

【Rust 学习笔记】Rust 安装与 “Hello World” 程序介绍

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G技术研究。 博客内容主要围绕…

国科大数据挖掘24秋期末考试试题回顾

1. 数据仓库 OLAP操作 2.bin 平滑 归一化计算 3.决策树&#xff08;Information Gain&#xff09;/ 朴素贝叶斯算法 4.FPgrowth 5. single Link 6. recommend rating 和这个题差不多 7.忘了 大部分题目可以看往年题目&#xff0c;作业题。

生成MPSOC以及ZYNQ的启动文件BOOT.BIN的小软件

我们知道MPSOC或者ZYNQ的启动文件BOOT.BIN 通常由三最少三部分组成 1&#xff0c;FSBL 第一阶段引导加载器 2&#xff0c;BIT流文件 3&#xff0c;用户APP文件 用户使用这个三个文件生成BOOT.BIN时候往往用SDK的用户界面&#xff0c;分别选择这三个文件之后生成。其实这种方…

postman 最强内置函数使用集合

使用动态变量返回随机生成的数据 Faker库可让您使用预定义变量在 Postman 中生成示例数据。使用这些变量就像使用 Postman 中的任何其他变量一样。它们的值是在执行时生成的&#xff0c;其名称以符号开头$&#xff0c;例如$guid或$timestamp。 要在预请求或后响应脚本中使用动态…

Rust 力扣 - 70. 爬楼梯

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 到达第n层只能是从n - 1层爬1层上来的&#xff0c;或者是从n - 2层爬2层上来的 所有到达第n层的方法种数 到达第n - 1层的方法种数 到达第n - 2层的方法种数 题解代码 impl Solution {pub fn climb_stairs(m…

【SQL Server】华中农业大学空间数据库实验报告 实验五 索引

1.实验目的 通过课堂理论学习与实验课的实际操作&#xff0c;充分理解索引的相关概念&#xff0c;作用&#xff0c;以及特点&#xff0c;创建索引的基本目的是提高系统性能&#xff0c;虽然实验课堂中我们实际使用的实验数据无法很好的体现索引的优点&#xff0c;但希望我们能…

tcpdump使用方法

文章目录 1. 安装tcpdump在Debian/Ubuntu系统在Red Hat/CentOS系统验证安装 2. 基本用法查看可用网络接口捕获所有流量保存捕获的数据从文件读取数据 3. 高级用法显示更多详细信息限制捕获数据包数量指定数据包大小实时输出时间戳 4. 过滤流量过滤特定协议过滤IP地址过滤端口组…

Flink的Standalone集群模式安装部署

一.Flink模式介绍 Flink支持多种安装模式。 local&#xff08;本地&#xff09;——本地模式 standalone——独立模式&#xff0c;Flink自带集群&#xff0c;开发测试环境使用 standaloneHA—独立集群高可用模式&#xff0c;Flink自带集群&#xff0c;开发测试环境使用 ya…