2025年2月19日面试

面试查漏补缺，每一次面试都是一次进步。 这样看来，也许进公司的不是全能型人才，更可能是面试经验丰富的人，会的咱就不提了，专挑硬骨头啃

1.使用js获取父元素的第5个子元素

咋一听这么简单！但是偏偏脑子不好使啊，学过的东西忘得一干二净，谁让不用呢 “快点想啊，脑瓜子”，先获取所有子元素，再找第五个，写出来就是

const parentElement = document.getElementById('parent'); // 假设父元素的 id 是 'parent'
const fifthChild = parentElement.children[4]; // 获取第五个子元素（索引从 0 开始）

回答之后可能不是面试官想要的答案，说要结合选择器，脑瓜子再一转

const fifthChild = document.querySelector('#parent > :nth-child(5)');

嘻嘻嘻~

2.无感刷新（长短token问题）

通过两个token（一个时间短容易过期的token，一个长时间才会过期的token，一般放在HTTPOnly的cookie中，不能通过js来直接访问），来提升token的安全性和减少服务器压力

目的就是通过长token在短token过期的时候换取新的短token，难点在于短token过期后如果重新触发原来的请求并把数据给到调用的函数或者页面，上代码：

api.interceptors.response.use(
  response => response, // 如果响应成功，直接返回
  async error => {
    const originalRequest = error.config;

    // 如果是 401 错误并且没有重试过
    if (error.response?.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        // 如果正在刷新 token，则等待刷新完成后再执行请求
        return new Promise(resolve => {
          failedRequestsQueue.push(newToken => {
            originalRequest.headers.Authorization = `Bearer ${newToken}`;
            resolve(api(originalRequest));
          });
        });
      }

      originalRequest._retry = true; // 标记为已重试
      try {
        const newToken = await refreshTokenAndRetryRequests();
        originalRequest.headers.Authorization = `Bearer ${newToken}`;
        return api(originalRequest); // 重新发送请求
      } catch (refreshError) {
        return Promise.reject(refreshError);
      }
    }

    return Promise.reject(error);
  }
);

主要看这行

 return api(originalRequest); // 重新发送请求

可以重新发送之前失败的请求 完整代码放在仓库，使用axios进行请求封住，使用nextjs编写，包含api和页面可进行测试 在短token过期时立即使用长token换取短token并重新发送之前的请求

还有两个问题稍后在写，一个是关于无感上线，另一个是关于测量文字边界