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

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

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


🔧 常用库对比:

框架适配 优点
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 一致性封装

相关推荐
wen's15 分钟前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心1 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络1 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
失落的多巴胺3 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear3 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息3 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月3 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu3 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js