当前位置: 首页 > news >正文

vue封装一个toast(vue-toastification)弹窗在拦截器js中调用

toast.js


import Vue from 'vue'
import VueToastification from 'vue-toastification'
import 'vue-toastification/dist/index.css' // 引入样式文件

Vue.use(VueToastification)

export const mytoast = Vue.$toast

axios.js

import Axios from 'axios'
import router from '@/router/index.js'
import { mytoast } from '@/util/toast'

axios.interceptors.response.use(response => {
  if (response.data.code === 10000) {
    mytoast.error(response.data.message)
    localStorage.removeItem('token')
    router.push('/')
    return Promise.reject(response.data.message)
  } else if (response.data.code === 200) {
    return response.data.data
  }
  mytoast.error(response.data.message)
  return Promise.reject(response.data.message)
}, function (error) {
  console.dir(error)
  // 对响应错误做点什么
  if (error.response.status === 401) {
    // 处理401错误,例如重定向到登录页面
    router.push('/')
  }
  return Promise.reject(error)
})

效果测试
在这里插入图片描述

http://www.dtcms.com/a/115963.html

相关文章:

  • python | numpy小记(三):理解 NumPy 中的 `np.ceil`:向上取整的利器
  • Axure RP9.0教程 | 内联框架 对应html 元素中的iframe标签 (打开内部页面和外部网址)
  • 虚幻基础:蓝图基础知识
  • 基于Python的招聘推荐数据可视化分析系统
  • 金庸群侠传3D-启动
  • vscode使用方式
  • 分治(8题)
  • 嵌入式学习笔记——I2C
  • 周五论文答辩
  • 代码随想录算法训练营Day22
  • Redisson中的RateLimiter令牌桶限流简单使用
  • 如何在Linux系统上通过命令调用AI大模型?
  • RAG中对于PDF复杂格式文件的预处理的解决方案:MinerU
  • TCN-LSTM时间卷积长短期记忆神经网络多变量时间序列预测(Matlab完整源码和数据)
  • 比亚迪宋plus DMi 21款更新后,安装7.5版本高德地图机车版本
  • 用DrissionPage升级维基百科爬虫:更简洁高效的数据抓取方案
  • 《Docker概念解析》
  • Livox-Mid-70雷达使用------livox_mapping建图
  • ABC400E题解
  • 【教程/笔记】计算机组成原理第一章
  • QEMU-KVM加SPICE,云电脑诞生了
  • 嵌入式AI开发者职业成长路线图
  • 基于Flask的酷狗音乐数据可视化分析系统
  • JS 其他事件类型
  • c++项目 网络聊天服务器 实现;QPS测试
  • kotlin,数字滚动选择
  • <工具 Claude Desktop>配置 Whois MCP 用于 whois 查询
  • Matlab:三维绘图
  • 【PostgreSQL内核学习:深入理解 PostgreSQL 中的 tuplesort_performsort 函数】
  • 微软2025年AI技术深度解析:从多模态大模型到企业级代理服务