首页 > 编程 > JavaScript > 正文

axios拦截设置和错误处理方法

2019-11-19 14:14:15
字体:
来源:转载
供稿:网友

现在vue的官方包已经不更新vue-resource了,转而推荐axios,下面是项目实战是总结的axios插件设置:

/** * @file Axios的Vue插件(添加全局请求/响应拦截器) */// https://github.com/mzabriskie/axiosimport 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拦截设置和错误处理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表