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

古城微笑少年丶 2023-09-25 12:12 48阅读 0赞

// 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拦截设置和错误处理方法

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 axios全局路由拦截的设置方法

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

相关 axios拦截器设置及其实现原理剖析

相关 axios 拦截器

相关 axios拦截器

相关 axios拦截器

相关 axios拦截器

相关 axios http拦截器处理请求

相关 axios拦截器使用方法

相关 Axios学习(4)---axios拦截器、错误处理与取消请求