当前位置: 首页 > 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)
})

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

相关文章:

  • 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题解
  • 【教程/笔记】计算机组成原理第一章
  • Wordpress host/温州seo
  • 蜂鸟 网站建设/2345浏览器导航页
  • golang 网站开发/网站制作企业
  • 网站特效 素材/投稿网站
  • 什么是建设网站与靠前/广州百度关键词搜索
  • 夺宝网站制作/中国十大电商平台排名