有效的console.log可以更快的定位bug

最新推荐文章于 2023-07-28 09:32:04 发布

小鱼小鱼干

最新推荐文章于 2023-07-28 09:32:04 发布

阅读量344

点赞数

分类专栏：前端踩坑路漫漫文章标签： console.log 请求拦截器响应拦截器

本文链接：https://blog.csdn.net/weixin_43361722/article/details/118729164

版权

前端踩坑路漫漫专栏收录该内容

97 篇文章 7 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中使用axios库设置请求和响应拦截器，用于处理请求前的数据预处理，如添加token和userId，以及响应后的错误处理，如显示错误通知并进行页面刷新。此外，还展示了对特定接口不拼接userId的逻辑。

摘要由CSDN通过智能技术生成

效果：

在这里插入图片描述

request.js加入如下代码：

// 请求拦截器 request interceptor
request.interceptors.request.use(config => {
  // 打印 url 和 params
  Vue.prototype.$log.print(config.url, 'url')
  Vue.prototype.$log.print('params', config.data)
  const token = storage.get(ACCESS_TOKEN)
  // 下方为业务处理，可以忽略
  // 如果 token 存在,让每个请求携带自定义 token 请根据实际情况自行修改
  if (token) {
    config.headers['access-token'] = token
  }
  const userId = storage.get(ACCESS_USERID)
  if (userId) {
    // 智能感知平台参数不需要拼接userId
    if (config.url.indexOf('iot-experience-platform') === -1) {
      config.data['userId'] = userId
    }
  }
  return config
}, errorHandler)

// 响应拦截器 response interceptor
request.interceptors.response.use(response => {
  // 打印 response
  Vue.prototype.$log.print('response', response.data)
  // 下方为业务处理，可以忽略
  if (response.data.code && response.data.code !== 200) {
    if (response.data.code === 4031003) {
      notification.error({
        key: tokenAccessKey,
        message: '错误',
        description: getMsgByCode(response.data.code),
        duration: 4
      })
      store.dispatch('Clear').then(() => {
        setTimeout(() => {
          window.location.reload()
        }, 1500)
      })
    } else if (response.data.code === 4041003) {
      store.dispatch('Clear').then(() => {})
    } else {
      notification.error({
        message: '错误',
        description: getMsgByCode(response.data.code)
      })
    }
    return Promise.reject(response.data)
  }
  return response.data
}, errorHandler)