请求拦截器/响应器写法

写请求拦截器、响应拦截器的request.js内容如下:

import axios from 'axios'
import { getToken ,removeToken} from '@/utils/auth.js'

// 按需引入element的消息弹窗
import {Message,MessageBox} from 'element-ui'
//配置请求的基础url以及响应超时时间
axios.defaults.baseURL = '请求的公共地址'
axios.defaults.timeout = 30 * 1000
//请求拦截器,在请求头里添加TOKEN
axios.interceptors.request.use(config => {
if(getToken()) {
      // 配置请求头的token授权
      config.headers.Authorization = getToken()
  }
    // 必须要返回config
    return config
  },
  //参数二,对错误请求做什么
  error => {
    console.log('请求出错,错误是' + error)
    //返回一个失败状态promise
    return Promise.reject(error)
  },
)

//响应拦截器,对于响应过滤
axios.interceptors.response.use(res => {

    // 获取到状态码
    const status = res.data.meta.status
    //获取响应提示信息
    const msg = res.data.meta.msg

  //状态码401,说明需要用户重新登陆授权
  if (status === 401) {
    MessageBox('登陆已过期,请重新登陆', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      // 重新登陆之前需要:1.清除cookies中的token 2.跳转登录页 3.刷新页面以清空vuex数据
      if(getToken()){
        removeToken();
      }
      this.$router.push({ path: '/login' })
      location.reload()
    })
  }
  // 响应的结果有报错
  else if (status !== 200) {
    Message.error(msg)
    // 返回一个失败状态的promise
    return Promise.reject('出错了')
  }
  // 若正常响应,则返回响应结果
  else {
    Message({
      message: msg,
      type: 'success',
    })
    return res.data
  }
},
  //没网,不能成功发起请求
  ()=>{
    Message({
      message: '请检查网络!',
      type: 'error',
    })
    return Promise.reject('出错了')

  })
// 一定要返回实例
export default axios

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值