api.js 封装异步请求逻辑，支持 GET/POST 方法，内置错误处理与响应数据格式化，适配API.js 详解指南
API.js
什么是 API.js？
API.js 是一个轻量级的 JavaScript 库，用于简化 HTTP 请求操作，它封装了 XMLHttpRequest 和 fetch 的底层实现，提供更友好的接口，支持 Promise 模式，适用于前端与后端的数据交互场景。
核心特性
| 特性 | 说明 |
|---|---|
| Promise 支持 | 返回 Promise 对象，支持 .then() 和 .catch() 链式调用 |
| 自动 JSON 转换 | 请求时自动将对象转为 JSON，响应时自动解析 JSON 数据 |
| 拦截器机制 | 支持请求前和响应后的全局拦截（类似 Axios） |
| 超时控制 | 可设置请求超时时间 |
| 取消请求 | 支持通过 AbortController 取消未完成的请求 |
核心功能详解
HTTP 请求方法
| 方法名 | 说明 | 示例调用 |
|---|---|---|
get |
发送 GET 请求 | API.get('/api/user') |
post |
发送 POST 请求 | API.post('/api/login', {username, password}) |
put |
发送 PUT 请求 | API.put('/api/user/1', {name: 'John'}) |
delete |
发送 DELETE 请求 | API.delete('/api/user/1') |
通用配置选项
| 配置项 | 类型 | 说明 |
|---|---|---|
baseURL |
string |
基础路径（所有请求会拼接此路径） |
timeout |
number |
请求超时时间（单位：毫秒） |
headers |
object |
自定义请求头（如 {'Authorization': 'Bearer token'}） |
withCredentials |
boolean |
是否携带凭证（Cookie） |
使用方法
安装与引入
# 通过 npm 安装 npm install api.js
// 引入并配置
import API from 'api.js';
API.config({
baseURL: 'https://api.example.com',
timeout: 5000,
});
基本请求示例
GET 请求
API.get('/users')
.then(data => {
console.log('用户列表:', data);
})
.catch(error => {
console.error('请求错误:', error);
});
POST 请求
API.post('/login', { username: 'admin', password: '123456' })
.then(data => {
console.log('登录成功:', data);
})
.catch(error => {
console.error('登录失败:', error);
});
高级用法
设置拦截器
// 添加请求拦截器
API.interceptors.request.use(config => {
config.headers['X-Custom-Header'] = 'my-header';
return config;
});
// 添加响应拦截器
API.interceptors.response.use(response => {
if (response.status === 401) {
window.location.href = '/login'; // 未授权跳转登录页
}
return response;
});
取消请求
const controller = new AbortController();
API.get('/large-file', { signal: controller.signal })
.then(data => console.log(data))
.catch(error => {
if (error.name === 'AbortError') {
console.log('请求已取消');
}
});
// 触发取消
controller.abort();
优势与局限性
优势
- 轻量级：体积仅 ~5KB，适合移动端或对性能敏感的场景。
- 链式调用：支持 Promise 链式操作，代码更简洁。
- 灵活扩展：通过拦截器实现全局配置（如统一添加 token）。
- 浏览器兼容：支持 IE10+ 及现代浏览器。
局限性
- 无数据缓存：需手动实现缓存逻辑。
- 有限功能：相比 Axios，缺少内置的表单数据处理、文件上传等高级功能。
- 依赖环境：部分功能（如
fetch）在低版本浏览器中需 polyfill。
常见问题与解答
Q1：如何处理跨域问题？
A：跨域问题需服务器端配合设置 Access-Control-Allow-Origin，API.js 本身无法绕过跨域限制，但可通过代理服务器（如 Nginx）或后端 CORS 配置解决。
Q2：如何在低版本浏览器中使用 API.js？
A：低版本浏览器（如 IE10）可能不支持 Promise，需引入 polyfill（如 es6-promise）或使用回调函数替代 `
到此，以上就是小编对于“api.js”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。
【版权声明】：本站所有内容均来自网络，若无意侵犯到您的权利，请及时与我们联系将尽快删除相关内容!
