前端响应校验文件

import Vue from 'vue'
import axios from 'axios'
import {
  baseURL,
  contentType,
  debounce,
  invalidCode,
  noPermissionCode,
  requestTimeout,
  successCode,
  tokenName,
  loginInterception,
} from '@/config'
import store from '@/store'
import qs from 'qs'
import router from '@/router'
import { isArray } from '@/utils/validate'
import {
  setAccessToken,
  getAccessToken,
  removeAccessToken,
} from '@/utils/accessToken'
let loadingInstance

/**
 * @description 处理code异常
 * @param {*} code
 * @param {*} message
 */
const handleCode = (code, message) => {

  switch (code) {
    case invalidCode:
      Vue.prototype.$baseMessage(message || `后端接口${code}异常`, 'error')
      store.dispatch('user/resetAccessToken').catch(() => { })
      if (loginInterception) {
        location.reload()
      }
      break
    case noPermissionCode:
      Vue.prototype.$baseMessage(message || `登录已过期,请重新登录!`, 'error')
      store.dispatch('user/resetAccessToken').catch(() => { })
      if (loginInterception) {
        location.reload()
      }
      // router.push({ path: '/401' }).catch(() => {})
      break
    case 100:
      Vue.prototype.$baseMessage(message, 'error')
      break
    default:
      Vue.prototype.$baseMessage(message || `后端接口${code}异常`, 'error')
      break
  }


}

const instance = axios.create({
  baseURL,
  // timeout: requestTimeout,
  headers: {
    'Content-Type': contentType,
  },
})

instance.interceptors.request.use(
  (config) => {
    if (store.getters['user/accessToken']) {
      config.headers[tokenName] = store.getters['user/accessToken']
    }
    //这里会过滤所有为空、0、false的key,如果不需要请自行注释
    // if (config.data)
    //   config.data = Vue.prototype.$baseLodash.pickBy(
    //     config.data,
    //     Vue.prototype.$baseLodash.identity
    //   )
    if (
      config.data &&
      config.headers['Content-Type'] ===
      'application/x-www-form-urlencoded;charset=UTF-8'
    )
      config.data = qs.stringify(config.data)
    if (debounce.some((item) => config.url.includes(item)))
      loadingInstance = Vue.prototype.$baseLoading()
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

instance.interceptors.response.use(
  (response) => {
    if (loadingInstance) loadingInstance.close()

    const { data, config } = response
    const { code, message } = data
    // 操作正常Code数组
    const codeVerificationArray = isArray(successCode)
      ? [...successCode]
      : [...[successCode]]
    // 是否操作正常
    if (codeVerificationArray.includes(code)) {
      return data.data
    } else {
      // 没有code直接代表成功直接返回值
      if (code != null) {
        handleCode(code, message)
        return Promise.reject(
          'admin-vue2请求异常拦截:' +
          JSON.stringify({ url: config.url, code, message }) || 'Error'
        )
      }else{
        return data.data
      }

    }
  },
  (error) => {
    if (loadingInstance) loadingInstance.close()
    const { response, message } = error
    // alert(localStorage.getItem('mobileStudent'))
    if (error.response && error.response.data) {
      const { code, data } = response
      if (code === 401) {
        router.push({ path: '/login' }).catch(() => { })
      } else {
        handleCode(code, data.msg || message)
      }
      handleCode(code, data.msg || message)
      return Promise.reject(error)
    } else {
      let { message } = error
      if (message === 'Network Error') {
        message = '网络连接异常'
      }
      if (message.includes('timeout')) {
        message = '后端接口请求超时'
      }
      if (message.includes('Request failed with status code')) {
        const code = message.substr(message.length - 3)
        message = '后端接口' + code + '异常'
      }
      Vue.prototype.$baseMessage(message || `后端接口未知异常`, 'error')
      return Promise.reject(error)
    }
  }
)

export default instance

负责校验后端返回的数据

作者:freps

出处:https://www.cnblogs.com/freps/p/18635860

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   LL。。。  阅读(4)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
点击右上角即可分享
微信分享提示