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

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

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

🔧 常用库对比：

🧩 示例：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。

🔍 状态管理库对比：

示例：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

✅ 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);
});

✅ 总结