axios请求拦截器和响应拦截器
axios里面可以设置拦截器 ,在请求发送之前做一些事情;
拦截器分【请求拦截器】和【响应拦截器】
参考地址:https://www.jb51.net/article/150014.htm
参考的地址:https://www.jianshu.com/p/7bc7654d4574
请求拦截器的实际应用场景
在进行鉴权的时候;我们每个接口都需要携带token;
难道每次我们都需要手动拼接token;
这个时候拦截器就很有用了;
这时候就可以用拦截器来使token自动增加
// 首先我们看下请求拦截器的写法;在请求或响应被 then 或 catch 处理前拦截它们。
axios.interceptors.request.use((config)=>{
console.log("--",config);
config.baseURL="https://193.121.12.121:8999/";
if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.myAuthorization = mytoken;
// config.headers['Authorization'] = token;
}
if(!config.hasOwnProperty('showError')){
config.showError = true
}
return config;
},(err)=>{
console.log(error)
// 发生错误做的一些事情
return Promise.reject(error);
})
// 添加响应拦截器
axios.interceptors.response.use(function (res) {
// 对响应数据做点什么
if (res&&res.data&&res.data.success) {
return res.data
}else{
if(res.config.showError) {
//如何请求失败,开启了错误提示;进行提示
window.$toast(res.data.msg)
}
return Promise.reject(res.data)
}}, function (error) {
// 对响应错误做点什么;没有权限401,去登录界面
if(error.response.status === 401) {
window.$toast('登录超时')
setTimeout(() => {
uni.switchTab({
url: '/pages/home/home'
})
},1000)
}else if(error.response.status === 403) {
window.$toast('暂无权限')
}else {
window.$toast('网络错误')
}
return Promise.reject(error);
});
export default axios
使用
import request from './common'
/**
{请求参数} data
@param {
showError: 是否隐藏错误提醒
} utils
*/
export function getUserInfo(data, utils) {
return request({
url: 'xxx/xx/user',
method: 'get',
data,
...utils
})
}
作者:流年少年
出处:https://www.cnblogs.com/ishoulgodo/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/ishoulgodo/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

支付宝

微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期