Vue中的请求拦截器和响应拦截器

一、请求拦截器

请求拦截器的作用：

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);
});