Vue中的请求拦截器和响应拦截器
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
一、请求拦截器
请求拦截器的作用:
- 修改请求配置:您可以在请求拦截器中修改请求的URL、headers、请求体等配置信息。例如,您可以为每个请求添加身份验证令牌、设置默认的Content-Type等。
- 请求错误处理:您可以在请求拦截器中检查请求是否满足某些条件,如果不满足,则可以中止请求、重定向或执行其他逻辑。这样可以统一处理请求异常情况。
- 加载指示器:您可以在请求拦截器中添加加载指示器,以通知用户请求正在进行中,例如显示一个加载动画或进度条。
- 请求重试:如果遇到请求失败的情况,例如网络错误,您可以在请求拦截器中实现请求重试的逻辑。
// 请求拦截器
instance.interceptors.request.use( config=> {
// config 前端 访问后端的时候 参数
config.headers['Authorization']="yyl"
return config;
}, error=> {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
二、响应拦截器
响应拦截器的作用:
- 全局错误处理:您可以在响应拦截器中捕获所有的响应,并根据不同的响应状态码进行全局错误处理。例如,您可以统一处理401未授权错误、404未找到错误等。
- 响应数据处理:您可以在响应拦截器中修改响应数据,例如解析、格式化或转换响应数据,以便在应用程序的其他部分使用。
- 加载指示器:您可以在响应拦截器中隐藏加载指示器,以通知用户请求已完成。例如,隐藏加载动画或进度条,并显示响应的内容。
// 添加响应拦截器
instance.interceptors.response.use( response=> {
//状态码500
if(response.data.code==500){
// 跳转到login组件里面
myrouter.push({path:"/login"});
return;
}
// return response.data.t;
// 在Home中 this.tableData = response.data.t;去掉.data.t使用上面的那个
return response;
}, error=> {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)