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

拦截器和响应拦截器"/>

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=> {//状态码500if(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);
});