请求拦截器相关面试题

1. 请求拦截器和响应拦截器分别有什么作用请求拦截器管请求发出去之前的事响应拦截器管请求回来之后的事。继续追问请求拦截器一般做什么最常见的就是统一加 Token、公共请求头和请求配置。例如axios.interceptors.request.use(config{consttokengetToken();if(token){config.headers.AuthorizationBearer${token};}returnconfig;});继续追问响应拦截器一般做什么主要是统一处理响应数据和错误。比如axios.interceptors.response.use(response{returnresponse.data;},error{if(error.response?.status401){// Token 失效}returnPromise.reject(error);});2. 为什么要封装一层请求而不是每个地方直接用 Axios就是把重复的请求逻辑统一掉让业务代码只管调接口。比如业务代码只需要constuserawaitgetUser();而不用每个地方都写加 Token 设置 Header 处理 401 处理错误 设置超时3. Token 过期了怎么办收到 401 后刷新 Token刷新成功再把原请求重新发一次。流程请求 ↓ 401 ↓ 刷新 Token ↓ 成功 ↓ 重新请求原接口4. 如果同时有很多请求都返回 401 呢不能让每个请求都去刷新 Token只能同时刷新一次其他请求等它。例如请求 A ──→ 401 ──┐ 请求 B ──→ 401 ──┤ 请求 C ──→ 401 ──┤ ↓ 刷新 Token ↓ 成功 ↙ ↓ ↘ A重试 B重试 C重试常见做法是共享一个PromiseletrefreshPromisenull;asyncfunctionrefreshTokenOnce(){if(!refreshPromise){refreshPromiserefreshToken().finally((){refreshPromisenull;});}returnrefreshPromise;}核心就是同一时间只能有一个刷新请求。5. Token 刷新失败怎么办刷新失败就不能继续重试了一般清掉登录状态让用户重新登录。否则就会出现401 ↓ 刷新失败 ↓ 重新请求 ↓ 401 ↓ 继续刷新 ↓ ……所以必须有明确的失败出口。6. 所有请求失败都应该自动重试吗不应该要看失败原因和请求本身能不能安全重试。例如GET 查询 → 一般可以考虑重试 POST 创建订单 → 不能随便重试 支付请求 → 更不能简单自动重试因为有些请求重复执行会产生实际业务影响。7. 怎么做请求重试一般会限制重试次数而且只对明确可以重试的错误重试。例如asyncfunctionrequestWithRetry(request,maxRetry3){letcount0;while(true){try{returnawaitrequest();}catch(error){count;if(countmaxRetry||!canRetry(error)){throwerror;}awaitsleep(1000*count);}}}这里还可以继续追问为什么不能无限重试因为网络异常可能一直存在无限重试会把问题放大。8. 请求去重是怎么做的核心就是给请求生成一个唯一 Key相同请求正在执行时就不要重复发。例如method url params body ↓ requestKey第一次GET /user → 发请求第二次GET /user → 发现相同请求正在执行 → 复用 / 取消具体选择哪种要看业务需求。9. 怎么取消请求现在一般直接用 AbortController。constcontrollernewAbortController();fetch(/api/user,{signal:controller.signal});// 取消controller.abort();典型场景就是搜索输入 A ↓ 请求 A 输入 AB ↓ 取消 A ↓ 请求 AB 输入 ABC ↓ 取消 AB ↓ 请求 ABC避免旧请求回来以后把新数据覆盖掉。10. 所有错误都在响应拦截器里弹 Toast可以吗不建议请求层负责识别和处理错误具体怎么提示最好由业务决定。因为不同接口的错误处理可能不一样有的 → Toast 有的 → 页面展示 有的 → 静默处理 有的 → 自己处理如果请求层直接绑定 UI就容易变成请求层 ↓ Axios ↓ Toast ↓ 具体 UI 框架耦合会比较重。11. 请求拦截器是不是只能 Axios 有不是拦截请求是一个设计思路不是 Axios 独有的功能。Axios 自己提供了拦截器如果用fetch也可以自己封装asyncfunctionrequest(url,options){constconfigbeforeRequest(url,options);constresponseawaitfetch(config.url,config.options);returnafterResponse(response);}一道题怎么连续追面试官请求拦截器和响应拦截器有什么作用你先答请求拦截器管请求发出去之前的事响应拦截器管请求回来之后的事。面试官继续Token 怎么处理请求拦截器统一加 Token。Token 过期呢收到 401 就刷新 Token成功后重发原请求。如果同时 10 个请求都 401 呢不能让 10 个请求一起刷新只能刷新一次其他请求等刷新结果。刷新失败呢清掉登录状态让用户重新登录不能继续重试。那请求重试呢只重试明确可以安全重试的请求而且要限制次数。你还会考虑什么请求取消、请求去重、错误统一处理这些都可以根据业务需要加。这就比单纯回答“请求拦截器加 Token响应拦截器处理错误”明显高一个层次。