一、请求拦截器

请求拦截器的作用:

  1. 修改请求配置:您可以在请求拦截器中修改请求的URL、headers、请求体等配置信息。例如,您可以为每个请求添加身份验证令牌、设置默认的Content-Type等。
  2. 请求错误处理:您可以在请求拦截器中检查请求是否满足某些条件,如果不满足,则可以中止请求、重定向或执行其他逻辑。这样可以统一处理请求异常情况。
  3. 加载指示器:您可以在请求拦截器中添加加载指示器,以通知用户请求正在进行中,例如显示一个加载动画或进度条。
  4. 请求重试:如果遇到请求失败的情况,例如网络错误,您可以在请求拦截器中实现请求重试的逻辑。
// 请求拦截器
 instance.interceptors.request.use( config=> {
 	 // config 前端  访问后端的时候  参数

	  config.headers['Authorization']="yyl"
     return config;
   }, error=> {
     // 超出 2xx 范围的状态码都会触发该函数。
     // 对响应错误做点什么
     return Promise.reject(error);
   });

二、响应拦截器

响应拦截器的作用:

  1. 全局错误处理:您可以在响应拦截器中捕获所有的响应,并根据不同的响应状态码进行全局错误处理。例如,您可以统一处理401未授权错误、404未找到错误等。
  2. 响应数据处理:您可以在响应拦截器中修改响应数据,例如解析、格式化或转换响应数据,以便在应用程序的其他部分使用。
  3. 加载指示器:您可以在响应拦截器中隐藏加载指示器,以通知用户请求已完成。例如,隐藏加载动画或进度条,并显示响应的内容。
// 添加响应拦截器
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);
});

GitHub 加速计划 / vu / vue
109
19
下载
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 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐