NodeJS全栈开发面试题讲解——P5前端能力（React/Vue + API调用）

✅ 5.1 如何使用 React/Vue 发起后端请求？用什么库？

面试官您好，在实际项目中我们通常使用 axios、fetch 或框架提供的封装库发起后端请求。

---

🔧 常用库对比：

库	框架适配	优点
axios	通用	默认支持拦截器、取消请求、请求体转换
fetch	通用	原生支持但较原始，无拦截器
useSWR	React	适合缓存和自动请求更新（推荐）
Vue Resource	Vue 2 已弃用	已被淘汰
@vueuse/core	Vue 3	配合 Composition API 很方便

---

🧩 示例：React 中使用 axios（Hooks + 拦截器）

import axios from 'axios';
import { useEffect, useState } from 'react';

const api = axios.create({
  baseURL: '/api',
  timeout: 5000,
});

export function useUserData() {
  const [data, setData] = useState(null);

  useEffect(() => {
    api.get('/user/info').then(res => setData(res.data));
  }, []);

  return data;
}

---

✅ 5.2 状态管理你用什么？Redux、Pinia、Zustand 等对比

状态管理选择要结合项目复杂度和框架生态，React 我常用 Zustand 或 Redux Toolkit，Vue 我用 Pinia。

---

🔍 状态管理库对比：

名称	所属框架	特点	使用建议
Redux Toolkit	React	官方推荐，类型安全，支持异步	大型项目推荐
Zustand	React	极简、无模板代码、Hook 风格	中小型项目非常适合
Recoil	React	原子化状态，更适合组件隔离场景	组件粒度状态管理
Vuex	Vue 2	老牌方案，API 繁琐	不推荐新项目使用
Pinia	Vue 3	轻量、支持模块拆分、Composition API	Vue 3 项目首选

---

示例：Zustand 创建用户状态（React）

import create from 'zustand';

export const useUserStore = create(set => ({
  user: null,
  setUser: (data) => set({ user: data })
}));

---

示例：Pinia 创建用户状态（Vue）

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({ user: null }),
  actions: {
    setUser(data) {
      this.user = data;
    }
  }
});

---

✅ 5.3 如果一个接口很慢，你如何在 UI 上做友好的处理？

面试官我会从「用户感知」和「界面提示」两个维度入手优化体验：

---

⏳ 接口慢时的 UI 优化手段：

1. 骨架屏：如加载用户卡片、文章列表的占位框架；

2. loading Spinner：展示加载中状态，防止用户误操作；

3. 请求超时提示：超过 X 秒提示“网络可能异常”；

4. 请求缓存 / 懒加载：结合 SWR / React Query / keep-alive 优化重复加载；

5. 预请求策略：页面还未进入前发起关键数据请求，提升首屏速度。

---

示例（React + Skeleton）：

return isLoading ? <Skeleton count={5} /> : <UserList data={users} />;

---

✅ 5.4 如何处理请求节流、防抖？封装方式？

防抖与节流是优化高频请求的重要手段，尤其在搜索框、滚动加载等场景非常常见。

---

🔄 原理区别：

名称	原理	应用场景
防抖	延迟执行，用户停止操作后触发	搜索、输入提示
节流	固定时间间隔执行一次	滚动加载、按钮点击防重复

---

✅ Lodash 工具函数（实战推荐）：

import { debounce, throttle } from 'lodash';

const onSearch = debounce((val) => {
  fetchData(val);
}, 500);

const onScroll = throttle(() => {
  loadMore();
}, 1000);

---

✅ 自定义封装 Hook（React）

function useDebounce(fn, delay) {
  const timer = useRef(null);
  return (...args) => {
    clearTimeout(timer.current);
    timer.current = setTimeout(() => fn(...args), delay);
  };
}

---

✅ 5.5 如何将分页、筛选、排序的参数传给后端？

这是常规表格 / 列表 API 设计问题，建议采用统一参数命名规范。

---

📌 传参结构建议：

GET /api/users?page=1&pageSize=10&sortBy=name&order=asc&status=active

参数	描述
page	当前页码
pageSize	每页条数
sortBy	排序字段
order	排序方向（asc/desc）
filters	状态、关键词等条件

---

✅ React 示例：

const [params, setParams] = useState({
  page: 1,
  pageSize: 10,
  sortBy: 'createdAt',
  order: 'desc',
  status: 'active'
});

useEffect(() => {
  axios.get('/api/posts', { params });
}, [params]);

---

✅ Vue 示例（配合分页组件）：

const params = reactive({
  page: 1,
  pageSize: 10,
  sortBy: 'createdAt',
  order: 'desc'
});

watch(() => [params.page, params.pageSize], () => {
  fetchData(params);
});

---

✅ 总结

编号	技术点	核心亮点
5.1	请求库选择	axios 最通用、SWR 自动缓存、NestJS 中也支持 axios
5.2	状态管理	Vue 用 Pinia，React 建议 Zustand 或 Redux Toolkit
5.3	UI 慢接口处理	骨架屏、loading、预加载
5.4	节流防抖封装	lodash、React Hook、自定义封装
5.5	分页筛选排序参数传递	page、pageSize、sortBy、filters 一致性封装

---