前端ajax封装教程
原创
AJAX（Asynchronous JavaScript and XML）是前端与后端进行异步通信的核心技术。封装AJAX可以提高代码复用性、统一处理错误和优化请求流程。下面是一个实用的AJAX封装教程，包含完整实现和使用示例。
一、封装核心思路
- 统一处理请求参数和 headers
- 集中处理错误和异常情况
- 支持Promise，方便使用async/await
- 实现请求拦截和响应拦截
- 处理超时和取消请求
二、完整封装实现
下面是一个基于原生XMLHttpRequest的AJAX封装，支持GET、POST等常用方法：
三、使用方法
1. 基础配置
首先进行全局配置，设置基础URL、请求头等：
import ajax from './ajax.js';
// 配置基础URL
ajax.setDefaults({
baseURL: 'https://api.example.com',
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token')
}
});2. 设置拦截器
拦截器可以在请求发送前和响应返回后进行一些统一处理：
// 请求拦截器 - 例如添加token
ajax.setDefaults({
requestInterceptor: (config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
// 显示加载中提示
showLoading();
return config;
},
// 响应拦截器
responseInterceptor: (response) => {
// 隐藏加载中提示
hideLoading();
// 统一处理响应数据格式
if (response.data.code === 200) {
return response.data.data;
} else {
throw new Error(response.data.message || '请求失败');
}
},
// 错误拦截器
errorInterceptor: (error) => {
hideLoading();
// 统一错误处理
if (error.status === 401) {
// 未授权，跳转到登录页
location.href = '/login';
}
return error;
}
});3. 发送请求
使用封装好的方法发送各种类型的请求：
// GET请求
async function getUserInfo(userId) {
try {
const data = await ajax.get('/users', { id: userId });
console.log('用户信息:', data);
return data;
} catch (error) {
console.error('获取用户信息失败:', error);
}
}
// POST请求
async function createUser(userData) {
try {
const result = await ajax.post('/users', userData);
console.log('用户创建成功:', result);
} catch (error) {
console.error('用户创建失败:', error);
}
}
// PUT请求
async function updateUser(userId, userData) {
try {
await ajax.put(`/users/${userId}`, userData);
} catch (error) {
console.error('更新用户失败:', error);
}
}
// DELETE请求
async function deleteUser(userId) {
try {
await ajax.delete('/users', { id: userId });
} catch (error) {
console.error('删除用户失败:', error);
}
}四、封装的优势
- 代码复用：避免重复编写AJAX逻辑
- 统一处理：集中处理错误、加载状态、权限验证等
- 易于维护：修改一处即可影响所有请求
- 扩展性强：可以方便地添加新功能如缓存、重试等
- 使用便捷：提供简洁的API，如get、post等方法
五、扩展建议
- 添加请求缓存功能，减少重复请求
- 实现请求重试机制，应对临时网络问题
- 支持取消请求，避免无用请求消耗资源
- 添加请求队列，控制并发请求数量
通过这个封装，你可以在项目中更高效、更规范地处理AJAX请求，提升开发效率和代码质量。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
