vue axios 封装请求 遇到一个问题

当我页面访问出错的时候 我想获取后天返回的错误信息 获取不到
image.png
image.png

这是我封装的

import axios from 'axios'
// import store from '@/store'
import { Notify, Toast } from 'vant'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: process.env.VUE_APP_TIME_OUT
})
let isPrompt = false

service.interceptors.request.use(config => {
  // 防止 重复请求
  console.log(config.url)

  // 自定义请求头
  //     if (store.state.token) {
  //     }
  return config
}, error => {
  return Promise.reject(error)
})

service.interceptors.response.use(response => {
  console.log(response)
  if (response.status === 200 && response.data.code === 200) {
    return response.data
  } else {
    Notify({ type: 'warning', message: response.msg, duration: 3000 })
  }
  return response
}, error => {
  console.log(error)

  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        error.message = '错误请求'
        break
      case 401:
        error.message = '未授权,请重新登录'
        break
      case 403:
        error.message = '拒绝访问'
        break
      case 404:
        error.message = '请求错误,未找到该资源'
        break
      case 405:
        error.message = '请求方法未允许'
        break
      case 500:
        error.message = '服务器出错'
        break
      case 501:
        error.message = '网络未实现'
        break
      default:
        error.message = `连接错误${error.response.status}`
    }
  } else {
    error.message = '网络出现问题,请稍后在试'
  }
  if (!isPrompt) {
    isPrompt = true
    const toast = Toast.loading({
      forbidClick: true,
      message: error.message
    })
    setTimeout(() => {
      toast.clear()
      isPrompt = false
    }, 3000)
  }
  return Promise.resolve(error)
})

export default service

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本(请勿用截图)

你期待的结果是什么?实际看到的错误信息又是什么?

阅读 2.1k
3 个回答

你现在接口返回code=400的时候,其实error.response.status=200,response并不会走error

error已经进去你的劫持函数那里了,控制台输出了。没有提示的话,我猜测是你的toast那里有问题了,你可以断点看下就知道了。

截图里面的 code:400 只是业务code,不是http状态码;

在Headers里面找下status code, 如果是2xx, 应该走到成功的回调里面了,不是就走失败回调

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题