1. 问题:你们项目中是如何实现请求拦截器和响应拦截器的?为什么要二次封装?
我们在前端项目(如web-admin/src/utils/request.ts)中对axios进行了二次封装,统一配置了请求拦截器和响应拦截器。请求拦截器主要用于在每个请求头中自动添加token等认证信息,响应拦截器则统一处理后端返回的数据和错误,比如自动跳转登录页、弹出错误提示等。二次封装的好处是让所有API请求都能复用这些通用逻辑,减少重复代码,便于维护和扩展。
2. 问题:你们的请求拦截器具体做了哪些事情?举例说明。
在request.ts中,请求拦截器会在每次请求前自动从本地存储(如localStorage或store)获取token,并将其添加到请求头的Authorization字段中。例如:
config.headers['Authorization'] = 'Bearer ' + token;
这样后端就能识别用户身份,无需每次手动传token。此外,还可以在请求拦截器中统一设置请求超时时间、Content-Type等参数。
3. 问题:响应拦截器是如何处理后端返回的错误或特殊状态码的?
响应拦截器会统一处理后端返回的所有响应。例如,如果后端返回401(未授权),拦截器会自动清除本地token并跳转到登录页,避免未登录状态下访问受限资源。如果返回其他错误码,则会弹出统一的错误提示,便于用户理解问题。这样可以避免每个API调用都写重复的错误处理逻辑。
4. 问题:你们如何在二次封装的拦截器中处理全局loading和错误提示?
我们可以在请求拦截器中发起请求时,统一开启全局loading动画(如调用全局store或UI库的loading方法),在响应拦截器中关闭loading。对于错误提示,响应拦截器会捕获所有异常,根据错误类型调用UI组件(如Element Plus的Message)弹出提示。例如:
import { ElMessage } from 'element-plus';
ElMessage.error('请求失败,请稍后重试');
这样用户体验更好,开发也更高效。
5. 问题:如果某些接口需要特殊处理(如不带token或自定义错误处理),你们的二次封装如何支持?
我们在二次封装时,支持为每个请求单独传递自定义配置参数。例如,可以在请求时传递一个noAuth字段,拦截器中判断后决定是否加token。对于自定义错误处理,可以在API调用时传递回调函数或特殊标记,拦截器根据这些参数决定是否走全局处理还是交给业务层处理。这样既保证了全局统一,也支持个性化需求。