在前端项目里，页面经常需要调用后端接口获取数据。如果每次都写完整的请求代码，不仅重复劳动，还不容易统一处理异常和认证信息。利用JavaScript对网络请求做一层封装，是解决这类问题的常见做法。
为什么需要封装网络请求
未封装的请求代码通常散落在各个页面，存在以下问题：
- 重复设置超时时间、请求头
- 错误处理逻辑写多遍，风格不一致
- 接口地址改动时要全局搜索替换
封装后可以把公共逻辑收拢到一处，业务代码只需要传入接口名和参数。
基于fetch的简单封装
使用浏览器原生的fetch也可以做轻量封装，下面示例展示了一个基础请求函数：
// 基础请求封装
function request(url, options = {}) {
const defaultHeaders = {
'Content-Type': 'application/json'
};
// 合并请求头
options.headers = Object.assign({}, defaultHeaders, options.headers);
return fetch(url, options)
.then(function (res) {
if (!res.ok) {
throw new Error('网络请求失败，状态码：' + res.status);
}
return res.json();
})
.catch(function (err) {
console.error('请求出错', err);
throw err;
});
}
// 使用方式
request('https://ipipp.com/api/user', { method: 'GET' })
.then(function (data) {
console.log(data);
});
使用axios进行更完善的封装
axios提供了拦截器机制，更适合中大型项目。我们可以创建实例并统一处理请求和响应。
// 引入axios
const axios = require('axios');
// 创建实例
const http = axios.create({
baseURL: 'https://ipipp.com/api',
timeout: 10000
});
// 请求拦截器：自动加token
http.interceptors.request.use(function (config) {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = 'Bearer ' + token;
}
return config;
}, function (error) {
return Promise.reject(error);
});
// 响应拦截器：统一报错
http.interceptors.response.use(function (response) {
return response.data;
}, function (error) {
alert('接口异常，请稍后重试');
return Promise.reject(error);
});
// 导出封装好的方法
module.exports = {
get: function (url, params) {
return http.get(url, { params: params });
},
post: function (url, data) {
return http.post(url, data);
}
};
封装时的注意事项
在写封装代码时，有几个点值得留意：
| 事项 | 说明 |
|---|---|
| 错误处理 | 不要吞掉异常，应抛给调用方或统一提示 |
| 类型判断 | 对传入的params和data做基本校验 |
| 环境区分 | 开发环境可打印日志，生产环境关闭 |
当使用fetch()这类函数时，记住它返回的是Promise，可以用async和await简化书写。封装不是越复杂越好，能满足团队约定并降低维护成本就是合适的方案。
JavaScript网络请求封装axios修改时间：2026-07-30 06:00:18