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

最新推荐文章于 2025-06-05 08:00:00 发布

原创最新推荐文章于 2025-06-05 08:00:00 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.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)
})