首页 > 移动平台 > 详细

Axios拦截设置和错误处理

时间:2019-12-29 18:16:30      阅读:96      评论:0      收藏:0      [点我收藏+]
/**
 * @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

Axios拦截设置和错误处理

原文:https://www.cnblogs.com/shihaiying/p/12115359.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!