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

发布于 2022-09-12 02:34:06 字数 1986 浏览 6 评论 0

当我页面访问出错的时候 我想获取后天返回的错误信息 获取不到
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

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

相关代码

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

め七分饶幸 2022-09-19 02:34:06

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

铜锣湾横着走 2022-09-19 02:34:06

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

甲如呢乙后呢 2022-09-19 02:34:06

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文