引言：现代JavaScript网络编程的重要性
在当今的Web开发中，网络请求是构建动态应用的核心组成部分。无论是从后端API获取数据、提交表单，还是实现实时通信，JavaScript的网络编程能力都至关重要。随着ES6标准的普及，
fetch
API成为了浏览器原生的网络请求工具，而第三方库如
axios
则提供了更强大、更易用的功能。本文将从基础入手，深入探讨
fetch
API的使用、
axios
的封装技巧，以及在实际开发中常见的网络问题及其解决方案。
为什么需要掌握这些技能？首先，
fetch
API是现代浏览器的标准，无需额外依赖，但其原生功能相对基础，需要开发者手动处理许多细节。其次，
axios
作为基于Promise的HTTP客户端，提供了拦截器、取消请求等高级特性，极大地提升了开发效率。最后，网络编程中常见的错误如跨域、超时、认证失败等，需要系统性的解决方案来确保应用的稳定性和安全性。
本文将分为三个主要部分：
fetch API的使用与优化
、
axios的封装技巧
，以及
常见问题解决方案
。每个部分都会提供详细的代码示例和解释，帮助读者从理论到实践全面掌握JavaScript网络编程。无论你是初学者还是有经验的开发者，这篇文章都将提供实用的指导。
第一部分：fetch API的使用与优化
fetch API基础：发起简单的GET请求
fetch
API是浏览器内置的用于发起网络请求的接口，它返回一个Promise，使得异步操作更加直观。与传统的
XMLHttpRequest
相比，
fetch
语法更简洁，且支持现代JavaScript的async/await模式。
要发起一个简单的GET请求，只需提供URL即可。以下是一个基础示例：
// 使用fetch发起GET请求
fetch(‘https://api.example.com/users’)
.then(response => {
// 检查响应状态
if (!response.ok) {
throw new Error(‘Network response was not ok’);
}
return response.json(); // 解析JSON数据
})
.then(data => {
console.log(‘用户数据:’, data);
})
.catch(error => {
console.error(‘请求失败:’, error);
});
在这个例子中，
fetch
返回一个Promise，解析后得到
Response
对象。我们需要检查
response.ok
属性（布尔值，表示HTTP状态码是否在200-299范围内），然后调用
response.json()
来解析JSON响应体。如果请求失败（如网络错误或服务器返回非2xx状态），Promise会reject，我们可以在
catch
中处理错误。
关键点
：
fetch
不会自动抛出HTTP错误（如404或500），它只在网络层失败时reject。因此，总是手动检查
response.ok
。
处理POST请求和请求选项
fetch
支持通过第二个参数传递选项对象，包括方法、头部、体数据等。对于POST请求，我们通常需要指定
method: ‘POST’
，并设置
body
和
headers
。
示例：发送JSON数据的POST请求。
// POST请求示例：发送用户数据
const userData = { name: ‘Alice’, email: ‘alice@example.com’ };
fetch(‘https://api.example.com/users’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: ‘Bearer your-token’ // 如果需要认证
},
body: JSON.stringify(userData) // 将对象转为JSON字符串
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
console.log(‘创建成功:’, data);
})
.catch(error => {
console.error(‘POST请求失败:’, error);
});
细节说明
：
headers
：必须设置
Content-Type
为
application/json
，否则服务器可能无法正确解析。
body
：只能是字符串、Blob、ArrayBuffer等类型。对于JSON，使用
JSON.stringify
转换。
如果发送表单数据，可以使用
FormData
对象作为body，无需设置Content-Type，浏览器会自动处理。
fetch的高级用法：超时控制和AbortController
fetch
原生不支持超时设置，但可以通过
AbortController
来实现请求取消和超时。这在处理长时间未响应的请求时非常有用。
示例：添加超时功能的fetch。
// 使用AbortController实现超时
const controller = new AbortController();
const signal = controller.signal;
// 设置5秒超时
const timeoutId = setTimeout(() => controller.abort(), 5000);
fetch(‘https://api.example.com/slow-endpoint’, { signal })
.then(response => {
clearTimeout(timeoutId); // 清除超时定时器
if (!response.ok) throw new Error(‘Request failed’);
return response.json();
})
.then(data => {
console.log(‘数据:’, data);
})
.catch(error => {
if (error.name === ‘AbortError’) {
console.error(‘请求超时’);
} else {
console.error(‘其他错误:’, error);
}
});
解释
：
AbortController
创建一个信号对象，传递给
fetch
的
signal
选项。
abort()
方法会取消请求，并抛出
AbortError
。
在实际应用中，可以将此逻辑封装成一个函数，支持自定义超时时间。
fetch的局限性与优化建议
尽管
fetch
强大，但它缺少一些便利功能：
不支持请求取消（除了AbortController）。
没有内置的拦截器或重试机制。
默认不发送和接收cookies（需设置
credentials: ‘include’
）。
优化建议：
始终使用async/await简化代码：
async function fetchUsers() {
try {
const response = await fetch(‘https://api.example.com/users’);
if (!response.ok) throw new Error(‘Failed’);
const data = await response.json();
return data;
} catch (error) {
console.error(error);
return null;
}
}
对于复杂应用，考虑封装一个fetch工具函数，统一处理错误、日志和认证。
第二部分：axios的封装技巧
axios简介：为什么选择axios？
axios
是一个基于Promise的HTTP客户端，适用于浏览器和Node.js。它比
fetch
更强大，支持请求/响应拦截器、自动转换JSON、取消请求、超时设置等。安装简单：
npm install axios
。
axios的核心优势在于其可配置性和易用性。例如，它可以全局设置baseURL、headers，并轻松处理认证。
基本使用：GET和POST请求
首先，导入axios并发起请求。
示例：GET请求。
import axios from ‘axios’;
axios.get(‘https://api.example.com/users’)
.then(response => {
console.log(response.data); // axios自动解析JSON
})
.catch(error => {
console.error(error);
});
POST请求：
const userData = { name: ‘Bob’, email: ‘bob@example.com’ };
axios.post(‘https://api.example.com/users’, userData, {
headers: { ‘Authorization’: ‘Bearer token’ }
})
.then(response => {
console.log(‘创建成功:’, response.data);
})
.catch(error => {
console.error(error);
});
优势
：axios自动处理JSON序列化和解析，无需手动设置headers。
封装技巧：创建可复用的axios实例
在实际项目中，直接使用全局axios可能导致配置混乱。最佳实践是创建实例，并封装核心功能。
步骤1：创建axios实例。
// api/axiosInstance.js
import axios from ‘axios’;
const instance = axios.create({
baseURL: ‘https://api.example.com’, // 统一基础URL
timeout: 10000, // 默认超时10秒
headers: { ‘Content-Type’: ‘application/json’ }
});
export default instance;
步骤2：添加请求拦截器（用于添加认证token）。
// 在axiosInstance.js中添加
instance.interceptors.request.use(
config => {
const token = localStorage.getItem(‘token’); // 从存储获取token
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
console.log(‘请求发送:’, config); // 日志记录
return config;
},
error => {
return Promise.reject(error);
}
);
步骤3：添加响应拦截器（处理全局错误）。
instance.interceptors.response.use(
response => {
return response; // 直接返回响应
},
error => {
if (error.response) {
const { status, data } = error.response;
if (status === 401) {
// 未认证，跳转登录
window.location.href = ‘/login’;
} else if (status === 429) {
console.warn(‘请求过于频繁’);
}
console.error(`API Error ${status}:`, data);
} else if (error.code === ‘ECONNABORTED’) {
console.error(‘请求超时’);
}
return Promise.reject(error);
}
);
步骤4：封装API服务。
// api/userService.js
import instance from ‘./axiosInstance’;
export const getUsers = () => instance.get(‘/users’);
export const createUser = (data) => instance.post(‘/users’, data);
export const updateUser = (id, data) => instance.put(`/users/${id}`, data);
export const deleteUser = (id) => instance.delete(`/users/${id}`);
使用示例：
import { getUsers } from ‘./api/userService’;
async function loadUsers() {
try {
const response = await getUsers();
console.log(response.data);
} catch (error) {
// 已在拦截器中处理
}
}
封装技巧总结
：
实例化
：避免全局配置污染。
拦截器
：统一处理认证、错误和日志。
模块化
：将API按功能拆分成服务文件，提高可维护性。
取消请求
：使用
CancelToken
（axios v0.22+用AbortController）：
const source = axios.CancelToken.source();
instance.get(‘/users’, { cancelToken: source.token }).catch(err => {
if (axios.isCancel(err)) console.log(‘请求取消’);
});
// 取消：source.cancel(‘用户取消’);
高级封装：重试机制和缓存
对于不稳定的网络，可以添加重试逻辑。
// 重试拦截器示例
instance.interceptors.response.use(
response => response,
async error => {
const config = error.config;
if (!config || !config.retry || config.__retryCount >= config.retry) {
return Promise.reject(error);
}
config.__retryCount = config.__retryCount || 0;
config.__retryCount++;
// 等待1秒后重试
await new Promise(resolve => setTimeout(resolve, 1000));
return instance(config);
}
);
// 使用：instance.get(‘/users’, { retry: 3 });
第三部分：常见问题解决方案
问题1：跨域错误（CORS）
症状
：浏览器控制台显示”CORS policy”错误，请求被阻止。
原因
：浏览器同源策略限制，不同域名/端口/协议的请求需服务器允许。
解决方案
：
服务器端
：配置CORS头。例如，在Node.js/Express中：
const express = require(‘express’);
const cors = require(‘cors’);
const app = express();
app.use(cors({ origin: ‘http://localhost:3000’ })); // 允许特定源
开发环境
：使用代理服务器（如Webpack DevServer或Vite的proxy）。
// vite.config.js
export default {
server: {
proxy: {
‘/api’: {
target: ‘https://api.example.com’,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ”)
}
}
}
};
然后前端请求
/api/users
会代理到
https://api.example.com/users
。
问题2：请求超时
症状
：页面卡住，无响应。
解决方案
：
在fetch中使用AbortController（如前文示例）。
在axios中设置
timeout
并处理：
axios.get(‘/api/data’, { timeout: 5000 })
.catch(error => {
if (error.code === ‘ECONNABORTED’) {
alert(‘请求超时，请重试’);
}
});
优化：添加用户友好的加载状态和重试按钮。
问题3：认证失败（401 Unauthorized）
症状
：API返回401，无法访问受保护资源。
解决方案
：
使用拦截器自动刷新token（如JWT）。
// 响应拦截器中添加
if (error.response?.status === 401) {
// 尝试刷新token
return refreshToken().then(newToken => {
localStorage.setItem(‘token’, newToken);
error.config.headers.Authorization = `Bearer ${newToken}`;
return instance(error.config); // 重试原请求
}).catch(() => {
// 刷新失败，跳转登录
window.location.href = ‘/login’;
});
}
前端存储token：使用localStorage或sessionStorage，但注意安全性（避免XSS攻击）。
问题4：JSON解析错误
症状
：
SyntaxError: Unexpected token
。
原因
：响应不是有效JSON，或服务器返回空体/HTML错误页。
解决方案
：
检查响应类型：
fetch(‘/api/data’)
.then(response => {
const contentType = response.headers.get(‘content-type’);
if (contentType && contentType.includes(‘application/json’)) {
return response.json();
} else {
return response.text(); // 处理非JSON
}
})
.then(data => {
if (typeof data === ‘string’) {
console.error(‘非JSON响应:’, data);
} else {
console.log(data);
}
});
在axios中，默认自动解析JSON，但可手动检查
response.headers[‘content-type’]
。
问题5：性能和安全最佳实践
性能
：使用HTTP/2、压缩响应、批量请求（GraphQL或自定义端点）。
安全
：
避免在URL中暴露敏感信息，使用POST/headers。
验证输入，防止注入。
使用HTTPS，确保证书有效。
对于CORS，严格限制允许的源。
结论：掌握网络编程，提升开发效率
通过本文，我们从
fetch
的基础用法，到
axios
的高级封装，再到常见问题的解决方案，全面覆盖了JavaScript网络编程的核心内容。
fetch
适合简单场景，而
axios
更适合企业级应用。记住，网络编程的关键是错误处理和用户体验——总是假设网络不可靠，并提供重试/反馈机制。
实践建议：从一个小项目开始，如一个Todo应用，集成这些技术。参考官方文档（MDN for fetch, axios docs）以获取最新更新。如果你有特定场景的疑问，欢迎进一步讨论！