500拦截报错 axios_axios拦截错误处理

本文介绍了如何使用 Axios 的拦截器来处理 HTTP 500 错误。通过设置请求和响应拦截器,实现对错误的统一管理和用户友好的提示。在请求拦截器中添加令牌,并在响应拦截器中检查状态码,针对不同错误提供不同的反馈,如403错误则提示账号过期并引导用户重新登录。
摘要由CSDN通过智能技术生成

9a6655f0dc2e74db9fb71432b8fc7465.png

慕容3067478

仅供参考import axios from 'axios'// import {//   Message,//   MessageBox// } from 'element-ui'import store from '../store'import {

  getToken

} from '@/utils/auth'// import Promise from 'es6-promise'// 创建axios实例const service = axios.create({

  baseURL: process.env.BASE_API, // api的base_url

  timeout: 15000 // 请求超时时间})// request interceptorservice.interceptors.request.use(config => {

  config.headers['Authorization'] = 'JWT ' + getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改

  return config

}, error => {  // Do something with request error

  Promise.reject(error)

})// respone拦截器service.interceptors.response.use(  response => {    const res = response.data    if (res.status !== 1) {      // status == 0 错误

      var message = res.errMsg;      // errCode: 403, token 过期了

      if (res.errCode == 403) {

        message = "账号信息已经过期,请重新登录";

      } else {        // 其他提示信息

        window.ELEMENT.Message({

          message: message,          type: 'error',

          duration: 3 * 1000

        })

      }      // 删除token,退出用户账号到登录界面

      if (res.errCode == 403) {        window.ELEMENT.MessageBox.confirm(message, '信息', {

          confirmButtonText: '确定',

          showCancelButton: false,          type: 'warning'

        }).then(() => {

          store.dispatch('LogOut').then(() => {            // 为了重新实例化vue-router对象 避免bug

            window.location.href = location.origin + '/';

          });

        })

      }      return Promise.reject(res)

    } else {      return response.data.data

    }

  },  error => {    window.ELEMENT.Message({

      message: error.errMsg,      type: 'error',

      duration: 3 * 1000

    })    return Promise.reject(error)

  }

)export default service

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值