1. JavaScript数据交互基础入门前端开发的核心能力之一就是实现数据交互。作为入行十年的老前端我见过太多新手在数据交互环节踩坑。今天我们就从最基础的JavaScript数据交互讲起帮你避开那些我当年踩过的坑。数据交互简单说就是前端页面和后端服务之间的对话。就像两个人聊天需要共同语言一样前后端交互也需要遵循特定规则。JavaScript提供了多种实现方式每种都有其适用场景和注意事项。新手常见误区以为数据交互就是简单的发请求收数据实际上需要考虑安全性、性能优化、错误处理等诸多因素。2. 常见数据交互方式解析2.1 XMLHttpRequest老将不死虽然现在有更现代的fetch API但XHR仍然是必须掌握的基础。它的工作原理就像寄信const xhr new XMLHttpRequest(); xhr.open(GET, https://api.example.com/data, true); xhr.onload function() { if (xhr.status 200) { console.log(JSON.parse(xhr.responseText)); } else { console.error(请求失败:, xhr.statusText); } }; xhr.onerror function() { console.error(网络错误); }; xhr.send();关键点解析open()方法的第三个参数控制是否异步必须处理onerror和状态码检查响应数据需要手动解析JSON.parse2.2 Fetch API现代解决方案Fetch基于Promise代码更简洁fetch(https://api.example.com/data) .then(response { if (!response.ok) { throw new Error(网络响应异常); } return response.json(); }) .then(data console.log(data)) .catch(error console.error(请求失败:, error));优势对比链式调用更清晰内置JSON解析默认不会携带cookie需要配置credentials2.3 WebSocket实时通信利器当需要实时更新时如聊天室、股票行情WebSocket是更好的选择const socket new WebSocket(wss://echo.websocket.org); socket.onopen function() { socket.send(Hello Server!); }; socket.onmessage function(event) { console.log(收到消息:, event.data); }; socket.onclose function() { console.log(连接关闭); };3. 数据交互中的安全防护3.1 CSRF防护实战我曾在一个电商项目中因为没有做好CSRF防护导致严重漏洞。正确的做法// 从cookie中获取token function getCookie(name) { const value ; ${document.cookie}; const parts value.split(; ${name}); if (parts.length 2) return parts.pop().split(;).shift(); } // 发送请求时带上token fetch(/api/payment, { method: POST, headers: { X-CSRF-TOKEN: getCookie(csrfToken) }, body: JSON.stringify({amount: 100}) });3.2 XSS防御方案永远不要信任用户输入我曾见过因为直接输出用户输入导致XSS的案例// 错误示范 document.getElementById(output).innerHTML userInput; // 正确做法 document.getElementById(output).textContent userInput;或者使用DOMPurify等库进行过滤import DOMPurify from dompurify; document.getElementById(output).innerHTML DOMPurify.sanitize(userInput);4. 性能优化技巧4.1 请求合并与缓存在一个大型管理后台项目中我通过以下优化将加载时间减少了40%// 使用Promise.all合并请求 const [userData, productData] await Promise.all([ fetch(/api/user), fetch(/api/products) ]); // 设置缓存 fetch(/api/data, { cache: force-cache // 或 no-store });4.2 数据压缩与分页处理大数据集时// 请求时添加压缩头 fetch(/api/large-data, { headers: { Accept-Encoding: gzip, deflate } }); // 分页请求 async function fetchPaginatedData(page 1, pageSize 20) { const response await fetch(/api/data?page${page}size${pageSize}); return response.json(); }5. 错误处理与调试5.1 全面的错误捕获这是我总结的错误处理模板async function fetchData() { try { const response await fetch(/api/data); if (!response.ok) { // HTTP错误 throw new Error(HTTP错误! 状态码: ${response.status}); } const data await response.json(); if (data.error) { // 业务逻辑错误 throw new Error(data.error.message); } return data; } catch (error) { // 网络错误或JSON解析错误 console.error(请求失败:, error); // 可以在这里添加错误上报逻辑 Sentry.captureException(error); throw error; // 继续抛出供上层处理 } }5.2 实用的调试技巧我常用的调试方法使用浏览器开发者工具的Network面板查看请求/响应头和内容使用console.time()测量请求耗时模拟慢速网络测试超时处理// 测量请求耗时 console.time(API请求); const data await fetchData(); console.timeEnd(API请求); // 输出类似API请求: 356ms6. 现代前端框架中的数据交互6.1 React中的最佳实践在React项目中我推荐这样组织API调用// api.js - 集中管理API export const getUser async (userId) { const response await fetch(/api/users/${userId}); return response.json(); }; // UserComponent.jsx import { getUser } from ./api; function UserComponent({ userId }) { const [user, setUser] useState(null); const [loading, setLoading] useState(true); const [error, setError] useState(null); useEffect(() { const fetchUser async () { try { const data await getUser(userId); setUser(data); } catch (err) { setError(err.message); } finally { setLoading(false); } }; fetchUser(); }, [userId]); if (loading) return div加载中.../div; if (error) return div错误: {error}/div; return div{user.name}/div; }6.2 Vue中的优雅实现Vue3组合式API写法// useApi.js import { ref } from vue; export function useApi(url) { const data ref(null); const error ref(null); const loading ref(false); const fetchData async () { loading.value true; try { const response await fetch(url); data.value await response.json(); } catch (err) { error.value err.message; } finally { loading.value false; } }; return { data, error, loading, fetchData }; } // UserComponent.vue script setup import { useApi } from ./useApi; const { data: user, error, loading } useApi(/api/user/123); /script7. TypeScript加持的数据交互在大型项目中TypeScript能极大提高代码可靠性interface User { id: number; name: string; email: string; } async function fetchUser(userId: number): PromiseUser { const response await fetch(/api/users/${userId}); if (!response.ok) { throw new Error(获取用户失败); } return response.json() as PromiseUser; } // 使用时 try { const user await fetchUser(123); console.log(user.name); // 有类型提示 } catch (error) { if (error instanceof Error) { console.error(error.message); } }类型提示的好处明确知道API返回的数据结构避免属性访问错误方便后续维护和重构8. 实战中的经验分享8.1 文件上传的坑处理文件上传时要注意// 正确创建FormData const formData new FormData(); formData.append(file, fileInput.files[0]); formData.append(metadata, JSON.stringify({ uploader: user123, timestamp: Date.now() })); // 不要设置Content-Type头浏览器会自动处理 fetch(/api/upload, { method: POST, body: formData });8.2 处理大文件下载实现下载进度提示fetch(/api/large-file) .then(response { const contentLength response.headers.get(content-length); const reader response.body.getReader(); let receivedLength 0; const chunks []; return new Promise((resolve) { function processChunk({ done, value }) { if (done) { resolve(new Blob(chunks)); return; } chunks.push(value); receivedLength value.length; console.log(下载进度: ${(receivedLength/contentLength*100).toFixed(1)}%); return reader.read().then(processChunk); } reader.read().then(processChunk); }); }) .then(blob { const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download file.pdf; a.click(); });9. 跨域问题终极解决方案我处理过无数跨域问题总结出这些方案9.1 开发环境解决方案配置代理是最佳实践// vite.config.js export default { server: { proxy: { /api: { target: http://localhost:3000, changeOrigin: true, rewrite: path path.replace(/^\/api/, ) } } } }9.2 生产环境配置正确设置CORS头// Node.js Express示例 app.use((req, res, next) { res.header(Access-Control-Allow-Origin, https://yourdomain.com); res.header(Access-Control-Allow-Methods, GET, POST, PUT, DELETE); res.header(Access-Control-Allow-Headers, Content-Type, Authorization); res.header(Access-Control-Allow-Credentials, true); if (req.method OPTIONS) { return res.sendStatus(200); } next(); });10. 数据交互的未来趋势虽然fetch和XHR仍是主流但一些新技术值得关注10.1 GraphQL实践const query query GetUser($id: ID!) { user(id: $id) { name email posts { title } } } ; fetch(/graphql, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ query, variables: { id: 123 } }) }) .then(res res.json()) .then(data console.log(data.data.user));10.2 WebRTC点对点通信适合实时性要求高的场景// 建立连接 const pc new RTCPeerConnection(); pc.onicecandidate event { if (event.candidate) { // 发送candidate给对等方 } }; pc.ondatachannel event { const channel event.channel; channel.onmessage event { console.log(收到消息:, event.data); }; }; // 创建数据通道 const channel pc.createDataChannel(chat); channel.onopen () { channel.send(Hello!); };11. 单元测试策略确保数据交互代码可靠的关键// 使用jest测试API调用 import { fetchUser } from ./api; jest.mock(node-fetch, () jest.fn()); test(fetchUser返回正确的用户数据, async () { const mockUser { id: 1, name: 测试用户 }; fetch.mockResolvedValue({ ok: true, json: () Promise.resolve(mockUser) }); const user await fetchUser(1); expect(user).toEqual(mockUser); }); test(fetchUser处理网络错误, async () { fetch.mockRejectedValue(new Error(网络错误)); await expect(fetchUser(1)).rejects.toThrow(网络错误); });12. 移动端特殊考量在移动应用中要特别注意12.1 网络状态检测// 检测网络状态 const isOnline navigator.onLine; window.addEventListener(online, () { console.log(网络已连接); // 重试失败的请求 }); window.addEventListener(offline, () { console.log(网络断开); // 显示离线提示 }); // 处理弱网环境 fetch(/api/data, { signal: AbortSignal.timeout(5000) }) .catch(err { if (err.name AbortError) { console.log(请求超时); } });12.2 数据缓存策略// 使用Cache API caches.open(api-cache).then(cache { cache.match(/api/data).then(response { if (response) { return response.json(); } return fetch(/api/data).then(networkResponse { cache.put(/api/data, networkResponse.clone()); return networkResponse.json(); }); }); });13. 性能监控与优化在生产环境监控API性能// 使用Performance API const start performance.now(); fetch(/api/data) .then(() { const duration performance.now() - start; console.log(请求耗时: ${duration.toFixed(2)}ms); // 可以上报到监控系统 reportAnalytics(api_timing, { duration }); }); // 关键性能指标 const navigationTiming performance.getEntriesByType(navigation)[0]; console.log(TTFB:, navigationTiming.responseStart - navigationTiming.requestStart);14. 安全加固进阶14.1 JWT最佳实践// 发送请求时添加Authorization头 fetch(/api/protected, { headers: { Authorization: Bearer ${localStorage.getItem(token)} } }); // 处理token过期 fetch(/api/protected) .then(response { if (response.status 401) { // 刷新token return refreshToken() .then(newToken { localStorage.setItem(token, newToken); return fetch(/api/protected, { headers: { Authorization: Bearer ${newToken} } }); }); } return response; });14.2 敏感数据保护// 加密敏感数据 import { encrypt } from ./crypto; fetch(/api/sensitive, { method: POST, body: JSON.stringify({ creditCard: encrypt(cardNumber) }) }); // 避免在控制台打印敏感信息 console.log(user); // 可能泄露敏感信息 - 错误示范 console.log({ id: user.id, name: user.name }); // 安全做法15. 项目结构组织建议经过多个项目实践我总结出这样的目录结构src/ api/ base.js # 基础配置 auth.js # 认证相关 user.js # 用户相关 product.js # 产品相关 utils/ request.js # 封装请求方法 error.js # 错误处理 stores/ # 状态管理 apiStore.jsrequest.js的典型封装import { message } from antd; const request async (url, options {}) { const defaultOptions { headers: { Content-Type: application/json, }, credentials: include }; try { const response await fetch(url, { ...defaultOptions, ...options }); if (!response.ok) { const error await response.json(); throw new Error(error.message || 请求失败); } return response.json(); } catch (error) { message.error(error.message); throw error; } }; export const get (url) request(url); export const post (url, data) request(url, { method: POST, body: JSON.stringify(data) });16. 错误处理的艺术完善的错误处理能让应用更健壮// 错误分类处理 class ApiError extends Error { constructor(message, status) { super(message); this.status status; } } async function fetchData() { try { const response await fetch(/api/data); if (response.status 404) { throw new ApiError(资源不存在, 404); } if (response.status 500) { throw new ApiError(服务器错误, 500); } return response.json(); } catch (error) { if (error instanceof ApiError) { // 显示友好错误提示 showToast(error.message); } else { // 网络错误 showToast(网络连接失败请检查网络); } // 上报错误 trackError(error); throw error; } }17. 取消请求的实现避免组件卸载后仍执行setStateconst controller new AbortController(); fetch(/api/data, { signal: controller.signal }).catch(err { if (err.name AbortError) { console.log(请求已取消); } }); // 取消请求 controller.abort(); // React组件中的使用 useEffect(() { const controller new AbortController(); fetchData(controller.signal); return () controller.abort(); }, []);18. 文件下载进阶技巧处理各种下载场景// 下载并重命名文件 function downloadFile(url, filename) { fetch(url) .then(response response.blob()) .then(blob { const a document.createElement(a); a.href URL.createObjectURL(blob); a.download filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); }); } // 下载多个文件为ZIP import JSZip from jszip; async function downloadAsZip(fileUrls) { const zip new JSZip(); await Promise.all(fileUrls.map(async url { const response await fetch(url); const blob await response.blob(); const filename url.split(/).pop(); zip.file(filename, blob); })); const content await zip.generateAsync({ type: blob }); const zipUrl URL.createObjectURL(content); const a document.createElement(a); a.href zipUrl; a.download files.zip; a.click(); }19. 数据转换与处理19.1 大数据集处理使用流式处理避免内存问题async function processLargeData() { const response await fetch(/api/large-data); const reader response.body.getReader(); const decoder new TextDecoder(); let result ; while (true) { const { done, value } await reader.read(); if (done) break; const chunk decoder.decode(value, { stream: true }); result chunk; // 可以分批处理数据 processChunk(chunk); } return result; }19.2 数据格式转换常见转换场景// FormData转对象 function formDataToObject(formData) { const obj {}; for (const [key, value] of formData.entries()) { obj[key] value; } return obj; } // URL参数转对象 function queryStringToObject(queryString) { return Object.fromEntries(new URLSearchParams(queryString)); }20. 实战案例电商API集成以电商项目为例展示完整流程// api/product.js export async function getProducts(category, page 1) { const response await fetch(/api/products?category${category}page${page}); if (!response.ok) throw new Error(获取商品失败); return response.json(); } export async function addToCart(productId, quantity) { const response await fetch(/api/cart, { method: POST, body: JSON.stringify({ productId, quantity }) }); if (response.status 401) { // 重定向到登录 window.location /login; return; } if (!response.ok) throw new Error(加入购物车失败); return response.json(); } // 在组件中使用 async function handleAddToCart() { try { await addToCart(product.id, 1); showToast(已加入购物车); } catch (error) { showError(error.message); } }21. 调试技巧进阶21.1 使用代理工具调试推荐工具Charles查看和修改网络请求Postman测试API端点Chrome开发者工具性能分析21.2 Mock服务搭建使用MSW创建API mock// src/mocks/handlers.js import { rest } from msw; export const handlers [ rest.get(/api/user, (req, res, ctx) { return res( ctx.json({ id: 123, name: 测试用户 }) ); }) ]; // src/mocks/browser.js import { setupWorker } from msw; import { handlers } from ./handlers; export const worker setupWorker(...handlers); // 在开发环境启用 if (process.env.NODE_ENV development) { worker.start(); }22. 性能优化终极方案22.1 请求优先级管理// 使用fetch的priority选项 fetch(/api/critical-data, { priority: high }); fetch(/api/analytics, { priority: low }); // 预加载重要资源 link relpreload href/api/user asfetch crossorigin22.2 智能重试机制async function fetchWithRetry(url, options {}, retries 3) { try { const response await fetch(url, options); if (response.status 500 retries 0) { await new Promise(resolve setTimeout(resolve, 1000 * (4 - retries))); return fetchWithRetry(url, options, retries - 1); } return response; } catch (error) { if (retries 0) { await new Promise(resolve setTimeout(resolve, 1000)); return fetchWithRetry(url, options, retries - 1); } throw error; } }23. 微前端中的数据交互在微前端架构中的特殊处理// 共享请求库 const api window.sharedAPILibrary || { get: (url) fetch(url).then(res res.json()), post: (url, data) fetch(url, { method: POST, body: JSON.stringify(data) }).then(res res.json()) }; // 在主应用中设置 window.sharedAPILibrary api; // 在微应用中使用 window.sharedAPILibrary.get(/api/data).then(data { console.log(获取数据:, data); });24. 服务端渲染(SSR)中的处理Next.js示例// pages/products.js export async function getServerSideProps() { try { const res await fetch(https://api.example.com/products); const products await res.json(); return { props: { products } }; } catch (error) { return { props: { error: 获取产品失败 } }; } } export default function ProductsPage({ products, error }) { if (error) return div{error}/div; return ( div {products.map(product ( div key{product.id}{product.name}/div ))} /div ); }25. Web Worker中的数据处理将耗时操作放到Worker中// worker.js self.onmessage async (event) { const { url } event.data; const response await fetch(url); const data await response.json(); // 处理大数据 const processed processData(data); self.postMessage(processed); }; // 主线程 const worker new Worker(worker.js); worker.postMessage({ url: /api/large-data }); worker.onmessage (event) { console.log(处理后的数据:, event.data); };26. 数据可视化中的交互处理处理图表数据async function loadChartData() { const [salesData, userData] await Promise.all([ fetch(/api/sales).then(res res.json()), fetch(/api/users).then(res res.json()) ]); // 转换数据格式供图表使用 return { sales: salesData.map(item ({ date: new Date(item.date), amount: item.amount })), users: userData.map(item ({ region: item.region, count: item.count })) }; } // 使用ECharts渲染 loadChartData().then(data { const chart echarts.init(document.getElementById(chart)); chart.setOption({ xAxis: { type: category, data: data.sales.map(d d.date) }, yAxis: { type: value }, series: [{ data: data.sales.map(d d.amount), type: line }] }); });27. 移动端混合开发技巧在Cordova/Capacitor中的处理// 检查网络状态 document.addEventListener(deviceready, () { const networkState navigator.connection.type; if (networkState Connection.NONE) { showOfflineMessage(); loadCachedData(); } else { fetchFreshData(); } }); // 文件下载处理 function downloadFile(url) { const fileTransfer new FileTransfer(); const uri encodeURI(url); const filePath cordova.file.dataDirectory downloadedFile.pdf; fileTransfer.download( uri, filePath, (entry) { console.log(下载完成: entry.toURL()); }, (error) { console.log(下载错误: error.source); } ); }28. 数据持久化策略28.1 IndexedDB存储// 封装IndexedDB操作 class ApiCache { constructor(dbName api-cache, storeName responses) { this.dbPromise new Promise((resolve, reject) { const request indexedDB.open(dbName, 1); request.onupgradeneeded (event) { const db event.target.result; if (!db.objectStoreNames.contains(storeName)) { db.createObjectStore(storeName, { keyPath: url }); } }; request.onsuccess () resolve(request.result); request.onerror () reject(request.error); }); this.storeName storeName; } async get(url) { const db await this.dbPromise; return new Promise((resolve, reject) { const transaction db.transaction(this.storeName, readonly); const store transaction.objectStore(this.storeName); const request store.get(url); request.onsuccess () resolve(request.result?.data); request.onerror () reject(request.error); }); } async set(url, data) { const db await this.dbPromise; return new Promise((resolve, reject) { const transaction db.transaction(this.storeName, readwrite); const store transaction.objectStore(this.storeName); const request store.put({ url, data }); request.onsuccess () resolve(); request.onerror () reject(request.error); }); } } // 使用示例 const cache new ApiCache(); async function getCachedData(url) { const cached await cache.get(url); if (cached) return cached; const response await fetch(url); const data await response.json(); await cache.set(url, data); return data; }28.2 localStorage策略适合小数据缓存const CACHE_EXPIRY 60 * 60 * 1000; // 1小时 function getWithExpiry(key) { const itemStr localStorage.getItem(key); if (!itemStr) return null; const item JSON.parse(itemStr); if (Date.now() item.expiry) { localStorage.removeItem(key); return null; } return item.value; } function setWithExpiry(key, value, ttl CACHE_EXPIRY) { const item { value, expiry: Date.now() ttl }; localStorage.setItem(key, JSON.stringify(item)); } // 使用 const cachedUser getWithExpiry(userData); if (!cachedUser) { fetch(/api/user).then(res res.json()).then(user { setWithExpiry(userData, user); }); }29. 数据压缩与优化29.1 使用gzip压缩// 请求时接受压缩数据 fetch(/api/data, { headers: { Accept-Encoding: gzip, deflate, br } }); // 在Node.js端启用压缩 const express require(express); const compression require(compression); const app express(); app.use(compression());29.2 二进制数据传输使用ArrayBuffer处理二进制数据// 发送二进制数据 const buffer new ArrayBuffer(32); fetch(/api/binary, { method: POST, body: buffer }); // 接收二进制数据 fetch(/api/binary-data) .then(response response.arrayBuffer()) .then(buffer { const view new Uint8Array(buffer); console.log(view); });30. 实时数据更新策略30.1 轮询实现class DataPoller { constructor(url, interval 5000) { this.url url; this.interval interval; this.timer null; this.lastData null; } start(callback) { this.stop(); const fetchData async () { try { const response await fetch(this.url); const data await response.json(); if (JSON.stringify(data) ! JSON.stringify(this.lastData)) { this.lastData data; callback(data); } } catch (error) { console.error(轮询错误:, error); } }; fetchData(); // 立即执行一次 this.timer setInterval(fetchData, this.interval); } stop() { if (this.timer) { clearInterval(this.timer); this.timer null; } } } // 使用 const poller new DataPoller(/api/updates); poller.start(data { console.log(新数据:, data); }); // 组件卸载时 poller.stop();30.2 Server-Sent Events (SSE)const eventSource new EventSource(/api/events); eventSource.onmessage (event) { const data JSON.parse(event.data); console.log(收到事件:, data); }; eventSource.onerror () { console.error(SSE连接错误); // 可以尝试重新连接 }; // 服务端Node.js示例 app.get(/api/events, (req, res) { res.writeHead(200, { Content-Type: text/event-stream, Cache-Control: no-cache, Connection: keep-alive }); const sendEvent (data) { res.write(data: ${JSON.stringify(data)}\n\n); }; // 定时发送数据 const interval setInterval(() { sendEvent({ time: new Date().toISOString() }); }, 1000); // 客户端断开连接 req.on(close, () { clearInterval(interval); res.end(); }); });31. 数据验证与清洗31.1 前端数据验证// 使用zod进行数据验证 import { z } from zod; const UserSchema z.object({ id: z.number(), name: z.string().min(2), email: z.string().email(), age: z.number().optional() }); async function fetchUser() { const response await fetch(/api/user); const data await response.json(); try { return UserSchema.parse(data); } catch (error) { console.error(数据验证失败:, error.errors); throw new Error(无效的用户数据); } }31.2 数据清洗处理function sanitizeInput(input) { if (typeof input ! string) return ; // 移除危险字符 return input .replace(//g, lt;) .replace(//g, gt;) .replace(//g, quot;) .replace(//g, #39;); } // 在发送数据前清洗 function postComment(content) { return fetch(/api/comments, { method: POST, body: JSON.stringify({ content: sanitizeInput(content), timestamp: new Date().toISOString() }) }); }32. 数据分页与无限加载32.1 经典分页实现class Paginator { constructor(url, pageSize 10) { this.url url; this.pageSize pageSize; this.currentPage 1; this.totalPages 1; } async next() { if (this.currentPage this.totalPages) return null; const response await fetch(${this.url}?page${this.currentPage}size${this.pageSize}); const { data, pagination } await response.json(); this.currentPage pagination.currentPage 1; this.totalPages pagination.totalPages; return data; } } // 使用 const paginator new Paginator(/api/products); const firstPage await paginator.next();32.2 无限滚动加载// React实现示例 function InfiniteList() { const [items 
长河君 · 2026/10/28 20:13:55 · 阅读 1.2k JavaScript数据交互实战：从基础到安全优化
1. JavaScript数据交互基础入门前端开发的核心能力之一就是实现数据交互。作为入行十年的老前端我见过太多新手在数据交互环节踩坑。今天我们就从最基础的JavaScript数据交互讲起帮你避开那些我当年踩过的坑。数据交互简单说就是前端页面和后端服务之间的对话。就像两个人聊天需要共同语言一样前后端交互也需要遵循特定规则。JavaScript提供了多种实现方式每种都有其适用场景和注意事项。新手常见误区以为数据交互就是简单的发请求收数据实际上需要考虑安全性、性能优化、错误处理等诸多因素。2. 常见数据交互方式解析2.1 XMLHttpRequest老将不死虽然现在有更现代的fetch API但XHR仍然是必须掌握的基础。它的工作原理就像寄信const xhr new XMLHttpRequest(); xhr.open(GET, https://api.example.com/data, true); xhr.onload function() { if (xhr.status 200) { console.log(JSON.parse(xhr.responseText)); } else { console.error(请求失败:, xhr.statusText); } }; xhr.onerror function() { console.error(网络错误); }; xhr.send();关键点解析open()方法的第三个参数控制是否异步必须处理onerror和状态码检查响应数据需要手动解析JSON.parse2.2 Fetch API现代解决方案Fetch基于Promise代码更简洁fetch(https://api.example.com/data) .then(response { if (!response.ok) { throw new Error(网络响应异常); } return response.json(); }) .then(data console.log(data)) .catch(error console.error(请求失败:, error));优势对比链式调用更清晰内置JSON解析默认不会携带cookie需要配置credentials2.3 WebSocket实时通信利器当需要实时更新时如聊天室、股票行情WebSocket是更好的选择const socket new WebSocket(wss://echo.websocket.org); socket.onopen function() { socket.send(Hello Server!); }; socket.onmessage function(event) { console.log(收到消息:, event.data); }; socket.onclose function() { console.log(连接关闭); };3. 数据交互中的安全防护3.1 CSRF防护实战我曾在一个电商项目中因为没有做好CSRF防护导致严重漏洞。正确的做法// 从cookie中获取token function getCookie(name) { const value ; ${document.cookie}; const parts value.split(; ${name}); if (parts.length 2) return parts.pop().split(;).shift(); } // 发送请求时带上token fetch(/api/payment, { method: POST, headers: { X-CSRF-TOKEN: getCookie(csrfToken) }, body: JSON.stringify({amount: 100}) });3.2 XSS防御方案永远不要信任用户输入我曾见过因为直接输出用户输入导致XSS的案例// 错误示范 document.getElementById(output).innerHTML userInput; // 正确做法 document.getElementById(output).textContent userInput;或者使用DOMPurify等库进行过滤import DOMPurify from dompurify; document.getElementById(output).innerHTML DOMPurify.sanitize(userInput);4. 性能优化技巧4.1 请求合并与缓存在一个大型管理后台项目中我通过以下优化将加载时间减少了40%// 使用Promise.all合并请求 const [userData, productData] await Promise.all([ fetch(/api/user), fetch(/api/products) ]); // 设置缓存 fetch(/api/data, { cache: force-cache // 或 no-store });4.2 数据压缩与分页处理大数据集时// 请求时添加压缩头 fetch(/api/large-data, { headers: { Accept-Encoding: gzip, deflate } }); // 分页请求 async function fetchPaginatedData(page 1, pageSize 20) { const response await fetch(/api/data?page${page}size${pageSize}); return response.json(); }5. 错误处理与调试5.1 全面的错误捕获这是我总结的错误处理模板async function fetchData() { try { const response await fetch(/api/data); if (!response.ok) { // HTTP错误 throw new Error(HTTP错误! 状态码: ${response.status}); } const data await response.json(); if (data.error) { // 业务逻辑错误 throw new Error(data.error.message); } return data; } catch (error) { // 网络错误或JSON解析错误 console.error(请求失败:, error); // 可以在这里添加错误上报逻辑 Sentry.captureException(error); throw error; // 继续抛出供上层处理 } }5.2 实用的调试技巧我常用的调试方法使用浏览器开发者工具的Network面板查看请求/响应头和内容使用console.time()测量请求耗时模拟慢速网络测试超时处理// 测量请求耗时 console.time(API请求); const data await fetchData(); console.timeEnd(API请求); // 输出类似API请求: 356ms6. 现代前端框架中的数据交互6.1 React中的最佳实践在React项目中我推荐这样组织API调用// api.js - 集中管理API export const getUser async (userId) { const response await fetch(/api/users/${userId}); return response.json(); }; // UserComponent.jsx import { getUser } from ./api; function UserComponent({ userId }) { const [user, setUser] useState(null); const [loading, setLoading] useState(true); const [error, setError] useState(null); useEffect(() { const fetchUser async () { try { const data await getUser(userId); setUser(data); } catch (err) { setError(err.message); } finally { setLoading(false); } }; fetchUser(); }, [userId]); if (loading) return div加载中.../div; if (error) return div错误: {error}/div; return div{user.name}/div; }6.2 Vue中的优雅实现Vue3组合式API写法// useApi.js import { ref } from vue; export function useApi(url) { const data ref(null); const error ref(null); const loading ref(false); const fetchData async () { loading.value true; try { const response await fetch(url); data.value await response.json(); } catch (err) { error.value err.message; } finally { loading.value false; } }; return { data, error, loading, fetchData }; } // UserComponent.vue script setup import { useApi } from ./useApi; const { data: user, error, loading } useApi(/api/user/123); /script7. TypeScript加持的数据交互在大型项目中TypeScript能极大提高代码可靠性interface User { id: number; name: string; email: string; } async function fetchUser(userId: number): PromiseUser { const response await fetch(/api/users/${userId}); if (!response.ok) { throw new Error(获取用户失败); } return response.json() as PromiseUser; } // 使用时 try { const user await fetchUser(123); console.log(user.name); // 有类型提示 } catch (error) { if (error instanceof Error) { console.error(error.message); } }类型提示的好处明确知道API返回的数据结构避免属性访问错误方便后续维护和重构8. 实战中的经验分享8.1 文件上传的坑处理文件上传时要注意// 正确创建FormData const formData new FormData(); formData.append(file, fileInput.files[0]); formData.append(metadata, JSON.stringify({ uploader: user123, timestamp: Date.now() })); // 不要设置Content-Type头浏览器会自动处理 fetch(/api/upload, { method: POST, body: formData });8.2 处理大文件下载实现下载进度提示fetch(/api/large-file) .then(response { const contentLength response.headers.get(content-length); const reader response.body.getReader(); let receivedLength 0; const chunks []; return new Promise((resolve) { function processChunk({ done, value }) { if (done) { resolve(new Blob(chunks)); return; } chunks.push(value); receivedLength value.length; console.log(下载进度: ${(receivedLength/contentLength*100).toFixed(1)}%); return reader.read().then(processChunk); } reader.read().then(processChunk); }); }) .then(blob { const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download file.pdf; a.click(); });9. 跨域问题终极解决方案我处理过无数跨域问题总结出这些方案9.1 开发环境解决方案配置代理是最佳实践// vite.config.js export default { server: { proxy: { /api: { target: http://localhost:3000, changeOrigin: true, rewrite: path path.replace(/^\/api/, ) } } } }9.2 生产环境配置正确设置CORS头// Node.js Express示例 app.use((req, res, next) { res.header(Access-Control-Allow-Origin, https://yourdomain.com); res.header(Access-Control-Allow-Methods, GET, POST, PUT, DELETE); res.header(Access-Control-Allow-Headers, Content-Type, Authorization); res.header(Access-Control-Allow-Credentials, true); if (req.method OPTIONS) { return res.sendStatus(200); } next(); });10. 数据交互的未来趋势虽然fetch和XHR仍是主流但一些新技术值得关注10.1 GraphQL实践const query query GetUser($id: ID!) { user(id: $id) { name email posts { title } } } ; fetch(/graphql, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ query, variables: { id: 123 } }) }) .then(res res.json()) .then(data console.log(data.data.user));10.2 WebRTC点对点通信适合实时性要求高的场景// 建立连接 const pc new RTCPeerConnection(); pc.onicecandidate event { if (event.candidate) { // 发送candidate给对等方 } }; pc.ondatachannel event { const channel event.channel; channel.onmessage event { console.log(收到消息:, event.data); }; }; // 创建数据通道 const channel pc.createDataChannel(chat); channel.onopen () { channel.send(Hello!); };11. 单元测试策略确保数据交互代码可靠的关键// 使用jest测试API调用 import { fetchUser } from ./api; jest.mock(node-fetch, () jest.fn()); test(fetchUser返回正确的用户数据, async () { const mockUser { id: 1, name: 测试用户 }; fetch.mockResolvedValue({ ok: true, json: () Promise.resolve(mockUser) }); const user await fetchUser(1); expect(user).toEqual(mockUser); }); test(fetchUser处理网络错误, async () { fetch.mockRejectedValue(new Error(网络错误)); await expect(fetchUser(1)).rejects.toThrow(网络错误); });12. 移动端特殊考量在移动应用中要特别注意12.1 网络状态检测// 检测网络状态 const isOnline navigator.onLine; window.addEventListener(online, () { console.log(网络已连接); // 重试失败的请求 }); window.addEventListener(offline, () { console.log(网络断开); // 显示离线提示 }); // 处理弱网环境 fetch(/api/data, { signal: AbortSignal.timeout(5000) }) .catch(err { if (err.name AbortError) { console.log(请求超时); } });12.2 数据缓存策略// 使用Cache API caches.open(api-cache).then(cache { cache.match(/api/data).then(response { if (response) { return response.json(); } return fetch(/api/data).then(networkResponse { cache.put(/api/data, networkResponse.clone()); return networkResponse.json(); }); }); });13. 性能监控与优化在生产环境监控API性能// 使用Performance API const start performance.now(); fetch(/api/data) .then(() { const duration performance.now() - start; console.log(请求耗时: ${duration.toFixed(2)}ms); // 可以上报到监控系统 reportAnalytics(api_timing, { duration }); }); // 关键性能指标 const navigationTiming performance.getEntriesByType(navigation)[0]; console.log(TTFB:, navigationTiming.responseStart - navigationTiming.requestStart);14. 安全加固进阶14.1 JWT最佳实践// 发送请求时添加Authorization头 fetch(/api/protected, { headers: { Authorization: Bearer ${localStorage.getItem(token)} } }); // 处理token过期 fetch(/api/protected) .then(response { if (response.status 401) { // 刷新token return refreshToken() .then(newToken { localStorage.setItem(token, newToken); return fetch(/api/protected, { headers: { Authorization: Bearer ${newToken} } }); }); } return response; });14.2 敏感数据保护// 加密敏感数据 import { encrypt } from ./crypto; fetch(/api/sensitive, { method: POST, body: JSON.stringify({ creditCard: encrypt(cardNumber) }) }); // 避免在控制台打印敏感信息 console.log(user); // 可能泄露敏感信息 - 错误示范 console.log({ id: user.id, name: user.name }); // 安全做法15. 项目结构组织建议经过多个项目实践我总结出这样的目录结构src/ api/ base.js # 基础配置 auth.js # 认证相关 user.js # 用户相关 product.js # 产品相关 utils/ request.js # 封装请求方法 error.js # 错误处理 stores/ # 状态管理 apiStore.jsrequest.js的典型封装import { message } from antd; const request async (url, options {}) { const defaultOptions { headers: { Content-Type: application/json, }, credentials: include }; try { const response await fetch(url, { ...defaultOptions, ...options }); if (!response.ok) { const error await response.json(); throw new Error(error.message || 请求失败); } return response.json(); } catch (error) { message.error(error.message); throw error; } }; export const get (url) request(url); export const post (url, data) request(url, { method: POST, body: JSON.stringify(data) });16. 错误处理的艺术完善的错误处理能让应用更健壮// 错误分类处理 class ApiError extends Error { constructor(message, status) { super(message); this.status status; } } async function fetchData() { try { const response await fetch(/api/data); if (response.status 404) { throw new ApiError(资源不存在, 404); } if (response.status 500) { throw new ApiError(服务器错误, 500); } return response.json(); } catch (error) { if (error instanceof ApiError) { // 显示友好错误提示 showToast(error.message); } else { // 网络错误 showToast(网络连接失败请检查网络); } // 上报错误 trackError(error); throw error; } }17. 取消请求的实现避免组件卸载后仍执行setStateconst controller new AbortController(); fetch(/api/data, { signal: controller.signal }).catch(err { if (err.name AbortError) { console.log(请求已取消); } }); // 取消请求 controller.abort(); // React组件中的使用 useEffect(() { const controller new AbortController(); fetchData(controller.signal); return () controller.abort(); }, []);18. 文件下载进阶技巧处理各种下载场景// 下载并重命名文件 function downloadFile(url, filename) { fetch(url) .then(response response.blob()) .then(blob { const a document.createElement(a); a.href URL.createObjectURL(blob); a.download filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); }); } // 下载多个文件为ZIP import JSZip from jszip; async function downloadAsZip(fileUrls) { const zip new JSZip(); await Promise.all(fileUrls.map(async url { const response await fetch(url); const blob await response.blob(); const filename url.split(/).pop(); zip.file(filename, blob); })); const content await zip.generateAsync({ type: blob }); const zipUrl URL.createObjectURL(content); const a document.createElement(a); a.href zipUrl; a.download files.zip; a.click(); }19. 数据转换与处理19.1 大数据集处理使用流式处理避免内存问题async function processLargeData() { const response await fetch(/api/large-data); const reader response.body.getReader(); const decoder new TextDecoder(); let result ; while (true) { const { done, value } await reader.read(); if (done) break; const chunk decoder.decode(value, { stream: true }); result chunk; // 可以分批处理数据 processChunk(chunk); } return result; }19.2 数据格式转换常见转换场景// FormData转对象 function formDataToObject(formData) { const obj {}; for (const [key, value] of formData.entries()) { obj[key] value; } return obj; } // URL参数转对象 function queryStringToObject(queryString) { return Object.fromEntries(new URLSearchParams(queryString)); }20. 实战案例电商API集成以电商项目为例展示完整流程// api/product.js export async function getProducts(category, page 1) { const response await fetch(/api/products?category${category}page${page}); if (!response.ok) throw new Error(获取商品失败); return response.json(); } export async function addToCart(productId, quantity) { const response await fetch(/api/cart, { method: POST, body: JSON.stringify({ productId, quantity }) }); if (response.status 401) { // 重定向到登录 window.location /login; return; } if (!response.ok) throw new Error(加入购物车失败); return response.json(); } // 在组件中使用 async function handleAddToCart() { try { await addToCart(product.id, 1); showToast(已加入购物车); } catch (error) { showError(error.message); } }21. 调试技巧进阶21.1 使用代理工具调试推荐工具Charles查看和修改网络请求Postman测试API端点Chrome开发者工具性能分析21.2 Mock服务搭建使用MSW创建API mock// src/mocks/handlers.js import { rest } from msw; export const handlers [ rest.get(/api/user, (req, res, ctx) { return res( ctx.json({ id: 123, name: 测试用户 }) ); }) ]; // src/mocks/browser.js import { setupWorker } from msw; import { handlers } from ./handlers; export const worker setupWorker(...handlers); // 在开发环境启用 if (process.env.NODE_ENV development) { worker.start(); }22. 性能优化终极方案22.1 请求优先级管理// 使用fetch的priority选项 fetch(/api/critical-data, { priority: high }); fetch(/api/analytics, { priority: low }); // 预加载重要资源 link relpreload href/api/user asfetch crossorigin22.2 智能重试机制async function fetchWithRetry(url, options {}, retries 3) { try { const response await fetch(url, options); if (response.status 500 retries 0) { await new Promise(resolve setTimeout(resolve, 1000 * (4 - retries))); return fetchWithRetry(url, options, retries - 1); } return response; } catch (error) { if (retries 0) { await new Promise(resolve setTimeout(resolve, 1000)); return fetchWithRetry(url, options, retries - 1); } throw error; } }23. 微前端中的数据交互在微前端架构中的特殊处理// 共享请求库 const api window.sharedAPILibrary || { get: (url) fetch(url).then(res res.json()), post: (url, data) fetch(url, { method: POST, body: JSON.stringify(data) }).then(res res.json()) }; // 在主应用中设置 window.sharedAPILibrary api; // 在微应用中使用 window.sharedAPILibrary.get(/api/data).then(data { console.log(获取数据:, data); });24. 服务端渲染(SSR)中的处理Next.js示例// pages/products.js export async function getServerSideProps() { try { const res await fetch(https://api.example.com/products); const products await res.json(); return { props: { products } }; } catch (error) { return { props: { error: 获取产品失败 } }; } } export default function ProductsPage({ products, error }) { if (error) return div{error}/div; return ( div {products.map(product ( div key{product.id}{product.name}/div ))} /div ); }25. Web Worker中的数据处理将耗时操作放到Worker中// worker.js self.onmessage async (event) { const { url } event.data; const response await fetch(url); const data await response.json(); // 处理大数据 const processed processData(data); self.postMessage(processed); }; // 主线程 const worker new Worker(worker.js); worker.postMessage({ url: /api/large-data }); worker.onmessage (event) { console.log(处理后的数据:, event.data); };26. 数据可视化中的交互处理处理图表数据async function loadChartData() { const [salesData, userData] await Promise.all([ fetch(/api/sales).then(res res.json()), fetch(/api/users).then(res res.json()) ]); // 转换数据格式供图表使用 return { sales: salesData.map(item ({ date: new Date(item.date), amount: item.amount })), users: userData.map(item ({ region: item.region, count: item.count })) }; } // 使用ECharts渲染 loadChartData().then(data { const chart echarts.init(document.getElementById(chart)); chart.setOption({ xAxis: { type: category, data: data.sales.map(d d.date) }, yAxis: { type: value }, series: [{ data: data.sales.map(d d.amount), type: line }] }); });27. 移动端混合开发技巧在Cordova/Capacitor中的处理// 检查网络状态 document.addEventListener(deviceready, () { const networkState navigator.connection.type; if (networkState Connection.NONE) { showOfflineMessage(); loadCachedData(); } else { fetchFreshData(); } }); // 文件下载处理 function downloadFile(url) { const fileTransfer new FileTransfer(); const uri encodeURI(url); const filePath cordova.file.dataDirectory downloadedFile.pdf; fileTransfer.download( uri, filePath, (entry) { console.log(下载完成: entry.toURL()); }, (error) { console.log(下载错误: error.source); } ); }28. 数据持久化策略28.1 IndexedDB存储// 封装IndexedDB操作 class ApiCache { constructor(dbName api-cache, storeName responses) { this.dbPromise new Promise((resolve, reject) { const request indexedDB.open(dbName, 1); request.onupgradeneeded (event) { const db event.target.result; if (!db.objectStoreNames.contains(storeName)) { db.createObjectStore(storeName, { keyPath: url }); } }; request.onsuccess () resolve(request.result); request.onerror () reject(request.error); }); this.storeName storeName; } async get(url) { const db await this.dbPromise; return new Promise((resolve, reject) { const transaction db.transaction(this.storeName, readonly); const store transaction.objectStore(this.storeName); const request store.get(url); request.onsuccess () resolve(request.result?.data); request.onerror () reject(request.error); }); } async set(url, data) { const db await this.dbPromise; return new Promise((resolve, reject) { const transaction db.transaction(this.storeName, readwrite); const store transaction.objectStore(this.storeName); const request store.put({ url, data }); request.onsuccess () resolve(); request.onerror () reject(request.error); }); } } // 使用示例 const cache new ApiCache(); async function getCachedData(url) { const cached await cache.get(url); if (cached) return cached; const response await fetch(url); const data await response.json(); await cache.set(url, data); return data; }28.2 localStorage策略适合小数据缓存const CACHE_EXPIRY 60 * 60 * 1000; // 1小时 function getWithExpiry(key) { const itemStr localStorage.getItem(key); if (!itemStr) return null; const item JSON.parse(itemStr); if (Date.now() item.expiry) { localStorage.removeItem(key); return null; } return item.value; } function setWithExpiry(key, value, ttl CACHE_EXPIRY) { const item { value, expiry: Date.now() ttl }; localStorage.setItem(key, JSON.stringify(item)); } // 使用 const cachedUser getWithExpiry(userData); if (!cachedUser) { fetch(/api/user).then(res res.json()).then(user { setWithExpiry(userData, user); }); }29. 数据压缩与优化29.1 使用gzip压缩// 请求时接受压缩数据 fetch(/api/data, { headers: { Accept-Encoding: gzip, deflate, br } }); // 在Node.js端启用压缩 const express require(express); const compression require(compression); const app express(); app.use(compression());29.2 二进制数据传输使用ArrayBuffer处理二进制数据// 发送二进制数据 const buffer new ArrayBuffer(32); fetch(/api/binary, { method: POST, body: buffer }); // 接收二进制数据 fetch(/api/binary-data) .then(response response.arrayBuffer()) .then(buffer { const view new Uint8Array(buffer); console.log(view); });30. 实时数据更新策略30.1 轮询实现class DataPoller { constructor(url, interval 5000) { this.url url; this.interval interval; this.timer null; this.lastData null; } start(callback) { this.stop(); const fetchData async () { try { const response await fetch(this.url); const data await response.json(); if (JSON.stringify(data) ! JSON.stringify(this.lastData)) { this.lastData data; callback(data); } } catch (error) { console.error(轮询错误:, error); } }; fetchData(); // 立即执行一次 this.timer setInterval(fetchData, this.interval); } stop() { if (this.timer) { clearInterval(this.timer); this.timer null; } } } // 使用 const poller new DataPoller(/api/updates); poller.start(data { console.log(新数据:, data); }); // 组件卸载时 poller.stop();30.2 Server-Sent Events (SSE)const eventSource new EventSource(/api/events); eventSource.onmessage (event) { const data JSON.parse(event.data); console.log(收到事件:, data); }; eventSource.onerror () { console.error(SSE连接错误); // 可以尝试重新连接 }; // 服务端Node.js示例 app.get(/api/events, (req, res) { res.writeHead(200, { Content-Type: text/event-stream, Cache-Control: no-cache, Connection: keep-alive }); const sendEvent (data) { res.write(data: ${JSON.stringify(data)}\n\n); }; // 定时发送数据 const interval setInterval(() { sendEvent({ time: new Date().toISOString() }); }, 1000); // 客户端断开连接 req.on(close, () { clearInterval(interval); res.end(); }); });31. 数据验证与清洗31.1 前端数据验证// 使用zod进行数据验证 import { z } from zod; const UserSchema z.object({ id: z.number(), name: z.string().min(2), email: z.string().email(), age: z.number().optional() }); async function fetchUser() { const response await fetch(/api/user); const data await response.json(); try { return UserSchema.parse(data); } catch (error) { console.error(数据验证失败:, error.errors); throw new Error(无效的用户数据); } }31.2 数据清洗处理function sanitizeInput(input) { if (typeof input ! string) return ; // 移除危险字符 return input .replace(//g, lt;) .replace(//g, gt;) .replace(//g, quot;) .replace(//g, #39;); } // 在发送数据前清洗 function postComment(content) { return fetch(/api/comments, { method: POST, body: JSON.stringify({ content: sanitizeInput(content), timestamp: new Date().toISOString() }) }); }32. 数据分页与无限加载32.1 经典分页实现class Paginator { constructor(url, pageSize 10) { this.url url; this.pageSize pageSize; this.currentPage 1; this.totalPages 1; } async next() { if (this.currentPage this.totalPages) return null; const response await fetch(${this.url}?page${this.currentPage}size${this.pageSize}); const { data, pagination } await response.json(); this.currentPage pagination.currentPage 1; this.totalPages pagination.totalPages; return data; } } // 使用 const paginator new Paginator(/api/products); const firstPage await paginator.next();32.2 无限滚动加载// React实现示例 function InfiniteList() { const [items