目录基本拦截设计轮子思考方向轮子骨架详细实现实践总结基本拦截 axiOS的响应错误拦截中,难免会对error.status做各种各样的if判断,又或者switch。为了防止枯燥乏味的
axiOS的响应错误拦截中,难免会对error.status做各种各样的if判断,又或者switch。为了防止枯燥乏味的生活(给自己挖坑,换一种姿势去写拦截
// 以下大概是日常碰到的操作,拦截响应,判断status做相应操作
function login () {
console.log('登陆逻辑')
return promise.reject(error)
}
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
if (error.status === 401) {
// 401重新登录
console.log('未登陆')
return login(error)
} else if (error.status === 404) {
console.log('404-什么都没')
return promise.reject(error)
} else if (error.status === 422) {
console.log(error.response.data.message)
return promise.reject(error)
} else if (error.status === 500) {
console.log('服务器内部错误')
return promise.reject(error)
} else {
// 其他请求,直接抛出让业务去处理
return promise.reject(error)
}
});
首先思考下怎么实现这个东西
现在,已经在心中拟好了一个小轮子的五脏六腑。
// 定义个一个class
class Enterclose {
constructor () {
// 维护管道数组
this.pond = {}
// 默认管道
this._default = null
}
use (sign, callback) {
return this
}
default (callback) {
this._default = callback
return this
}
start (sign, payload) {
}
}
以上把基本的api骨架写好,然后再一个一个慢慢实现内部的逻辑。
首先是use,用来收集管道,需求中标记是唯一的,所以我们的this.ponds的结构是{标记: callback}
use (sign, callback) {
this.ponds[sign] = callback
return this
}
其中我们需要一个方法用来启动Enterclose
通过getCallback函数去筛选和标记匹配的管道,返回对应的函数。这样一个消除if的小轮子就搞好啦
start (sign, payload) {
const fn = this.getCallback(sign)
if (fn) {
return fn(payload)
}
}
getCallback (sign) {
const key = Object.keys(this.ponds).find(key => key === sign)
if (key) {
return this.ponds[key]
} else if (this._default) {
return this._default
}
}
创建实例,用use和default收集管道,然后在拦截中通过start触发判断
const enterclose = new Enterclose()
// 收集管道
enterclose
.use(401, function (error) {
console.log('未登陆')
return login(error)
})
.use(404, function (error) {
console.log('404-什么都没')
return promise.reject(error)
})
.use(429, function (error) {
console.log(error.response.data.message)
return promise.reject(error)
})
.use(500, function (error) {
console.log('服务器内部错误')
return promise.reject(error)
})
.default(function (error) {
// 收集默认管道
return promise.reject(error)
})
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 启动
return enterclose.start(error.status, error)
});
你也可以根据自己的场景做一些调整,例如支持Promise啊,或者说加一个finally函数,每次走管道最后都会调用这个回调函数之类
到此这篇关于如何消除axios拦截中if的文章就介绍到这了,更多相关消除axios拦截的if内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 详解如何消除axios拦截中的if
本文链接: https://lsjlt.com/news/146246.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0