zoukankan      html  css  js  c++  java
  • Axios拦截设置和错误处理

    /**
     * @file Axios的Vue插件(添加全局请求/响应拦截器)
     */
    
    // https://github.com/mzabriskie/axios
    
    import axios from 'axios'
     
    // 拦截request,设置全局请求为ajax请求
    
    axios.interceptors.request.use((config) => {
      
      config.headers['X-Requested-With'] = 'XMLHttpRequest'
     
      return config
    })
     
    // 拦截响应response,并做一些错误处理
    
    axios.interceptors.response.use((response) => {
      
          const data = response.data
     
    // 根据返回的code值来做不同的处理(和后端约定)
      
       switch (data.code) {
        
        case '0':
          // 举例
          // exp: 修复iPhone 6+ 微信点击返回出现页面空白的问题
         
        if (isIOS()) {
            
           // 异步以保证数据已渲染到页面上
            setTimeout(() => {
             
             // 通过滚动强制浏览器进行页面重绘
              document.body.scrollTop += 1
            }, 0)
          }
         
           // 这一步保证数据返回,如果没有return则会走接下来的代码,不是未登录就是报错
            return data
     
        // 需要重新登录
        case 'SHIRO_E5001':
          
         // 微信生产环境下授权登录
          if (isWeChat() && IS_PRODUCTION) {
           
             axios.get(apis.common.wechat.authorizeUrl).then(({ result }) => {
             
             location.replace(global.decodeURIComponent(result))
            
           })
          
           } else {
            
             // 否则跳转到h5登录并带上跳转路由
            
           const search = encodeSearchParams({
                
           next: location.href,
            
         })
            
            location.replace(`/user/login?${search}`)
          }
         
         // 不显示提示消息
          data.description = ''
          
           break
        
           default:
      }
      
      // 若不是正确的返回code,且已经登录,就抛出错误
      
       const err = new Error(data.description)
      
       err.data = data
      
       err.response = response
     
       throw err
    
     }, (err) => { // 这里是返回状态码不为200时候的错误处理
      
      if (err && err.response) {
        
       switch (err.response.status) {
          
           case 400:
            err.message = '请求错误'
            break
     
          case 401:
            err.message = '未授权,请登录'
            break
     
          case 403:
            err.message = '拒绝访问'
            break
     
          case 404:
            err.message = `请求地址出错: ${err.response.config.url}`
            break
     
          case 408:
            err.message = '请求超时'
            break
     
          case 500:
            err.message = '服务器内部错误'
            break
     
          case 501:
            err.message = '服务未实现'
            break
     
          case 502:
            err.message = '网关错误'
            break
     
          case 503:
            err.message = '服务不可用'
            break
     
          case 504:
            err.message = '网关超时'
            break
     
          case 505:
            err.message = 'HTTP版本不受支持'
            break
     
          default:
        }
      }
     
      return Promise.reject(err)
    })
     
    axios.install = (Vue) => {
      Vue.prototype.$axios = axios
    }
     
    export default axios
  • 相关阅读:
    一个利用扩展方法的实例:AttachDataExtensions
    正则表达式语法
    正则表达式30分钟入门教程
    js正则验证两位小数 验证数字最简单正则表达式大全
    SQL Server DBA三十问【转】
    Vue(踩坑)vue.esm.js?efeb:628 [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined" found in
    vue(有必要做的项目优化)
    vue_(根据多种条件过滤评论内容)
    vue(ref父组件使用子组件中定义的方法)
    Vuex(实现加减操作,Vue.set解决自定义属性没有双向数据绑定)
  • 原文地址:https://www.cnblogs.com/shihaiying/p/12115359.html
Copyright © 2011-2022 走看看