问答

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

作者:admin 2021-08-21 我要评论

当我页面访问出错的时候 我想获取后天返回的错误信息 获取不到 这是我封装的 import axios from 'axios'// import store from '@/store'import { Notify, Toast ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

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

相关代码

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

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

###

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

###

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

###

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

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用箭头函数return数据不能实现

    使用箭头函数return数据不能实现

  • 个人小程序号能接入小程序3D地图吗?

    个人小程序号能接入小程序3D地图吗?

  • vue 移动端项目中,使用了better-scrol

    vue 移动端项目中,使用了better-scrol

  • css如何做出区域平均划分为四列

    css如何做出区域平均划分为四列

腾讯云代理商
海外云服务器